WordPressの無料人気テーマ「Gush」に変えてから実施したカスタマイズ
WordPressで構築したブログのテーマをModern Styleから最近人気のGushに変えました。
【テーマ変更後イメージ】※テーマ変更してからメニューとサイドバーを付けました
ちょっとカッコ悪いですね・・・。
Gushはカスタマイズを前提とした作りになっていて、そのまま使うことは想定していないようです。
※そのままでも使えるようなテーマを「Gush2.0」として開発中で、2014年9月公開予定とのことです。
WordPress無料テーマGush2－ブログがきっと楽しくなる！
【追記】Gush2が公開されまして、Gush2に移行してみました。
しかし、私の好みではGush1をカスタマイズして使ったほうが良かったかも・・と思っています。単に好みの問題だろうと思いますので、どちらも試してみてください。
それでは、見栄えが良くなるようにカスタマイズしていきます。
タイトル
まずは上部、タイトルを変更していきます。
タイトルロゴ
ブログ名がテキストで出力されているだけで見た目がよくありませんので、ロゴ画像を作成して設定していきます。
ロゴ作成
ロゴ画像は幅300px程度で作成するとスマートフォンでも綺麗に表示できます。
かっこいいロゴ作成方法については以前投稿したこちらの記事をご覧ください。
絵心が無くても大丈夫！かっこいいタイトルロゴが作れるWebアプリ8選 - もふぬこ戦記
ロゴの設置
ロゴ画像ができたら適当なファイル名で以下のフォルダに保存します。
/wp-content/themes/gush/images
※今回はTitleLogo.pngというファイル名で進めていきます。
次に、header.phpを修正します。
/wp-content/themes/gush/header.php
エディタで編集してアップロードしてもよいですし、管理画面で編集してもＯＫです。
※外観＞テーマ編集
タイトル表示(h1タグ)は53行目にあります。
<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 get_template_directory_uri(); ?>/images/TitleLogo.png" /></a></h1>
これでタイトルの修正は完了です。
（タイトル下に表示されるキャッチフレーズを変更したい場合にはこの行の下、h2タグを変更してください。）
<h2 class="caption"><?php bloginfo('description'); ?></h2>
タイトルヘッダの色を変更
タイトルの背景色を黒（濃い灰色）に変更します。
CSS変更
CSSファイルを変更します。
/wp-content/themes/gush/style.css
300行目付近にある#headerにbackground-color:#444;を追記
#header {
text-align: center;
padding-top: 24px;
background-color: #444;
}
※#444の箇所に好きな色コードを指定してください。
僕はメニューの色も変更したのですが、これは今回の記事では割愛します。
（意外と修正箇所が多く、CSSの知識が多少必要になってきます。
知識がまったくない方はそのまま使われた方が良いでしょう...）
タイトル修正は以上です。
フッター
フッターに何も設定していないとgushの画像が表示されるようになっています。
この画像は削除します。
フッター画像削除
/wp-content/themes/gush/footer.php
14～16行目の以下の文を
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar( 'footer_left' ) ) : else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/gush336280.jpg" alt="" width="336" height="280" />
<?php endif; ?>
このようにバッサリ変えます。
余白の削除
画像を削除すると余分な余白が目立つため、余白を削除します。
CSSファイル（/wp-content/themes/gush/style.css）の1342～1345行目
#footer-in {
width: 1040px;
margin: 0 auto 24px auto;
}
太字の箇所を0に変更
#footer-in {
width: 1040px;
margin: 0 auto 0 auto;
}
こんなところでしょうか。
フッターに何か表示されている人は、画像や余白の削除は不要です。
favicon.ico変更
Gushのアイコンが表示されているため、独自のアイコンに変更します。
アイコンを準備します。
16px × 16pxの画像(gifかpng)を作成してください。
今回はブログのマスコットキャラを使いました。
→ 
※背景が白だと猫が目立たないのでは？と考えて黒い背景にしてみました。
用意した画像をアイコン変換ツールで変換します。
アイコン（icon）変換ツール - Favicon Converter
変換したファイルのファイル名をfavicon.icoに変更して
/wp-content/themes/gush/images
できました。・・・微妙ですね・・・。
（上書きしても変わらない場合にはブラウザのキャッシュをクリアしてみてください）
今回の変更は以上になります。お疲れ様でした。
※他にも色々と変更したい箇所はありますが、それはまた別の機会に・・・（機会があれば・・・ですが）
--2014年8月25日追記↓--
アイキャッチ画像が無い場合に表示される画像を入れ替える
アイキャッチ画像が無い場合、以下のような画像が表示されます。
画像置き換え
画像ファイルは以下のパスにあります。
/wp-content/themes/gush/images/no-img.png
この画像を作成した画像と入れ替えるだけです。
