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でした。