※現在はもうこのブログでGushは使用していません。
このサイトで利用させてもらっているWordPressテーマGushですが、作者さんもおっしゃっているように、素のまま使うのはよくないと思い、ある程度オリジナリティを出していかなければと思っています。徐々にですが、CSSやPHPなど勉強しながらカスタマイズしていきたいと思います。
カスタマイズした部分は忘れないように備忘録として残しいくこととして、その都度更新していきます。
目次
ファビンコンの変更
Gushのテーマ内にあるfavicon.icoをそのまま上書きしました。
ファビコンはWindows版Excel2013の”XL”列をキャプチャして、32pxでトリミング 
したものと、16pxにリサイズ 
したものをpngとして用意し、ico作成Webサービスを利用してicoファイルを作成します。ico作成Webサービスはいろいろあると思いますので、お好きなのをどうぞ。（例えばhttp://www.xiconeditor.com/）
ヘッダーのブログタイトル
ロゴ画像に変更
WordPressのダッシュボード画面で、「外観」ー「テーマ編集」の画面を開き、右側に表示されていているファイル群の列から「header.php」を選択して編集画面を開きます。
|
53 54 55 56 |
<hgroup> <h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1> <h2 class="caption"><?php bloginfo('description'); ?></h2> </hgroup> |
54行目のaタグの中身がphpによりブログの名前が呼び出されているので、この部分をimgタグで用意したロゴ画像を表示するように変更しました。
|
54 |
<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src='http://xl.hisholy.net/wp-content/uploads/header.png'/></a></h1> |
ロゴはファビコン同様、Excelの列マークを利用して作成しました。
ロゴ画像の配置調整
タイトル画像は上記の通り幅400pxですが、iPhone表示では幅320pxに縮小され、その際に320pxいっぱいになってしまい違和感があったので、余白を追加しました。
WordPressのダッシュボード画面で、「外観」ー「テーマ編集」の画面を開き、右側から「スタイルシート styles.css」を選択して編集画面を開きます。
margin-leftとrightを10pxにします。
|
1 2 3 4 5 6 |
#header .top_title { margin-bottom: 12px; margin-left: 10px; margin-right: 10px; font-size: 36px; } |
配色をExcelっぽく
ベースの配色がグレー基調だったので、Excelグリーン基調に変更します。ExcelグリーンはColorピッカーなどを用いて調べたところ、カラーコードは#0b5324でしたので、これを指定します。
同様にWordPressのダッシュボード画面で、「外観」ー「テーマ編集」の画面を開き、右側から「スタイルシート styles.css」を選択して編集画面を開きます。
初期値をコメントアウトして残しておき、変更したカラーコードを追加します。ホバーした時のグレーもExcel調に薄いグレー#edededに変更しています。
ナビゲーションのあたり
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
nav#menu { margin-bottom: 24px; // background-color: #444; background-color: #0b5324; } .togmenu { display:none; } .menubtn { padding: 8px; // background: #444; background: #0b5324; color: #fff; text-align: left; } nav#menu ul { overflow: hidden; margin-bottom: 24px; } nav#menu ul li { width: 100%; text-align: center; border-bottom: 1px solid #fcfcfc; } nav#menu ul li a { display: block; color : #fff; padding : 8px 0; } nav#menu ul li a:hover { color: #444; // background-color: #ccc; background-color: #ededed; } |
カテゴリー・タグのあたり
|
1 2 3 4 5 6 7 8 9 10 11 |
#cat_tag a { color: #fff; // background-color: #444; background-color: #0b5324; margin: 0 0.2em 0 0; padding: 3px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-decoration: none; } |
「768px カテゴリー・タグ」という部分もあるので、そちらも同様に背景色を変更します。
ページャーのあたり
|
1 2 3 4 5 6 |
.pager .current{ // background: #444; background: #0b5324; border: 0; color: #fff; } |
フッターのあたり
|
1 2 3 4 5 6 7 8 |
#footer { padding: 24px 0; color: #fff; text-align: center; // background-color : #444; background-color : #0b5324; overflow: hidden; } |
TOPへ戻るボタン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#page-top a { // background: #22ac38; background: #0b5324; 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; } |
h2見出しの左側の帯
|
1 2 3 4 5 6 7 8 |
#entry_body h2{ font-size: 20px; text-align: left; // border-left: 2px solid #444; border-left: 2px solid #0b5324; margin: 0 0 24px -10px; padding: 3px 0 3px 10px; } |
768px 記事見出し、1024px 記事見出し、というところも同様に変更します。
表の書式
テーブル関連タグが設定されていなかったので、以下のように設定してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
table { border-collapse: collapse; margin: 10px; } th{ padding: 6px; text-align: center; color: #333; background-color: #eee; border: 1px solid #b9b9b9; } td { padding: 6px; text-align: center; background-color: #fff; border: 1px solid #b9b9b9; } |
箇条書きの書式
作者さんのサイトを参考に、箇条書きのチェックマークを赤丸チェックマークアイコン
に変更しました。
|
1 2 3 4 |
#entry_body ul { list-style: url(images/list-check-01.png) inside; margin-bottom: 24px; } |
グレーボックスの箇条書きインデント
- グレーボックスでの箇条書きが長くなる場合、インデントを適切に修正しました。これも作者さんのサイトを参考にさせて頂いています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.gray_box p { margin: 0; } #entry_body .gray_box li { padding-left: 1em; text-indent: -1em; } #entry_body .gray_box ul:last-child, #entry_body .gray_box ol:last-child { margin-bottom: 0; } #entry_body .gray_box p:last-child { margin-bottom: 0; } |