WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、戻るボタンの背景変更とアイキャッチ画像無し表示

公開日：2015/02/27 最終更新日：2015/02/27

ℹ️本記事にはPRが含まれています。

SiSO-LAB WordPressで初心者がブログを作るよ

じわじわとマイペースでGush2を自分好みにカスタマイズ中ですが、今日は「戻るボタン」とアイキャッチ画像が無い時に表示されるデフォルト画像を変更する話です。

本記事は、WordPress V4.1と無料テーマのGush2 V1.1.1にて動作確認を行っています。

「Topへ戻る」ボタンをソリッドな感じに変更

Gush2からは単なる矢印に変更されましたが、Gush2をテーマに設定しているブログで画面をスクロールさせていくと、右下に上矢印ボタンが表示されます。これは画面上部に戻るためのリンクで、クリックすると画面がビューンとスクロールダウンしてトップに戻ることができます。

じっくり見てみると、この上矢印ボタンにも背景用の画像ファイルが設定されています。今回は、ソリッドなパステル調を目指しているので、画像ファイル表示をやめてただの背景色指定に変更します。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、戻る、アイキャッチ無し画像の変更

style.cssの1300行目に「#page-top」という設定があります。ここを編集します。


#page-top a {
     text-decoration: none;
     color: #fff;
     padding: 5px 10px;
     display: block;
     font-size: 18px;
     background: #444 url(images/grey_wash_wall.png) left top repeat;
     /* thnx! http://subtlepatterns.com/ */
     border-radius: 5px;
     border: 2px solid #fff;
}

1306行目に「background」プロパティを指定しているところがありますので、以下のように修正します。


     background: #444;

これでソリッドなボタンになりました。それにしても、ボタン状の表示がスタイルシートだけで指定されているんですね！すごいです。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、戻る、アイキャッチ無し画像の変更

アイキャッチ画像未設定時のデフォルト画像ファイルの変更

アイキャッチ画像は各記事を代表する画像のことで、各記事をリスト表示したりするときにサムネイルとして表示されたりする画像ファイルです。

これは各記事に設定することができるのですが、設定されていない場合はGush2のデフォルト画像が表示されるようになっています。

たぶん、この先、アイキャッチ画像を指定しない記事は書かないとは思いますが、一応、オリジナルのアイキャッチ画像に入れ替えておくことにします。

というわけで、現在、Gush2がどのように表示しているか調べてみました。アイキャッチ画像が設定されていない場合、おしゃれな街の川辺？に立つ女性の写真が表示されるようになっています。この画像は300x300pxであり、それを150x150pxで表示していることがわかります。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、戻る、アイキャッチ無し画像の変更

また、URLはGush2テーマ内の画像ファイルがいくつか保存されている「images」ディレクトリです。現在、ローカル環境で動作させていますので、普通にフォルダを開いてみました。もし、サーバ環境で動作させているのであれば、FTPで接続してみてください。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、戻る、アイキャッチ無し画像の変更

ここにオリジナルの画像ファイルをコピーします。めんどくさいのでファイル名はGush2オリジナル画像ファイルと同じ名前にしました。こうしておけば、他の部分を編集する必要が無くて楽ちんです。画像サイズはちょっと迷ったのですが、思い切って150x150pxにしちゃいました。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、戻る、アイキャッチ無し画像の変更