Luxeritas

はじめに

こんにちは、爆走ひつじです。
以前、luxeritasでブログ記事の見出しの色をカスタマイズする方法を記事にしましたが、その後もう少し良い方法が見つかりましたので、まとめます。
luxeritasでブログ記事の見出しの色をカスタマイズする

見出し文字列のひっかけ方

前回は、".typesquare_tags"でひっかけましたが、".post h2"で、ひっかけるのがよさそうです。
これであれば、".post h3"というように、さらに下位の節の見出しもひっかけやすくなります。

 

具体例

具体的に、以下のように設定しました。

/* 見出しレベル２の設定 */
.post h2 {
    color: white;　                                  /* 見出し文字の色を白色 */
    font-weight: bold;                               /* 見出し文字の色を白色 */
    border-left: none;                               /* 見出しの左端のボーダー表示をなし */
    background: linear-gradient(#0a2e63 , #3f65a9);　/* 見出しの背景をグラデーションに */
    border-radius: 5px;                            　/* 見出しの背景の角を丸く */
}
.post h2::first-letter{
    font-size: 48px;                                 /* 見出しの1文字目を大きく */
}

/* 見出しレベル3の設定 */
.post h3 {
    border-left: solid 10px navy;                   /* 見出しの左端のボーダーの太さと色を設定 */
}

最後に

見た目を凝りだすときりがないのですが、cssの勉強になります。
これからも少しずつ、カスタマイズしていきたいと思います。
またよろしくです！

はじめに

こんにちは、爆走ひつじです。
このブログサイトは、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のデベロッパーツールが起動し、該当部分のソースが表示されます。

これで、ブログ記事の見出し２のclass名が、"typesquare_tags"であることが分かります。

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

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

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

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

最後に

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

またよろしくです！