yucatio@システムエンジニア

趣味で作ったものいろいろ

ロゴの作成と表示(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

仕上げにロゴを作成して表示してみましょう。ロゴを、自動でかつ無料で作成してくれる便利なサイトがたくさんあります!

peraichi.com

今回はLOGASTERというサービスを使用します。

www.777logos.com

ロゴ作成の前にサービス名を決めます。今回はタスク管理アプリ(TODOアプリ)ということで、TODODO(トドド)というサービス名にしました。

f:id:yucatio:20181216212619p:plain
サービス名の入力

ビジネスタイプを選択して次へ。

ロゴの候補がたくさん表示されます。

f:id:yucatio:20181216212652p:plain
ロゴデザインの選択画面

今回はチェックマークっぽいロゴにしました。 ロゴの編集でフォントの種類やエンブレムの色を変えることができます。

f:id:yucatio:20181216212754p:plain
ロゴの編集

無料では透かしが入っている小サイズのロゴをダウンロードできます。

f:id:yucatio:20181216212907p:plain
ロゴのダウンロード

ダウンロードしたファイルを解凍すると6種類のロゴファイルが入っています。

f:id:yucatio:20181216213356p:plain

ロゴをwebページに表示してみましょう。

1_Primary_logo_on_transparent_404x63.pngsrc/img/logo/Primary_logo_on_transparent_404x63.png に配置します。ファイルをリネームしています。

src/components/header/index.js

import logo from '../../img/logo/Primary_logo_on_transparent_404x63.png'  // 追加
// import Typography from '@material-ui/core/Typography'  を削除

const Header = ({ classes }) => (
  <AppBar className={classes.appBar}>
    <Toolbar>
      {/* Typography を削除
        <Typography variant="h6" color="inherit" component={Link} to="/">
          タスク管理アプリ
        </Typography>
      */}
      {/* 追加ここから */}
      <Link to='/'>
        <img src={logo} alt="TODODO(トドド)" height="36" width="auto"/>
      </Link>
      {/* 追加ここまで */}
      <div className={classes.grow}></div>
      <MenuIcons />
      <Login />
    </Toolbar>
  </AppBar>
)

ページタイトルを書き換えます。

public/index.html

<html lang="en">
  <head>
    <!— 中略 —>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <title>TODODO(トドド) タスク管理アプリ</title>  <!— 変更 —>
  </head>
  <!— 以下略 —>

実行結果です。ロゴが表示されました。

f:id:yucatio:20181216214537p:plain

以上でロゴの作成と表示ができました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com