luxeritasで、ブログ記事の見出しの色をカスタマイズする

はじめに

こんにちは、爆走ひつじです。
このブログサイトは、WordPressを利用させていただいています。
WordPressは、見た目やメニューなど定義するテンプレート（テーマ）を差し替えることができます。
今のところ、このサイトでは、luxeritasというテーマを利用させていただいています。
今回、文字の色の差し替え方法を試行錯誤してみましたので、共有します。

２０１９年７月１９日追記
改善記事もアップしましたので参考にどうぞ
luxeritasでブログ記事の見出しの色をカスタマイズする(その２)

luxeritasとは

有名なテーマですが、一応紹介しておきます。
[https://thk.kanzae.net/wp/:embed:cite]

luxeritasは、無料のWordPressのテーマで、高速な表示や、高カスタマイズ性で人気があるテーマです。
無料ですが、ページの一番下に、「WordPress Luxeritas Theme is provided by Thought is free".」という、文章が入ります。
これを消すには、 "提供元表示消去プラグイン"を購入する必要があります。

爆走ひつじは、WordPressは、今回初めてで、メニューやサイト構成をどう作ればわからず途方にくれ、一度、有料テーマにしようかと考えたのですが、試しに入れてみたluxeritasのおかげで何とか切り抜けることができました。
デザインも気に入っており、おすすめです。

スタイルシート(css)

高いカスタマイズ性を誇る、luxeritasですが、特定の見出しの文字の色などを統一的に設定するには、スタイルシート(css)の知識が必要です。
cssは、ページのデザイン(フォントや色)のみを定義するファイルで、ドキュメントの内容とこのスタイルシートが分離されていることにより、デザインだけを変更することが可能になります。

luxeritasは、子テーマの編集というメニューがあり、ここでcssファイルを編集することができます。

 

目的のclass名を探し出せ

一番の難問がこれです。
class名がわからなければ、手の付けようがないです。luxeritasのソースを見るのもアリですが、大変ですし、テーマを変えたら振出しに戻ってしまうので、できれば避けたいですね。
今回は、chromeのデベロッパーツールの助けを借りました。

chromeで、ブログ記事を表示させます。
見出し２で書かれている部分を選択し、右クリックします。
右クリックメニューの"検証"を選択すると、右サイドにcromeのデベロッパーツールが起動し、該当部分のソースが表示されます。
file
これで、ブログ記事の見出し２のclass名が、"typesquare_tags"であることが分かります。

ちなみに、例として表示しているのは、当サイトの、7/7の記事、「安心してベビ連れで入れるお店」です。
息抜きにどうぞ。

スタイルシート(css)で文字の色を設定

ここまでこれば、あとは、一般的なcssの知識の範囲です。
今回は、見出し２の文字の色を変更したかったので、以下の記述を追加しました。

/* ブログ投稿の見出し２の設定 */
.typesquare_tags {
    color: navy
}

最後に

WordPressとそのテーマという、分厚いフレームワークやテンプレートを挟むと、カスタマイズするには、どこから手を付けて良いか見当がつかなかったのですが、今回の試行錯誤でだいぶ見えてきた気がします。
今回のやり方は、応用範囲が広いと思うので、参考にカスタマイズをしてみてください。

またよろしくです！

Luxeritas