「Gush2」初心者によるカスタマイズ⑤:引用とナビとフッターのカラー変更
前回までで大枠できあがった感のあるGush2カスタマイズ。一応今回でぱっと見部分の変更は一段落の予定。
しかし自分でいじってみると色々分かってくるもんですね。「ああ、ここでこう宣言してるから、ここをいじれば~」ということが徐々に理解できてきました。もちろんゼロから組むことはできませんがね。
引用のスタイルを変更
引用タグ(<blockquote></blockquote>)で囲った場合、デフォルトだとこのように表示されます。スッキリシンプルで私好み。
でも私は引用部分のスタイルは完全趣味ブログで使わせてもらっている Stinger3 for LADY のやつがモア好みでして。こんなやつ。
なので引用部分だけは丸っと Stinger3 for LADY のスタイルに変更させていただきました。2大無料ワードプレステーマのフュージョン。にしては地味ですが。
あとは引用符がちょっと大きいと感じたので、70% に縮小。それに伴い引用ボックスの上部幅が広くなるので、padding-top の部分を 70px → 40px に修正しました。結果このような感じに。
これすらテストです
ええ塩梅になりました。コードはこのようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
blockquote { background-color: #f3f3f3; background-image: url(images/quote.png); background-repeat: no-repeat; background-position: left top; padding-top: 50px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; border-left-width: 1px; border-left-style: solid; border-left-color: #CCC; } |
“quote.png” が引用符画像となります。gush2 デフォルトだと “bq24.png” というファイル名になっているので、このままコピペすると引用符が表示されないので注意。
しっかし Gush にしても Stinger にしても、こーいう細かい部分のセンスがすごい。
ナビゲーションとフッターの色目を変更
次いでナビゲーションとフッターに手を入れます。デフォルトだとグレイッシュですが、パキッとモノトーンにしていきたいと思います。
ナビゲーション:グレー→ブラックに変更
1 2 3 4 5 |
.togmenu { display: none; color: #fff; background: #444; } |
ここがナビゲーションメニュー部分。
背景色はチャコールグレー(#444)になっていますが、こちらを限りなくブラック(#222)へ変更して更新して完了。
フッター:グレーテクスチャ→ブラックに変更
フッター部分のスタイル。
1 2 3 4 5 6 7 |
#footer { width: 100%; margin: 0 auto; clear: both; background: #444 url(images/grey_wash_wall.png) left top repeat; /* thnx! http://subtlepatterns.com/ */ } |
ここから下記記述を削除することで、テクスチャの読み込みがなくなります。
url(images/grey_wash_wall.png) left top repeat
次いで背景色を変更。ナビゲーションと同じく、#444 → #222 へ。更新するとバッチリ変わってます。反映されていない場合はブラウザのキャッシュが残っている可能性があるので、右クリックから更新で OK 。
今回のビフォーアフター
残念!キャプり忘れにつき省略。
というかカスタマイズも5回目が終わり、ほぼ現状のブログと同じスタイルになってきたのでキャプチャも必要なくなってきましたね。
以降はもはやわざわざアップする内容じゃないかもですが、一応自分の備忘録も兼ねているので淡々とアップしていきます。
テーマの無料ダウンロードはこちらから。
wp-gush.com
では再見。
この記事へのコメントはこちら