【備忘録】WordPressテーマ Gush のカスタマイズ

※現在はもうこのブログでGushは使用していません。

このサイトで利用させてもらっているWordPressテーマGushですが、作者さんもおっしゃっているように、素のまま使うのはよくないと思い、ある程度オリジナリティを出していかなければと思っています。徐々にですが、CSSやPHPなど勉強しながらカスタマイズしていきたいと思います。

カスタマイズした部分は忘れないように備忘録として残しいくこととして、その都度更新していきます。

ファビンコンの変更

Gushのテーマ内にあるfavicon.icoをそのまま上書きしました。

ss2014-07-27_10.14.09

ファビコンはWindows版Excel2013の”XL”列をキャプチャして、32pxでトリミング xl_favicon_32px したものと、16pxにリサイズ xl_favicon_16px したものをpngとして用意し、ico作成Webサービスを利用してicoファイルを作成します。ico作成Webサービスはいろいろあると思いますので、お好きなのをどうぞ。(例えばhttp://www.xiconeditor.com/

ヘッダーのブログタイトル

ロゴ画像に変更

WordPressのダッシュボード画面で、「外観」ー「テーマ編集」の画面を開き、右側に表示されていているファイル群の列から「header.php」を選択して編集画面を開きます。

54行目のaタグの中身がphpによりブログの名前が呼び出されているので、この部分をimgタグで用意したロゴ画像を表示するように変更しました。

ロゴはファビコン同様、Excelの列マークを利用して作成しました。

header

ロゴ画像の配置調整

タイトル画像は上記の通り幅400pxですが、iPhone表示では幅320pxに縮小され、その際に320pxいっぱいになってしまい違和感があったので、余白を追加しました。

WordPressのダッシュボード画面で、「外観」ー「テーマ編集」の画面を開き、右側から「スタイルシート styles.css」を選択して編集画面を開きます。
margin-leftとrightを10pxにします。

配色をExcelっぽく

ベースの配色がグレー基調だったので、Excelグリーン基調に変更します。ExcelグリーンはColorピッカーなどを用いて調べたところ、カラーコードは#0b5324でしたので、これを指定します。

同様にWordPressのダッシュボード画面で、「外観」ー「テーマ編集」の画面を開き、右側から「スタイルシート styles.css」を選択して編集画面を開きます。

初期値をコメントアウトして残しておき、変更したカラーコードを追加します。ホバーした時のグレーもExcel調に薄いグレー#edededに変更しています。

ナビゲーションのあたり

カテゴリー・タグのあたり

「768px カテゴリー・タグ」という部分もあるので、そちらも同様に背景色を変更します。

ページャーのあたり

フッターのあたり

TOPへ戻るボタン

h2見出しの左側の帯

768px 記事見出し、1024px 記事見出し、というところも同様に変更します。

表の書式

テーブル関連タグが設定されていなかったので、以下のように設定してみました。

箇条書きの書式

作者さんのサイトを参考に、箇条書きのチェックマークを赤丸チェックマークアイコンに変更しました。

グレーボックスの箇条書きインデント

  • グレーボックスでの箇条書きが長くなる場合、インデントを適切に修正しました。これも作者さんのサイトを参考にさせて頂いています。

関連記事