【twenty fifteen】サイドバーのフォント変更、Dashiconsをつける

 WordPress標準テーマtwenty fifteenのサイドバーのスタイルを少し変更しました。私はデザインセンスが全くないのでStyle.cssでCSSをいじればいじるほどダサダサな方向に行くので、ここのブログでも見出しとかの装飾をしていないのですが、サイドバー周りを今回以下のように変更しました。控えめな変更です。

  • メニューとウィジェットのタイトルの文字を大きくする。
  • アイコンフォント(dashicons)を各項目の先頭につける
  • サイトタイトル、キャッチフレーズ、ウィジェットタイトルのフォントを変更

Dashiconsが使える設定

 Dashiconsをテーマで使えるようにするには、子テーマのfunctions.phpに以下の記述を追加する必要があります。

  子テーマとは何?という方はコチラの記事をご覧ください。

  前に記事にしたプラグインMax Mega Menuを使を使ってDashiconsを有効にしていたので今まで必要なかったのですが、twenty fifteenの縦メニューではスタイル調整があまり上手く使えなかったので、ここのブログではプラグインを外しています。

 Dashiconsの種類とコードはコチラの公式サイトから選びます。

WordPress › Dashicons | WordPress Developer Resources

要素名を調べる

 カスタマイズしたい項目のCSSの要素名をいかにピンポイントで指定するかということが今回の作業の肝となります。要素を調べるのはブラウザのChromeで調べたい項目の上で右クリック「要素を調査」で調べます。

 私は素人なので、この辺がかなり適当です。「要素を調査」でその部分のclass名を指定したりします。それだけだとほかの場所も同じclass名を使っていたりして想定外の場所まで変更されたりするので、その上層部のclass名やid名などを組み合わせてピンポイントな指定になるようにします。

 そのルールというか指定方法は独学なので、かなり適当です。指定してみて上手くいったらOK、だめなら別な方法という感じで試行錯誤した結果の、ここのtwenty fifteenでしか通用しない私の備忘録という前提でご覧ください。

子テーマのStyle.cssに追記していく

 今回のカスタマイズは、すべて子テーマのStyle.cssに追記していくだけです。

タイトルのフォントを変更する

  サイトタイトル、キャッチフレーズ、ウェジェットのタイトルのフォントを指定しました。以前記事にしたフォント指定ではbodyだけフォントを指定しましたが、それでは変わらなかったのがサイドバーのタイトル関連でした。

 

  • h2.widget-title がウィジェットタイトル  
  • .site-branding .site-description がサイトのキャッチフレーズ  
  • .site-branding .site-title a[rel=”home”] がサイトタイトルです。

 font-familyは私は明朝系を好んで指定していますが、これはお好きなフォントを指定してください。

フォントサイズを大きく

 グローバルメニューとウィジェットタイトルのフォントを一段階大きくしました。

グローバールメニューにDashicons

 要素名を指定して、CSSの疑似要素:beforeでDashiconsのサイトで調べたアイコンフォントを出します。私は覚えたばかりの:beforeをなんでも使いたがります。

  上記の記述は、ここのグローバルメニューのWordPressのメニューの場合です。a[href*=”/○○○○”]の○○○部分を各メニューのリンク先にすれば、各メニューそれぞれピンポイントで指定できます。リンクすべて入れてもいいですし、上記例のようにリンクのアドレスの一部だけ指定すれば排他的になるなら、短くても大丈夫です。

ウィジェットタイトルにDashicons

 同じようにウィジェットタイトルにもDashiconsをつけます。

  上記はカテゴリーのウィジェットの例です。aside[id=”○○○○”]の○○○○部分を各ウィジェット固有のidにすれば、ピンポイントでDashiconsを指定できます。

最後にひとこと

 ここのブログは以上の設定でサイドバーのCSSを設定しています。ここのテーマtwenty fifteenは、メニューがサイドバーに出るので縦型のグローバルナビメニューになっていますが、アイコンフォントを出すやり方は、どのテーマでも応用できると思います。

こちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です