「Gush2」初心者によるカスタマイズ⑤:引用とナビとフッターのカラー変更

 

シェアしていただけると嬉しいです。
はてブ  Pocket 

前回までで大枠できあがった感のあるGush2カスタマイズ。一応今回でぱっと見部分の変更は一段落の予定。

しかし自分でいじってみると色々分かってくるもんですね。「ああ、ここでこう宣言してるから、ここをいじれば~」ということが徐々に理解できてきました。もちろんゼロから組むことはできませんがね。

スポンサーリンク

引用のスタイルを変更

引用タグ(<blockquote></blockquote>)で囲った場合、デフォルトだとこのように表示されます。スッキリシンプルで私好み。

引用

でも私は引用部分のスタイルは完全趣味ブログで使わせてもらっている Stinger3 for LADY のやつがモア好みでして。こんなやつ。

引用2

なので引用部分だけは丸っと Stinger3 for LADY のスタイルに変更させていただきました。2大無料ワードプレステーマのフュージョン。にしては地味ですが。

あとは引用符がちょっと大きいと感じたので、70% に縮小。それに伴い引用ボックスの上部幅が広くなるので、padding-top の部分を 70px → 40px に修正しました。結果このような感じに。

これすらテストです

ええ塩梅になりました。コードはこのようになります。

“quote.png” が引用符画像となります。gush2 デフォルトだと “bq24.png” というファイル名になっているので、このままコピペすると引用符が表示されないので注意。

しっかし Gush にしても Stinger にしても、こーいう細かい部分のセンスがすごい。

ナビゲーションとフッターの色目を変更

次いでナビゲーションとフッターに手を入れます。デフォルトだとグレイッシュですが、パキッとモノトーンにしていきたいと思います。

ナビゲーション:グレー→ブラックに変更

ここがナビゲーションメニュー部分。

背景色はチャコールグレー(#444)になっていますが、こちらを限りなくブラック(#222)へ変更して更新して完了。

フッター:グレーテクスチャ→ブラックに変更

フッター部分のスタイル。

ここから下記記述を削除することで、テクスチャの読み込みがなくなります。

url(images/grey_wash_wall.png) left top repeat

次いで背景色を変更。ナビゲーションと同じく、#444 → #222 へ。更新するとバッチリ変わってます。反映されていない場合はブラウザのキャッシュが残っている可能性があるので、右クリックから更新で OK 。

スポンサーリンク

今回のビフォーアフター

残念!キャプり忘れにつき省略。

というかカスタマイズも5回目が終わり、ほぼ現状のブログと同じスタイルになってきたのでキャプチャも必要なくなってきましたね。

以降はもはやわざわざアップする内容じゃないかもですが、一応自分の備忘録も兼ねているので淡々とアップしていきます。

テーマの無料ダウンロードはこちらから。

WordPress Theme Gush2

wp-gush.com

では再見。

スポンサーリンク

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。