他人の日記

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

無料WordPressテーマ「Gush」のカスタマイズを少しだけやってみた

下手糞の 上級者への 道のりは 己が下手さを 知りて一歩目

ご無沙汰しています、@Tanin_326です。

先日は、WordPress用テーマ「Gush」を導入しました。
しかし、このままではシンプルすぎて味気ないです。
(カスタマイズ前提なので、当然なのですが)

という訳で、少しだけですが、変更してみようと思います。

ブログのカラーを、自分色に染めてみる

背景色の変更

管理画面の左サイドバーから「外観 > 背景」を選択します。

自分は、「#d3def1」にしました。

タイトルの文字色(リンク色)の追加

管理画面の左サイドバーから「外観 > テーマ編集」を選択し、スタイルシート(style.css)を修正します。

#header .top_title {
	margin-bottom: 12px;
	font-size: 36px;
}

#header .top_title a {
	color: #222;
}

ナビゲーション色の変更

nav#menu {
	margin-bottom: 24px;
	background-color: #004986;
}
nav#menu ul li a:hover {
	color: #444;
	background-color: #9fd9f6;
}

投稿日欄(メタボックス)色の変更

.meta_box {
	font-size: 70%;
	margin: 0 0 24px 0;
	padding: 3% 0;
	background-color: #d3def1;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

カテゴリー・タグ色の変更

#cat_tag a {
	color: #fff;
	background-color: #004986;
	margin: 0 0.2em 0 0;
	padding: 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-decoration: none;
}
#cat_tag a:hover {
	background-color: #9fd9f6;
}

フッター色の変更

#footer {
	padding: 24px 0;
	color: #fff;
	text-align: center;
	background-color : #004986;
	overflow: hidden;
}

TOPへ戻るボタン色の変更

#page-top a {
	background: #0068b7;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 10px 5px;
	text-align: center;
	display: block;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #9fd9f6;
	color: #444;
}

単一記事の気になった点に手を入れる

パンくずリストに記事のタイトルを追加

管理画面の左サイドバーから「外観 > テーマ編集」を選択し、単一記事の投稿(single.php)を修正します。

<div class="pankuzu">
  <div id="breadcrumb">
    〜 中略 〜
    <?php foreach($allcats as $catid): ?>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> &gt; </div>
    <?php endforeach; ?>
    <?php the_title(); ?>
  </div>
</div><!--//pankuzu-->

コメント欄の削除

後日「Facebookコメント」に変更する予定なので、標準のコメント欄をいったん削除します。

<!--コメント-->
<?php comments_template(); ?>
<!--//コメント-->

まとめ

色の変更プラスαだけでしたが、いかがでしょうか。
個人的には、結構印象が変わった気がするので、満足しています。

今回手を入れていない部分についても、少しずつ修正していこうと思います。
ブログの記事も稼げるし・・・

以上、@Tanin_326でした。

«
»