ブログやサイトを運営していると初心者ながらにデザインで気になるところが色々出てきます。「ここの色変えたいな」とか「ここの字の大きさ変えたいな」とかそのような細かいところも気になり出してくるところですが、ブログやサイトはコンテンツ第一になっていかないといけないので正直時間はかけてられません。気になる細かいデザインはサッと直してコンテンツの充実に時間を注ぎましょう！
この記録を読むとできるようになることは？
WordPress（ワードプレス）のメイン画面に表示してある「メニュー」のフォントサイズを変えることができるようになります。記録はテーマ「Cocoon」を使用していますがWordPressのメニュー項目から変更するので他のテーマにも利用できる方法です。
メニューのフォントサイズを変えてみます
今回変えてみるのはメインページのこの部分です。画像では左から2個目の「WordPress/ワードプレス」を他のメニュー項目より小さく変えてあります。他のメニュー項目より小さくすることで主張を抑えてメニュー以外のコンテンツに目が届くようになりそうです。また目立たせたいメニューだけ大きくするなどの利用にも一役買えそうです。
カスタムは「外観」→「メニュー」から
WordPressのカスタムも少しづつ慣れてきました。①「外観」から②「メニュー」を開き③「▲」をクリックすると④「ナビゲーション」ラベルが開きます。ナビゲーションラベルに入力した文字がメニュー項目として表示されます。ここに「ブログ」と入力していたものを画像のように”<font size=”5″>ブログ</font>“と入力します。
HTMLを使ってみましょう
“<font size=”5”>ブログ</font>”はHTMLを使っています。「HTMLって何？」ブログ初心者の私はHTML初心者でもあります。HTMLとは「HyperText Markup Language（ハイパーテキストマークアップランゲージ）」の頭文字をとってHTMLという名前がついています。簡単にいうと”Webページを作成するためにつくられた言語”のことをいい、HTMLを使ってWebページに表示されるものに指示を出すということになります。今回の指示は「ブログという文字のサイズを5にして表示してね！」という感じの指示です。数字を変えると文字の大きさは変わります。
HTMLは完璧主義者？
フォントサイズを一番左のダイエットからブログまでsize1からsize5に変更するとこんな感じです。size2くらいがちょうど良いでしょうか…
全てのメニューをsize2にしてみたのですが「ゲーム」と「お問い合わせ」が若干大きいようなので見直してみます。
size=”2″のところがsize-“2″にとなっていて。「=」を「-」と入力ミスしています。
size=”2″のところが、size”2″となっていて「=」が抜けています。
間違えていた箇所を修正するとメニュー項目が綺麗に揃いました！
HTMLは完璧主義者なので入力ミスなどは許されません。表示がおかしい場合は自分が入力したHTMLを見直して間違いがないか正しいHTMLと見比べて修正します。
まとめ
今回の記録は最終的に「HTMLを使ってWordPressのメニュー画面のフォントサイズを変えてみる」でした。HTMLはWordPressや私が使っているテーマCocoonでの使用に限った話ではなくWeb全般で使われる言語です。HTMLが使えるようになるとブログの幅が広がりそうなので少しづつ覚えていってみようと思います。
