ブログテーマをCocoonに変更してから細かい設定を少しずついじっている中で、最も苦労したのがサイト名のフォントのカスタマイズでした。Googleで検索するとそれらしき記事が見つかるのですが、そこに書いてあるCSSコードを適用してもまったく反映されず、答えにたどり着くまでに多くの時間を費やしました。
というわけで、この記事ではヘッダーレイアウトがトップメニュー小（またはトップメニュー小（右寄せ））のときにおけるサイト名のフォントをカスタマイズする方法についてまとめます。
以下のCSSコードを追加CSSにコピペ
いきなり答えを書くと、以下のCSSコードを「追加CSS」の欄にコピペするだけでOKです。「追加CSS」は「外観→カスタマイズ」からたどり着くことができます。
「追加CSS」にCSSコードを追加すると、公開ボタンをクリックせずとも右側ウインドウにライブプレビューされるので簡単に変更内容を確認できます。このとき何も変化が無ければ、残念ながらCSSコードが間違っているということになるので、各自イチから調べてください。
/*ヘッダーレイアウト トップメニュー（小）でのカスタマイズ*/
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text{
font-size: 30px;
color: #ffffff;
font-weight: bold;
}
エゴクリでは、フォントサイズ30px、白色（#ffffff）、太字（bold）としました。色はまだ少し迷っていて、とりあえず今はブログ全体の配色を鑑みて白が無難な気がしていますが、今後変えるかもしれません。画像を使ったロゴは「できるだけシンプルに」というコンセプトから外れるように思うので考えていません。
ひととおり調整できた
Cocoonに以降してから行った主な微調整は以下2つ。両方ともCSSコードを追加して対応しました。サイドバーに貼り付けた広告バナーは何もしないと左寄せになります。また、画像や動画のキャプションは文字が小さくて読みづらかったので大きくしました。
- 右側サイドバーの広告バナーのセンタリング
- 本文中に貼り付けた画像のキャプションのフォントサイズ変更
カスタマイズは楽しい
WordPressもCocoonもスキンも完成度が高いので、自分で作り上げるという要素はほとんどありませんが、それでも少し手を加えて自分仕様に仕立てていくことは楽しい作業です。ただ、あまり執着しすぎるときりがないので、カスタマイズはこれくらいとし、また記事の執筆に力を入れていきたいと思います。
