★前回の記事
仕上げにロゴを作成して表示してみましょう。ロゴを、自動でかつ無料で作成してくれる便利なサイトがたくさんあります!
今回はLOGASTERというサービスを使用します。
ロゴ作成の前にサービス名を決めます。今回はタスク管理アプリ(TODOアプリ)ということで、TODODO(トドド)というサービス名にしました。
ビジネスタイプを選択して次へ。
ロゴの候補がたくさん表示されます。
今回はチェックマークっぽいロゴにしました。 ロゴの編集でフォントの種類やエンブレムの色を変えることができます。
無料では透かしが入っている小サイズのロゴをダウンロードできます。
ダウンロードしたファイルを解凍すると6種類のロゴファイルが入っています。
ロゴをwebページに表示してみましょう。
1_Primary_logo_on_transparent_404x63.png
を
src/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> <!— 以下略 —>
実行結果です。ロゴが表示されました。
以上でロゴの作成と表示ができました。
★次回の記事
★目次