他人の日記

楽をするために必死になる

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

«
»