Gush2 先行公開がついに先行公開されました!
Stinger5押しの僕ですが、「さすがにこれは試さないとっ!」という事で、早速ダウンロード&ローカル環境(XAMPP)に適用してみましたので、感想と初期導入時のカスタマイズポイントなどに触れたいと思います。
適用直後のイメージと感想は?
まずは、初見の感想を簡単に。
Gushの特徴、デフォルトデザインの完成度は顕在!
パッと見た感想は、やはり「デザインが洗練されてて良い!」です。
Stinger5は真っ白なキャンバスで、自分の絵を描いていく楽しみがありますよね。
これに対し、Gush2はまるで「既に完成された1枚の絵」。
デフォルトのデザインにちょちょっと手を加えたら即リリースできますね。
「テーマいじくる時間があったら、記事の一つも書くわな!」という人にとっては、これは嬉しい。
準備されているウィジェットは9か所!
Gush2では、9ヵ所ものウィジェットが準備されています。
- サイドバー
- サイドバー300px広告: 404ページ規約違反回避のためAdSense以外推奨
- メイン上部728px広告:レスポンシブデザイン用AdSense推奨
- メイン下部728px広告:レスポンシブデザイン用AdSense推奨
- 記事下左300px広告:
- 記事下右300px広告:スマホでは出力されません。左に広告がない場合は左寄せになります
- フッター左
- フッター中央
- フッター右
デザイン系4つにマネタイズ系5つといった感じです。
特筆すべきはメインの上部と下部に、反応率が高いと言われている728pxのアドセンスを配置できる点。
これは試してみたい!w
内部構造のシンプルさが嬉しい!
更に、内部構造のシンプルさも顕在です。
はじめはデフォルトでも良かったけど、ブログ運営している間に、少しカスタマイズしたくなった。。。というのは良くある話。
そんな、少しデザインを触りたいという場合に、内部構造のシンプルさが生きてきますので、この点もポイントが高いですね。
ここまで読んで「試したい!」と思った方は・・・
はい。
ここまで読んで「試したい!」と思った方はTwitterで試使用したい人を募集されてますので、Gush作者のエローラさんのツィートをからたどってみて下さい。
といっても探すのは手間だと思いますので、一応リンクを貼っておきます。
なお、適用したイメージが見たければ、
- Gus2 公式サイト:WordPress Theme Gush2
- TKalice (hiroumi3799)さんのサイト:huluで観れるおすすめしたいSF洋画7選
辺りで確認してみるとイメージが湧くと思います。
初期導入時のカスタマイズのポイント
さてさて、前置きが長くなりましたが、ここから初期導入時のカスタマイズのポイントについて記載しておきます。
※なおGush公式サイトにも記事が上がっていますので、そちらも併せて確認して下さいね。
カスタマイズの概略
Gushの場合、初期導入時に触っておきたい箇所は案外少ない印象です。
初期導入時にカスタマイズしておきたいのは、
- サイト名のロゴ画像化
- ファビコンの差し替え
- ソーシャルボタンの追加
- イメージカラーの変更
- アクセス解析の設置
の5点ですね。
(もし、漏れがあればご指摘下さいwww)
それでは、1つずつ見ていきましょう。
サイト名のロゴ画像化・・・修正対象:header.php
サイト名のロゴ画像化については、Gush公式ブログにも記載があります。
Gush公式:アクセスアップにつながるGush2の効果的な使い方 | サイト名はロゴ画像に
なので、ここでは簡単な補足を2点記載しておきますね。
- 補足1:ロゴ画像のサイズは、横幅1060pxにするとピッタリ。
- 補足2:画像のAltタグを関数で取得するなら「alt=”<?php bloginfo(‘name’); ?>”」で。
一応、Gush2のimagesフォルダに画像をアップした場合のサンプルコードを乗せておきますので、参考にしてみて下さい。
//ロゴの画像化 <img src="<?php echo get_template_directory_uri(); ?>/images/header.png" alt="<?php bloginfo('name'); ?>"></a>
ファビコンの差し替え・・・修正対象:header.php
新しいテーマを適用した場合、ファビコンの修正は意外と忘れがちですねw
ファビコンを指定しているコードは下記になります。
//ファビコンの差し替え <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />
なので、imagesフォルダのfavicon.icoを差し替えてあげるだけでOKですね。
ソーシャルボタンの追加・・・修正対象:sns.php
ソーシャルボタンの追加についても、Gush公式ブログに記載がありますので、ここでは割愛させて頂きます。
Gush公式:SNSボタン初期設定とカスタマイズ方法
イメージカラー・・・修正対象:style.cssと画像
次に(多分w)カスタマイズしたいのがイメージカラーですね。
Gush2の場合、デフォルトではグレーを基調とした配色でシックなイメージになってます。
ただ、これだとブログのイメージに合わない場合もあると思いますので、カスタマイズのポイントを記載しておきますね。
対象は下記の4か所です。
1. 372~380行目
//1 /*-------------------------------------- ヘッダ見出し --------------------------------------*/ #header { text-align: center; background: #666; padding: 0 0 12px; border-bottom: 1px solid #fff; }
2. 1672~1676行目
//2 /* ヘッダーに濃いグレーのテクスチャ */ #header { background: #444 url(images/grey_wash_wall.png) left top repeat; /* thnx! http://subtlepatterns.com/ */ }
3. 1229~1238行目
//3 /*-------------------------------------- フッター --------------------------------------*/ #footer { width: 100%; margin: 0 auto; clear: both; background: #444 url(images/grey_wash_wall.png) left top repeat; }
4. 1966~1975行目
//4 /*-------------------------------------- 1024px フッター --------------------------------------*/ #footer { width: 100%; margin: 0 auto; clear: both; background: #444 url(images/grey_wash_wall.png) left top repeat; /* thnx! http://subtlepatterns.com/ */ }
以上を見て頂くとお解りの通り、下記の3点をお好みの色、および画像に変えてあげれば、イメージカラーが変わります。
- background: #666;
- background: #444
- images/grey_wash_wall.png
ちなみにgrey_wash_wall.pngのサイズは、幅:350px、高さ:259pxとなっていますので、サイズを合せて画像を作ってあげて下さいね。
アクセス解析の設置・・・修正対象:header.php or footer.php
※プラグイン等を利用して設置している場合は不要です。
これを忘れると、悲しい事になりますw
必ず読み込まれるブロック(ヘッダーかフッター)にアナリティクスコードを設定して下さい。
以上、ざっと見ていきましたがいかがだったでしょうか?
あとは、ウィジェットにアドセンス等を配置してあげれば初期導入できると思いますので、参考にしてみて下さいね。^^