「Luxeritas（ルクセリタス）」は国産の無料WordPressテーマです。
＊Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ
「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用可。
SEO 最適化済、レスポンシブ（Bootstrapベース）、機能豊富、AMP対応可。
架空のオウンドメディア（ブログ）を制作するという脳内設定シリーズ。
前回に引き続き、Luxeritasのカスタマイズ「その７」。
前回までの進行状況↓
これを最終回までに、以下の状態にまでカスタマイズします。
＊アイベルブログ | WEB業務の処方箋
（架空のサンプルサイトです）
今回からCSS編の開幕、初回はトップページをメインにカスタマイズします。
～ 目次 ～
- 子テーマ「style.css」にコードを追加
- ボックスに影（シャドウ）を付ける
- 見出しをメインカラーに
- カテゴリー名をメインカラーに
- 「記事を読む」の矢印を消す
- トップ及びアーカイブ：ページネーションをメインカラーに
- フッターのロゴ位置変更
- 「新着記事」記事名をメインカラーに
- サイドバーのタグ色変更・他
- 今回はここまで
子テーマ「style.css」にコードを追加
CSSをカスタマイズします。
具体的には子テーマの「style.css」にコードを追加していきます。
CSSの記述方法は２つあります。
◇サーバ上の「style.css」に直接記述する
◇WP管理画面から記述する
WordPressに不慣れな人は後者の方が良いかもしれません。
後者の場合は、
WP管理画面⇒「外観」⇒「テーマの編集」を開きます。
右サイドの「テーマファイル」の中から
必ず「スタイルシート（style.css）」を選択してください。
この時、間違って「functions.php」などに書いてしまうと、後で泣く羽目になるのでご注意ください。
真ん中の記述欄にCSSのコードを追加していきます。
初期状態で３６行目まではゴチャゴチャ書かれてますが、これは必ず残しておいて、３８行目あたりから記述してください。
ボックスに影（シャドウ）を付ける
では、実際に記述していきましょう。
今回はトップページ含む各ページの共通箇所をCSSにてカスタマイズします。
まず、下記のような個々のボックスに、マテリアルっぽい影（シャドウ）を付けて立体感をだします。
以下のコードをCSSに記述してください。
/* ボックスにシャドウ */ main .grid, #side .widget { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
すると、
影が付きました。
見出しをメインカラーに
各ページの見出しをメインカラー（#20a39e）に変更します。
また、トップ及びアーカイブのタイル型記事の見出しのみ、マウスホバー時の色をアクションカラー（#f9a730）に変更します。
/* 見出しをメインカラーに */ .home h2, .archive h2, #side .widget h3, .single h1 { color:#20a39e; } /* タイル型記事見出しホバー時：アクションカラーに */ .home h2 a:hover, .archive h2 a:hover { color:#f9a730; }
メインカラーに変化しました。
また、タイル型記事の見出しのみ、マウスをホバーさせると、
アクションカラーに変わりました。
カテゴリー名をメインカラーに
各ページのカテゴリー名をメインカラーに変更し、下線を消します。
/* カテゴリー名をメインカラーに */ .home .category, .page .category, .archive .category, .meta-box .category, .home .category a, .page .category a, .archive .category a, .meta-box .category a, .home .fa-folder, .page .fa-folder, .archive .fa-folder, .meta-box .fa-folder { color:#20a39e; text-decoration:none; }
メインカラーに変化し、下の線が消えました。
「記事を読む」の矢印を消す
トップページ及びアーカイブページのタイル型記事一覧表示。
「記事を読む」の部分の矢印（>>）を消します。
ここです↓
細かい話になりますが、矢印の下の下線がえぐれてしまってるので、そこが嫌です。
いっそのこと矢印自体を消します。
/* 記事を読むの矢印を消す */ .read-more-link i { display:none; }
矢印が消えました。
トップ及びアーカイブ：ページネーションをメインカラーに
トップページ及びアーカイブページのページネーションをメインカラーに変更します。
初期状態では赤になってます。
ページネーションとはこの箇所です↓
/* トップページとアーカイブページ：ページネーションをメインカラーに */ .pagination .active span { background-color:#20a39e; } .pagination li a:hover { background-color:#20a39e; color:#fff; }
メインカラーに変わりました。
フッターのロゴ位置変更
フッターのロゴ位置を変更します。
若干下げます。
/* フッターのロゴ位置変更 */ #foot-in img { margin-top:50px; }
下がりました。
「新着記事」記事名をメインカラーに
サイドバーの「新着記事」欄の各記事名をメインカラー（#20a39e）に変更します。
（マウスホバー時の色はアクションカラー#f9a730に変更）
/* 新着記事 */ .new-title a { color:#20a39e; } .new-title a:hover { color:#f9a730; }
メインカラーに変化しました。
サイドバーのタグ色変更・他
サイドバーのタグの色が目立たないので、黒地・白文字に変更します。
また、文字サイズをPC表示の場合、若干小さ目にします。
ここです↓
/* サイドバー：タグ色の変更 */ .widget_tag_cloud a { border:none; background-color:#999; color:#fff; } .widget_tag_cloud a:hover { background-color:#000; } @media (min-width: 768px) { .widget_tag_cloud a { font-size:13px !important; } }
色が変わり、PC表示時では文字が小さくなりました。
今回はここまで
さて、今回はここまでです。
ブログのトップページは以下のように変化しました。
要所・要所の色が変化して全体がパリッと引き締まり、各ブロックに影が付いてマテリアルっぽくなりました。
さて、次回もCSSによるカスタマイズ続編です。
投稿ページのカスタマイズを載せます。
