「Gush2」初心者によるカスタマイズ⑥：h2 見出し色やボックス色変更、その他こまごま
①～⑤まででだいたいできあがった感のある当ブログ。ヘッダーをドラスティックに変えてみようかな～とも思いつつ、しばらくはこんな感じで運営していきます。
今回はぱっと見の印象以外の細かな部分で私がカスタマイズしたポイントとなります。
更新日を削除（現 ver は不要）
デフォルトだと投稿日と更新日が自動的に表示されました。ただしアップして数日後に見直して誤字発見 → 修 正→ 更新日が表示されるというのも何だかなぁと思いまして、更新日は潔く表示させないことにしました。
ちなみに ver. 1.1.0以降をダウンロードすると、更新日表示は投稿時に選択可能になっています。これから Gush2 をダウンロードして使うぜ、という方はここから下は特に読む必要なしです（私がいじったのは新 ver リリースの数日前だったもんで）。
参考▶更新日を変更するかしないか選択できる機能を追加しました
修正する箇所はこちら。”single.php”の中ににあります。
|
1 |
<p><i class="fa fa-calendar"></i><time class="entry-date" datetime="<?php the_time('c') ;?>"><?php the_time('Y/m/d') ;?></time> <?php if ($mtime = get_mtime('Y/m/d')) echo ' 更新：' , $mtime; ?></p> |
ここから下記記述を削除して更新します。
<?php if ($mtime = get_mtime(‘Y/m/d’)) echo ‘ 更新：’ , $mtime; ?>
これで更新日は一切表示されなくなりました。
※繰り返しますが、ver. 1.1.0以降であればこの作業は必要ありません。
PC 以外で見たらナビが見えん！→修正
ふと iPhone や iPad で当ブログのメニューを開いたら、なんと真っ白で見えないことが判明。あらら。
“style.css” の全体定義の部分の下記記述を探します。
|
1 2 3 4 5 |
nav#menu ul li a { display: block; color : #fff; padding : 8px 0; } |
カラーがホワイト（fff）になっていたので、これを他の文字と同色（222）へと変更しました。
iPhone で確認してみたところバッチリ文字が見えています。ところが iPad で確認すると白いまま。なので「768px ナビ」部分の記述も変更してみます。
|
1 2 3 4 5 |
nav#menu ul li a { display: block; color : #fff; padding : 8px 1em; } |
こちらもホワイト（fff）から（222）へと書き換えて保存。
これにて終了。こんな見え方となっています。
長いな・・・トップナビへのカテゴリの入れ込みは、3～5個くらいにした方がいいかもしれません。
gray_box のカラー変更
引用ではないけれど、記事内でちょっとしたアクセントをつけたり強調したいときに使える、背景色がグレーのボックス。
当ブログは白黒グレーで統一されているのですが、たまには色目を入れてもいいかなと。使用頻度は多くないですが、グレーのボックスのカラーを変更しました。
“style.css” の下記部分
|
1 2 3 4 5 6 7 |
.gray_box { width: 85%; margin: 2em auto; padding: 5%; background-color: #efefef; overflow: hidden; } |
今回は背景色を薄いイエローにします。グレー（efefef） から薄いイエロー（ffffe0）へと書き換えて更新。
※2015/1/21追記
試行錯誤の結果元のグレーに戻しました。
大見出し h2 に色目を加える
ここまで手を加えてみて思ったのですが、やはり白黒グレーだけだとなかなか寂しい。雰囲気は今のままで、微妙～に、そこはかとなく、背景に馴染むくらいの感覚で差し色を加えられないかなと考えました。
そこで大見出しとなる h2 タグをいじってみることに。
PC 表示を変更
まずは h2 ボックス左部分の濃いグレー部分を変えたいと思います。「1024px 記事見出し」のこちらの記述を検索。
|
1 2 3 4 5 6 7 |
#article_body h2{ font-size: 24px; text-align: left; border-left: 5px solid #444; margin: 48px -31px 36px -62px; padding: 10px 0 10px 20px; } |
border-left 部分をデフォルトの濃い目のグレー（444）からフーシャピンク（e75480）へと変えました。
しかしそれだけ変えてもちょっと間が抜けています。次いで h2 ボックス下部の薄いグレーの色目も変えちゃいます。
全体定義の部分から・・・
|
1 2 3 4 5 6 7 8 9 |
#article_body h2 { font-size: 20px; text-align: left; margin: 36px 0 24px 0; padding: 0.4em; background: #efefef; border-bottom: 2px solid #ddd; text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); } |
オリジナルに倣ってグラデーションを意識します。border-bottom 部分を薄いグレー（ddd）から薄いピンク（ffb6c1） へと修正して更新。
出来栄えは・・・見えてますよね。ええ塩梅にさりげなく色が入りました。わりと満足でございます。
タブレットでの表示も変更
「768px 記事見出し」以下の部分となります。
|
1 2 3 4 5 6 7 |
#article_body h2{ font-size: 20px; text-align: left; border-left: 5px solid #444; margin: 36px 0 24px -35px; padding: 8px 0 8px 10px; } |
こちらも同様に border-left 部分を濃いグレー（444）からフーシャピンク（e75480）へと変更。
ボトム部分は全体定義ですでに薄いグレーに変えているので、これにて終了。PC と同じように見えます。
スマホ表示も変更
スマホの場合は左部分（border-left）が表示されず、下部（border-bottom）しか表示されません。そのため全体定義で変更していればそのまま表示されます。
ええ感じですね。
失敗してもいいから自分で触ってみよう
以上計6回に分けて初心者によるカスタマイズをお送りしました。もはやこれ以上大きくいじる部分は無いと感じております。試行錯誤しながらアレコレいじってみてとても楽しかったです。
この宣言でこの記述を呼び出してるから・・・だからこれを変えれば・・・わ！真っ白！
・・・幸いそんな事態にはならずに済みましたがw、自分で見て手を動かさないと分からないことだらけでしたね。
最後にこれからカスタマイズしてみようかなーという方へ。この程度のカスタマイズで言うのはおこがましいですが、 「完成型」はできるだけ具体的にイメージしてから作業しましょう。Web 屋さんとの打ち合わせみたいに、プリントアウトした紙にペン入れしていくのもオススメ。
カスタマイズも楽しいワードプレステーマ、Gush2 のダウンロードはこちらからどうぞ。
wp-gush.com
では再見。
この記事へのコメントはこちら