luxeritasで、ブログ記事の見出しの色をカスタマイズする
はじめに
こんにちは、爆走ひつじです。
このブログサイトは、WordPressを利用させていただいています。
WordPressは、見た目やメニューなど定義するテンプレート(テーマ)を差し替えることができます。
今のところ、このサイトでは、luxeritasというテーマを利用させていただいています。
今回、文字の色の差し替え方法を試行錯誤してみましたので、共有します。
2019年7月19日追記
改善記事もアップしましたので参考にどうぞ
luxeritasでブログ記事の見出しの色をカスタマイズする(その2)
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で、ブログ記事を表示させます。
見出し2で書かれている部分を選択し、右クリックします。
右クリックメニューの"検証"を選択すると、右サイドにcromeのデベロッパーツールが起動し、該当部分のソースが表示されます。
これで、ブログ記事の見出し2のclass名が、"typesquare_tags"であることが分かります。
ちなみに、例として表示しているのは、当サイトの、7/7の記事、「安心してベビ連れで入れるお店」です。
息抜きにどうぞ。
スタイルシート(css)で文字の色を設定
ここまでこれば、あとは、一般的なcssの知識の範囲です。
今回は、見出し2の文字の色を変更したかったので、以下の記述を追加しました。
/* ブログ投稿の見出し2の設定 */
.typesquare_tags {
color: navy
}
最後に
WordPressとそのテーマという、分厚いフレームワークやテンプレートを挟むと、カスタマイズするには、どこから手を付けて良いか見当がつかなかったのですが、今回の試行錯誤でだいぶ見えてきた気がします。
今回のやり方は、応用範囲が広いと思うので、参考にカスタマイズをしてみてください。
またよろしくです!
ディスカッション
コメント一覧
まだ、コメントがありません