Gush2の設定をいじって、ヘッダ・フッタの見た目を変更してみた
十人十色
ご無沙汰しています、@Tanin_326です。
Gush2の設定を少し変更して、ブログの見た目を自分好みに変更した際のメモになります。
今回は、ヘッダ・フッタの見た目を変更していきます。
目次
ヘッダの変更
ヘッダの背景を、画像から色に変更
背景色を変更します。
#header { text-align: center; /* background: #666;*/ background: #005293; padding: 0 0 12px; /* border-bottom: 1px solid #fff;*/ }
PC用に設定されている画像を、無効にします。
#header { /* background: #444 url(images/grey_wash_wall.png) left top repeat;*/ background: #005293; /* thnx! http://subtlepatterns.com/ */ }
タイトルを、文字から画像に変更
<!--//<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>--> <h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo home_url();?>/wp-content/themes/gush2/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a></h1>
サブタイトルの外枠を削除
#header .caption { color: #fff; font-size: 16px; padding: 0.8em 0.5em; /* border: 1px solid #444;*/ /* box-shadow:inset -1px -1px 0 rgba(255,255,255,0.4);*/ margin: 0 12px; }
フッタの変更
背景を画像から色に変更する
#footer { padding: 12px 0 24px 0; color: #fff; text-align: center; /* background-color : #444;*/ background-color : #005293; overflow: hidden; }
PC用に設定されている画像を、無効にします。
#footer { width: 100%; margin: 0 auto; clear: both; /* background: #444 url(images/grey_wash_wall.png) left top repeat;*/ background: #005293; /* thnx! http://subtlepatterns.com/ */ }
「TOPへ戻る」の色を変更
スマートフォン用の「TOPへ戻る」の色を変更します。
#footer .top-home a { /* color: #ffd700;*/ color: #BBCCE9; font-size: 100%; }
PC・タブレット用の「TOPへ戻る」の色を変更します。
#page-top a { text-decoration: none; /* color: #fff;*/ color: #BBCCE9; padding: 5px 10px; display: block; font-size: 18px; /* background: #444 url(images/grey_wash_wall.png) left top repeat;*/ background: #005293; /* thnx! http://subtlepatterns.com/ */ border-radius: 5px; /* border: 2px solid #fff;*/ border: 2px solid #BBCCE9; } #page-top a:hover { text-decoration: none; /* background: #aaa;*/ background: #187FC4; /* color: #fff;*/ color: #BBCCE9; }
Gushへのリンク色を変更
.gush_link a { text-shadow: -1px 1px 0 rgba(255, 255, 255, .4); /* color: #333;*/ color: #001A43; font-weight: bold; }
まとめ
ちょっとしたことですが、見た目が変わると「自分のブログ」感が増していきますね。
以上、@Tanin_326でした。