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

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

Dashiconsが使える設定

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

add_action( 'wp_enqueue_scripts', 'load_dashicons' );

function load_dashicons() {
	wp_enqueue_style( 'dashicons' );
}

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

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

developer.wordpress.org

 

164 Shares

505 Pockets

Dashicons | WordPress Developer Resources

https://developer.wordpress.org/resource/dashicons

要素名を調べる

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

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

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

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

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

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

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

body,
h2.widget-title,
.site-branding .site-description,
.site-branding .site-title a[rel="home"] {
        font-family: "游明朝" , YuMincho , "メイリオ";
}

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

フォントサイズを大きく

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

.main-navigation,
h2.widget-title {
        font-size:large;
}

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

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

.main-navigation a[href*="/wordpress"]:before {
        font-family: "dashicons";
        content: "f324";
        margin-right: 5px ;
}

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

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

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

aside[id="categories-3"] h2.widget-title:before  {
        font-family: "dashicons";
        content: "f323";
        margin-right: 5px ;
}

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

最後にひとこと

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