もふぬこ動画☆画像

かわいい!おもしろい!猫動画と猫画像を毎日更新!(たまに違う記事も書いています)

WordPressの無料人気テーマ「Gush」に変えてから実施したカスタマイズ

f:id:emija:20140823185426j:plain

WordPressで構築したブログのテーマをModern Styleから最近人気のGushに変えました。

 

【テーマ変更後イメージ】※テーマ変更してからメニューとサイドバーを付けました

f:id:emija:20140821181912p:plain

ソフトウェアエンジニアのまったりFX研究日記

 

ちょっとカッコ悪いですね・・・。 

Gushはカスタマイズを前提とした作りになっていて、そのまま使うことは想定していないようです。

※そのままでも使えるようなテーマを「Gush2.0」として開発中で、2014年9月公開予定とのことです。

ブログがきっと楽しくなる!Gush2.0 の制作を開始しました

 

それでは、見栄えが良くなるようにカスタマイズしていきます。

 タイトル

まずは上部、タイトルを変更していきます。

 

タイトルロゴ

ブログ名がテキストで出力されているだけで見た目がよくありませんので、ロゴ画像を作成して設定していきます。

ロゴ作成

ロゴ画像は幅300px程度で作成するとスマートフォンでも綺麗に表示できます。

かっこいいロゴ作成方法については以前投稿したこちらの記事をご覧ください。

絵心が無くても大丈夫!かっこいいタイトルロゴが作れるWebアプリ8選 - もふぬこ戦記

ロゴの設置 

ロゴ画像ができたら適当なファイル名で以下のフォルダに保存します。

/wp-content/themes/gush/images

※今回はTitleLogo.pngというファイル名で進めていきます。

 

次に、header.phpを修正します。

/wp-content/themes/gush/header.php

エディタで編集してアップロードしてもよいですし、管理画面で編集してもOKです。

 

※外観>テーマ編集

f:id:emija:20140823165433p:plain

f:id:emija:20140823165601p:plain

 

タイトル表示(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の知識が多少必要になってきます。

 知識がまったくない方はそのまま使われた方が良いでしょう...)

 

タイトル修正は以上です。

 

f:id:emija:20140823173227p:plain

 

フッター

フッターに何も設定していないとgushの画像が表示されるようになっています。

この画像は削除します。

f:id:emija:20140823173651p:plain

フッター画像削除

/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; ?>

 

このようにバッサリ変えます。

<?php dynamic_sidebar( 'footer_left' ); ?>

 

 余白の削除

 画像を削除すると余分な余白が目立つため、余白を削除します。

 

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;
}

 

f:id:emija:20140823180814p:plain

こんなところでしょうか。

フッターに何か表示されている人は、画像や余白の削除は不要です。

 

favicon.ico変更

Gushのアイコンが表示されているため、独自のアイコンに変更します。

 

f:id:emija:20140823181248p:plain

 

アイコンを準備します。

16px × 16pxの画像(gifpng)を作成してください。

今回はブログのマスコットキャラを使いました。

f:id:emija:20140823183112p:plain  → f:id:emija:20140823184216p:plain

※背景が白だと猫が目立たないのでは?と考えて黒い背景にしてみました。

 

用意した画像をアイコン変換ツールで変換します。

アイコン(icon)変換ツール - Favicon Converter

 

変換したファイルのファイル名をfavicon.icoに変更して

/wp-content/themes/gush/images

の下にあるfavicon.icoに上書きすれば完了です。

 

f:id:emija:20140823184348p:plain

できました。・・・微妙ですね・・・。

(上書きしても変わらない場合にはブラウザのキャッシュをクリアしてみてください)

 

 

f:id:emija:20140823185305j:plain

今回の変更は以上になります。お疲れ様でした。

※他にも色々と変更したい箇所はありますが、それはまた別の機会に・・・(機会があれば・・・ですが)

 

--2014年8月25日追記↓--

アイキャッチ画像が無い場合に表示される画像を入れ替える

アイキャッチ画像が無い場合、以下のような画像が表示されます。

f:id:emija:20140825123159p:plain

 

画像置き換え

画像ファイルは以下のパスにあります。

/wp-content/themes/gush/images/no-img.png

この画像を作成した画像と入れ替えるだけです。

f:id:emija:20140825124433p:plain