さて、前回投稿の続き。
次に、とりあえずpageを複製して小説掲載用にnovelpageというファイルを作成し、pageにある以下のサイドバー読み込み部分を削除。
<aside class=”sidebar <?php mh_sb_class(); ?>”>
<?php dynamic_sidebar(‘sidebar’); ?>
</aside>
さて、いよいよ本丸のCSSである。具体的に変更したいところは以下の２点に分けられる。
１、メインナビゲーションとか、記事やページタイトルまわりの色を変更する。
２、novelpageのコンテンツが中央配置されるように設定をいじる。
とりあえず、２はいい。novelpageのスタイルを追加で指定すればいいはずだ（前回失敗したけど）。実は１の方が問題かもしれない。すべての色を一括変更するなんて可能なんだろうか？
これってもしかして、importをつかって親テーマのcssをインポートするよりも、親テーマのcssをそっくりコピーしてエディターの置換機能を使って一括置換してしまう方がいいのか？ う～んそれでは子テーマの利点が台無しである。この場合、テーマがアップデートされたときにそれが反映されないってこともあり得そうな気がするぞ。
そんなわけで、変更したい部分をcssとにらめっこしたり、検索機能を使って割り出したりした上で、その部分を追記して色変更の指示を書き込んでみることにした。
とりあえずJetpackという便利なプラグインをインストールしたお陰で、css編集という機能がダッシュボードの外観部分にある。これを使うと、自分が書いたcssによってサイトにどんな変化が起きたのかを実際に目で確認しながら変更していくことができる。実際にやってみると非常の便利だ。cssに書かれている順番にしたがって変更をかけてみる。まずはTypographyの項目で指定されている引用部分の装飾。ここはデフォルトだと鮮やかな赤い線が引かれるので、タイトルロゴの下線やメインナビと併せて渋いオレンジに。
①Typography の引用部分を二重線にして色変更
blockquote { border-left: 3px double #b57434; }
それからHeaderの中にあるタイトル周り。タイトルロゴを濃いグレー（#969696)から変更。タイトルをときわ色(#007b43)に、サイト紹介文をそれよりも淡いグリーン(#33b551)に変更。両者の間にあった3pxの黒い実線を4pxの破線に。色も渋いオレンジ色(#b57434)に変更。
②Header logo の色と下線変更
.logo-name { color: #007b43; border-bottom: 4px dashed #b57434}
.logo-desc { color: #33b551; }
続いてメニュー（グローバルナビゲーション）部分の色を濃いグレー(#2a2a2a)かられんが色とグレーの混合色に、下線部をれんが色に変更。現在のページをれんが色とデフォルトの混合色に変更。ついでに、カーソルを合わせたときに出て来る子ページの色も変更。
③Navigation のメニュー色を変更
.main-nav { background: #b16c56; border-bottom: 5px solid #b55233}
.main-nav ul li:hover > ul { display: block; background: #b16c56 }
.main-nav .current-menu-item { background: #cd4d3c; }
カーソルを合わせたときにデフォルトの色が出て来るのも悪くないので、ここはそのままにする。
これらを受けて、ページタイトルやページナンバリングなどの配色も統一する。
ついでにページのタイトル周りもいじろう。デフォルトだと投稿ページのエントリータイトルが32pxなんだよね。サイトタイトルよりも投稿タイトルが大きいっていうのもなあ。特に長文タイトルが多いから、もう少し小さくしたいところ。固定ページのタイトル上線とタイトルの色と表示法も変更。バックグラウンドを白にしてフォントはときわ色に。今のところ使っていないんだけど、すぐそばに記述があるから小見出しも同じ色で統一する。リンクを張ったところもデフォルトの赤い色から青に変更。
④Posts/pages タイトル周りとタグを変更
.entry-title { font-size: 24px; font-size: 1.5rem; }
.page-title-top, .subheading-top { border-bottom: 3px groove #b57434; }
.page-title, .subheading { color: #007b43; background: #fff; }
.entry a { color: #0000cc; }
.post-tags li { background: #b16c56; }
うわわわわ。すごくすっきりしてイメージがずいぶん変わってきたわ。
⑤Pagenation ページナンバー
.page-numbers { color: #b55233; }
.page-numbers:current { background: #cd4d3c; color: #fff; }
.page-numbers:hover { background: #e64946; color: #fff; }
と入れてみたけれど、currentの時の文字色までがれんが色になるのはどうすればいいんだろう？ 元データは以下のとおり。
.page-numbers { padding: 5px 10px; padding: 0.3125rem 0.625rem; background: #eee; display: inline-block; }
.page-numbers:hover, .current, a:hover .pagelink { background: #e64946; color: #fff; text-decoration: none; }
とりあえずbackgroundを#e64946から#cd4d3c;へ変更してお茶を濁す。本当は文字をれんが色にして、hoverは#e64946にしたいところなんだけど。
あとはフッター部分。
⑥Footer の色を変更
footer { background: #b16c56; }
.copyright-wrap { background: #b16c56; border-top: 3px solid #b55233; }
.copyright { color: #fff; }
.copyright a { color: #fff; }
続いてウィジェット部分。
⑦Widgets の変更
.widget-title, footer-widget-title {border-bottom:3px dashed #b16c56; }
色の変更は微調整はともかく大まかには終わったね。あとは小説掲載ページの本文表示位置を設定する。頑張らなくちゃ！
了子