無料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> > </div>
<?php endforeach; ?>
<?php the_title(); ?>
</div>
</div><!--//pankuzu-->
コメント欄の削除
後日「Facebookコメント」に変更する予定なので、標準のコメント欄をいったん削除します。
<!--コメント--> <?php comments_template(); ?> <!--//コメント-->
まとめ
色の変更プラスαだけでしたが、いかがでしょうか。
個人的には、結構印象が変わった気がするので、満足しています。
今回手を入れていない部分についても、少しずつ修正していこうと思います。
ブログの記事も稼げるし・・・
以上、@Tanin_326でした。