WordPress無料テーマ「Gush」カスタマイズ情報
2015.04.08文字化けしたコードを修正しました。
先日、友人である天城翌人さん(@amagi_asuto)がサイトをオープンしました。
天城さんは商業のシナリオライター、舞台作家などをされている方で今後の記事更新が非常に楽しみなサイトになっています。このサイトのオープンに関してサイト作成やテーマの調整などを担当させて頂きました。
その際に使ったのがいま話題の無料WordPressテーマ「Gush」です。
本日は、天城さんのサイト「アソラボ。」で僕が行ったGushのカスタマイズ箇所とカスタマイズ方法を掲載していきたいと思います。
目次
WordPress無料テーマ「Gush」カスタマイズ情報
WordPress無料テーマ「Gush」とは?
Gushは、Elloraさん(@uszero800)が作成された無料WordPressテーマです。
Gushは「シンプルな構造」と「未完成のユーザーが完成させる」というWordPressテーマで、非常に弄りがいがあるテーマになっています。また、基本機能に+αすればすぐに使えるという機能もデザインも優れたテーマです。
では、早速カスタマイズ箇所と方法に関して書いていきたいと思います。
カスタマイズ「ヘッダー」
デフォルトでは「サイトタイトル」「サイト説明」が並ぶデザインになっています。
これがカスタマイズ後です。デカデカとサイトロゴを配置。ヘッダー背景カラーをロゴの背景と同一に変更しています。また、サイト説明の文章を削除しています。メニュー部分のカラーもヘッダー背景カラーと同一のものに変更しています。
ロゴ部分変更前
<div class="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> </div>
ロゴ部分変更後
<div class="hgroup"> <h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="画像のurl" /></a></h1> </div>
ロゴ背景CSS変更前
#header { text-align: center; padding-top: 24px; }
ロゴ背景CSS変更後
#header { text-align: center; padding-top: 24px; background-color: #00A8FF; }
メニュー背景CSS変更前
nav#menu { margin-bottom: 24px; background-color: #444; }
メニュー背景CSS変更後
nav#menu { margin-bottom: 24px; background-color: #00A8FF; }
スマホで見るとこのようなかたちで表示されます。アソラボ。ではヘッダーのロゴを非常に大きなサイズで表示しています。サイズは「986×150」で作成をしています。
見た目の差別化とインパクト重視でこのデザインになりました。
カスタマイズ「背景」・「文章表示エリア」
背景の変更
管理画面の左サイドバー「外観」 > 背景 > 画像を選択・背景色で変更が可能です。
アソラボ。の場合は画像に背景を変更しています。
カテゴリー・タグのカラー変更
カテゴリー・タグのカラーCSS変更前
#cat_tag a { color: #fff; background-color: #444; margin: 0 0.2em 0 0; padding: 3px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
カテゴリー・タグのカラーCSS変更後
#cat_tag a { color: #fff; background-color: #00A8FF; margin: 0 0.2em 0 0; padding: 3px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
PAGE TOP↑ボタンのカラー変更
PAGE TOP↑ボタンのカラーCSS変更前
#page-top a { background: #22ac38; 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; } #page-top a:hover { text-decoration: none; background: #90d59b; color: #444; }
PAGE TOP↑ボタンのカラーCSS変更後
#page-top a { background: #00A8FF; 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; } #page-top a:hover { text-decoration: none; background: #66caff; color: #444; }
各見出しの変更
見出しのCSSやジェネレーターが多数公開されていますので、参考にしてみてください。
カスタマイズ「サイドバー」
検索窓のカスタマイズとSNSアイコンの設置を行っています。
まずはSNSアイコンから解説をします。
sidebar.phpを直接カスタマイズする
<!--sub--> <div id="sub"> <div class="side_ad"> <aside> <?php dynamic_sidebar( 'side-ad' ); ?> </aside> </div> <div class="side_contents">
9行目の上に直接SNSアイコンたちを並べています。
追加コード
<div class="side_sns"> <aside> <ul> <li><a href="Twitter" target="_blank"><img src="画像url" alt="Twitter" width="48" height="48"></a></li> <li><a href="Facebook" target="_blank"><img src="画像url" alt="Facebook" width="48" height="48"></a></li> <li><a href="google+" target="_blank"><img src="画像url" alt="google+" width="48" height="48"></a></li></li> <li><a href="rss" target="_blank"><img src="画像url" alt="Feed" width="48" height="48"></a></li> <li><a href="mail"><img src="画像url" alt="Mail" width="48" height="48"></a></li> </ul> </aside> </div>
追加CSS
#sub .side_sns { margin-bottom: 15px; border: 1px solid #ddd; background: #fff; padding: 1%; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #sub .side_sns li { display: inline; margin: 0 10px 0 0; }
こんな感じで、背景カラーを独自に設置して枠などをつけています。
正直CSSはもっと合理的かつ綺麗に出来ると思います。あくまで参考程度にお考えを。
検索窓カスタマイズ
こちらのプラグインを軸に表示を変更しています。
上記のサイト様よりダウンロードが可能になっております。
管理画面の左サイドバー「外観」 > ウィジェット >
ウィジェット一覧に「Smart Search」が追加されているので「サイド広告」に入れます。
Smart Searchをクリックすると設定が可能です。
イメージボタンurlに任意のボタン画像を入れましょう。
CSSの設定
#sub .side_ad { margin-bottom: 15px; border: 1px solid #ddd; background: #fff; padding: 3%; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #searchform { margin-bottom: 0px; } #s { width: 230px; height: 23px; border: none; padding-top: 4px; padding-right: 10px; padding-bottom: 4px; padding-left: 10px; background-color: #CCC; font-size: 14px; border-radius: 0; }
こんなかたちに設定を行うとサーチボタンまわりと背景などが変更可能です。
正直、知識がない中で無理矢理に改造をしているので別の方法があると思います。
あくまで参考程度でこちらもお考えください。
カスタマイズ「フッター」
Gush製作者であるElloraさん(@uszero800)のサイトで紹介されているグラデーション方法をまんま採用しています。
カスタマイズ「SNS」
↓
大きな変更点は「はてブアイコンの変更」「feedly」の追加です。
はてブアイコンの変更
sns.phpを変更することでアイコンのかたちを変更可能です。
はてブアイコン変更前
<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
はてブアイコン変更後
<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
「data-hatena-bookmark-layout=”vertical”」を「data-hatena-bookmark-layout=”vertical-balloon”」に変更すれば他のアイコンと似たデザインのアイコンに変更されます。完全に好みの問題です。
feedlyの追加
色々な方法があると思いますが、僕はプラグインの導入によって解決を行いました。手っ取り早い上に、一番楽な方法だと思ったからです。
管理画面の左サイドバー「プラグイン」 > 新規追加 > Feedly Insightで検索
Feedly Insightをインストールして有効化しましょう
具体的なプラグインの使い方は公式ページでご確認ください。かなりいろいろ出来ます。
今回も「sns.php」を修正します。
変更前のSNS表示
<ul class="clearfix"> <li>Twitter表示コード</li> <li>Facebook表示コード</li> <li>google+表示コード</li> <li>はてブ表示コード</li> <li>Pocket表示コード</li> </ul>
長いと見づらいので細かいコードが省略しました。デフォルトではこのように並んでいます。
Feedlyを表示したい場所に下記のコードを挿入します。
<?php if ( function_exists( 'fi_the_button' ) ) fi_the_button( 'vertical' ); ?>
変更後のSNS表示
<ul class="clearfix"> <li>Twitter表示コード</li> <li>Facebook表示コード</li> <li>google+表示コード</li> <li>はてブ表示コード</li> <li><?php if ( function_exists( 'fi_the_button' ) ) fi_the_button( 'vertical' ); ?></li> <li>Pocket表示コード</li> </ul>
アソラボ。ではこのように配置をしています。
アイコンサイズの変更なども可能になっています。詳しくは公式ページでご確認を!
まとめ
WordPress無料テーマ「Gush」カスタマイズ情報いかがだったでしょうか?
phpやCSSの素人ですが、頑張ればカスタマイズが可能になっています。
Gushは構造が非常にシンプルなので、見ていてわかりやすかったのもカスタマイズがしやすかった要因だと思います。
カスタマイズ箇所は思い出しながら書いたので抜けがあるかもです。ブログのカスタマイズは終了していないので今後、追加があれば掲載してきますのでよろしくお願いします!
改めて天城翌人さん(@amagi_asuto)のサイト「アソラボ。」をよろしくお願いします!
それでは次回の記事でお会いしましょう!
コメント
[…] 記事を書きました:WordPress無料テーマ「Gush」カスタマイズ情報 […]