【2022年10月追記】Gushの終了
GushおよびGush2を提供してくださっていたサイトさんが、全てのデータを削除し、ドメイン（wp-gush.com）を売りに出しています。
そのため、この記事でご紹介していたインストールページのURLなどを削除させて頂きました。
今後Gushは各種更新が行われず、セキュリティ上の危険性が生まれる可能性があります。
現在Gush2などを使用している方は、急ぎ他のテーマへの変更をご検討ください。
▶おすすめテーマ⇒Cocoon
概要
WordPressを使い始めた2年ほど前、なんとなく（お寺が好きだからというただそれだけで）Mantraを選び楽しくカスタマイズしながら長らくお世話になってきました。
しかし海外の方が作っているだけあって、ところどころ私の英語力とコード記述力では使いこなせない部分もあり、特に日本語フォントへの変更なんかは何をどうしたものか分からないまま月日が流れてしまいました。
しかし最近サイトをスマホ対応させたついでにブログも改装しようと決意し、前々から綺麗で使いやすそうなテーマだなと思っていたGushの新バージョンであるGush2に変更してみました。
そこで基本設定の変更方法から私がいじってみた部分までをご説明してみたいと思います。
Mantraの作者であるCryout CreationsのKay様とZed様、今までありがとうございました！
そしてGush2の作者であるEllora様、テーマの提供ありがとうございます！
ダウンロードと使用方法などはこちら
（2022年8月時点で『安全ではない接続』と警告が表示されアクセスできないため、リンクを棒線削除しています）
（現段階でGush2をお使いの方もご注意ください）
テーマをダウンロード＆アップロード
テーマ変更の事前準備
なんかおかしくなっちゃった時や、過去のファイルを確認したい時のために
現在のテーマのファイルをダウンロードしてバックアップを取っておくと安心です。
また、ウイジェットの内容が自分で記述したコードやテキストなら
コピーを取っておくとテーマ変更後も楽に編集できます。
また、使用しているプラグインに影響が出ないように一旦全てのプラグインを停止しておいて、
Gush2を稼動後にまたプラグインを有効化してください。
Gush2をダウンロード
バックアップも万全！プラグインも停止した！となったら
まず最初にGush2からテーマのファイルをダウンロードしましょう。
ダウンロードフォルダから解凍したら、自分のブログを置いているフォルダの中のテーマのフォルダ（themes）にアップロードします。
ディレクトリはこんな感じになっているはず⇒ \blog\wp-content\themes
アップロード後にはWordPressのメニュー内の【 外観 】⇒【 テーマ 】に
Gush2が存在しているはずなので、【 有効化 】をクリックして有効にすれば
テーマがGush2に切り替わります。
カスタマイズで基本の設定
まずは【 外観 】⇒【 カスタマイズ 】から基本的な項目を編集しましょう。
サイトタイトルとキャッチフレーズ
ブログやサイトの名前（このブログなら 『 パソコン修理のエヌシステムBLOG 』 ）
内容の簡単な紹介やサブタイトル（ 『 U｡･ｪ･｡Uﾉ PC修理～ 』 の部分）
色
背景色の設定。このブログなら薄い水色の部分です。
背景画像
壁紙的な画像を設定したい場合はここで。
ウィジェット
サイドバーやフッターの設定。
次でご説明するウィジェットの項目で設定したほうが分かりやすいかも。
固定フロントページ
ブログのトップページの変更。
最新の投稿記事をトップにするか、任意の固定ページをトップにするかを選択できます。
ウィジェットでサイドバーやフッターを設定
左の項目からドラッグ＆ドロップで設置できます。
サイドバー、フッター以外の部分は広告などを置きたい方用のスペースだと思います。
ページ最上部のトップメニューを設定
このブログの一番上、ブルーグリーンのメニュー項目部分です。
任意のURL、もしくはカテゴリでメニューを作ることができます。
CSSの編集
作者さんが記事に使いそうな装飾なども最初からCSSに入れてくれているので、
そのままの状態で使っても充分見栄えのするブログになります。
見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプルからデフォルトの状態を確認できます。
また、レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ にもあるように、
Gush2はスマホやタブレットの画面幅に対応できるレスポンシブWebデザインで作られているので
スマホ・タブレット・PCの3種類がスタイルシート (style.css)に記述されています。
レスポンシブWebデザインについて詳しくは当ブログの記事をご覧ください。
スマホ最適化 【 １ 】 モバイル ユーザビリティの問題って？
CSSを自分で編集する時は、スマホ用やPC用といった記述箇所を間違えないようにご注意ください。
まずはカラーや見出しを変更
自分の好みのサイトやブログに改装したい！という時はまず大きな部分、
ヘッダーカラーや見出しなどから変更していくと良いと思います。
デフォルトの状態ではヘッダーとフッターにグレーの背景画像が設定されているので
背景画像の削除と設定方法を参考に画像を外してカラーを変えましょう。
各種画像を変更する
引用（blockquote）、リストアイコン、アイキャッチのサムネイルが未設定時の画像、
エラーページ用の画像など、デフォルトで設定されている画像は
\themes\gush2\images のフォルダ内にあります。
それぞれの元の画像と私が変更した後の画像はこんな感じです。
ヒヨコ可愛いのでそのまま使わせていただこうかとも思ったのですが、
サイト用に作ったエラーページ用の4コマがあったので変更してみました。
画像を差し替えるには、用意した画像をimagesフォルダ内にアップロードしてから
対応するファイルの画像URLを編集します。
リスト用の画像を変更
記事一覧などのリストアイコンを変える場合、スタイルシート (style.css)を編集します。
[su_box title=”コード” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]#article_body ul {
list-style: url(images/★ここ★.jpg) inside;
margin-bottom: 24px;
}[/su_box]
引用符を変えたい場合も同様にCSSを書き換えます。
アイキャッチ画像を変更
単一記事の投稿 (single.php)ファイル内のサムネイル画像に関する部分を編集します。
[su_box title=”コード” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<?php else: // サムネイルを持っていないときの処理 ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/★ここ★.gif” alt=”no image” title=”no image” width=”110″ /><?php endif; ?></a></li>[/su_box]
404エラーページ内容の変更
404 テンプレート (404.php)ファイルを編集します。
画像だけでなく見出しやテキストの追加などもご自由に変更可能です。
[su_box title=”コード” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<img src=”<?php echo get_template_directory_uri(); ?>/images/★ここ★.gif” alt=”404″ style=”margin-bottom: 36px” />[/su_box]
ファビコンの変更
下記のどちらかで変更することができます。
・ファビコン画像を『 favicon.ico 』として保存、imagesフォルダ内にアップロードする
（元のfavicon.icoに上書きする）
・ヘッダー (header.php)ファイル内の 『 favicon.ico 』 を自分のファビコン名に書き換える
編集が反映されない時は
CSSでカラーを変えたのに変わってない、というような時は、
間違えてスマホやタブレット用のCSSを編集してしまって
パソコン用のCSSは何も変わっていない状態なのかもしれません。
上から
————————–
全般設定
スマホ用
タブレット用
パソコン用
————————–
の順番になっているので、編集箇所を間違えないようにご注意を。
また、キャッシュが残っているせいでプレビューに反映されていない可能性もあります。
キャッシュクリアのプラグインを活用してみましょう。
キャッシュクリアのプラグイン 『 W3 Total Cache 』 についてはこちらをご覧ください。
【WordPress】 高速化プラグイン おすすめ3つ 【ページ表示速度アップ】
そんなこんなでGush2にお世話になり始めて2週間ほどですが、
すっきり綺麗なテーマで見やすく使いやすいのでとても気に入っています。
まだまだ改装できそうなところもあるので頑張って工夫していきたいです(*＾▽＾)
