最近、いろんな方のブログを読ませていただいて、Simplicityを使っている人がかなりいることにビックリしています。多いとは思っていたけれどここまでとは。
で、なかなか「カスタマイズしている人が少ないな…」なんて思ったのが『トップへ戻るボタン』。
多くのブログでアイコンを変えているだけ、ボタンの色を変えているだけ、などカスタマイザーで変更できる部分でカスタマイズしているブログが多く感じました。
ということは「ちょっと手を加えてやれば、ちょっとした差別化になるかな？」なんて思ったのと、「このボタンなんか物足りないな」なんて思ってもいたので、Simplicity2の「トップへ戻る」ボタンをカスタマイズしてみました！
「トップへ戻る」ボタンでカスタマイズしたこと
まずは「トップへ戻る」ボタンのカスタマイズ前と後を見ていただきましょう。「トップへ戻る」ボタンがこんなふうになりました。
ちょっとだけリッチになったような気がして自己満足してます！
アイコンを変更
もう見てもらえばわかるんですけど、「トップへ戻る」ボタンをSimplicity2デフォルトのものから変えました。
ただの矢印みたいなアイコンを、上へ指差しているようなものへ変えてます。
Simplicity2で使われているアイコンは「Font Awesome」。こちらから好みのアイコンを探すといいですよ。
テキストで「ページトップへもどる」追加
あとは、変更したアイコンの下へ「ページトップへもどる」というテキストを追加しました。
アイコンだけの「トップへ戻る」ボタンだと、『ボタンがちょっと小さいような気がした』のと『テキストでも何のボタンなのかわかるといいかな』と思ったのが、テキストを追加した理由です。
カスタマイザーで設定すること
最初にSimplicity2のカスタマイザーで設定できるところから設定していきます。
アイコンの変更、「トップへ戻る」ボタンの色の変更はともにカスタマイザーより変更できます。
アイコンを変更する方法
Font Awesomeにあるアイコンから使いたいアイコンを選んで、Simplicity2のカスタマイザーで変更していきます。
Font Awesomeからアイコンのクラス名を取得する方法
Font Awesomeにあるアイコンのクラス名を取得するには、あたりまえなんですけどFont Awesomeへ移動することで取得できます。
移動先のページでアイコンとアイコンクラスが一覧になってますが、なんとこのページでアイコンクラスをコピーすることができない んですよね。なので、使いたいアイコンを見つけたらそのアイコンをクリックしてください。
今回選んだのは『』ですので、をクリックします。
すると選んだ アイコンの個別ページが表示されるのでここでアイコンクラスをコピー します。
カスタマイザーの「レイアウト（全体・リスト）」でアイコンを設定する
WordPressにログインして「外観→カスタマイズ→ レイアウト（全体・リスト）」で下の方へ進むと『トップへ戻るボタンのアイコン（デフォルト：fa-angle-double-up）』があるので、ここの入力ボックスにFont Awesomeで選んだアイコンのアイコンクラスを入力して、『保存して公開』をポチッとクリックでアイコンの変更は終了です。
ボタンの色を変更する方法
ボタンの色はほとんどの人はサイトのイメージにあった色にされると思います。この「あらくまの一粒万倍ブログ」は緑色がサイトのイメージなので、『トップへ戻る』ボタンの色は「見出し2（h2）」と同じ色にしてみました。
さっそくボタンの色を変えていきましょう。
ボタンの色は「外観→カスタマイズ→ 色 」の下の方にある 『トップへ戻るボタン色』と『トップへ戻るボタン背景色』 の2ヶ所で変更できます。
カスタマイザーでの色の変更の方法は、どの場所の色の変更も同じ方法なんですけど、一応、色の変更方法を。
「色を選択」クリックすると画像のようになります。
ドラッグしなが色を選択することもできますが、色を決めていることも多いでしょうし、色を変更するときは 『16進値』に直接入力するのが簡単 だと思いますね。
色を入力し終わったら、上にある『保存して公開』をポチッとクリックすれば終了です。
上の画像では「保存しました」になっちゃってますが、色を変更するとココが『保存して公開』になってますので、あしからず。
「button-go-to-top.php」に追記する
Simplicity2のカスタマイザーでの設定ができたら、今度は「button-go-to-top.php」に『ページトップへもどる』テキストを追加します。
WordPressのダッシュボードから「外観」→「テーマの編集」。
右上にある「編集するテーマを選択」を「Simplicity2 child」から『Simplicity2』にして選択をクリック。
右側の「テンプレート」から「button-go-to-top.php」を探し出してクリック。
以下の 太字の部分（button-go-to-top.phpの10行目）を見つけ出してもらって、そこへ 赤い太字（<br/>ページトップへもどる） のとおりに追加するだけです。
<?php ////////////////////////////////// // トップへ戻るボタンのテンプレート ////////////////////////////////// if ( is_go_to_top_button_visible() ): //トップへ戻るボタンを表示するか?> <div id="page-top"> <?php if ( get_go_to_top_button_image() ): //カスタマイザーでトップへ戻る画像が指定されている時 ?> <a id="move-page-top" class="move-page-top-image"><img src="<?php echo get_go_to_top_button_image(); ?>" alt="トップへ戻る"></a> <?php else: ?> <a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span><br/>ページトップへもどる</a> <?php endif ?> </div> <?php endif; ?>
これで、このブログと同じような「トップへもどる」ボタンに変更することができます。
スタイルシートでスタイルを整える
最後に見た目のスタイルを子テーマのスタイルシートで整えます。
WordPressのダッシュボードから「外観」→「テーマの編集」。これで基本的には子テーマのスタイルシートを書き込む場所が表示されます。
あとはスタイルシートに以下を書き込んで『ファイルを更新』をクリックすれば終わりです。
/************************************
トップへもどるボタン
************************************/
#page-top a {
padding: 7px; /* ボタンの内側のスペース */
font-size: 16px; /* アイコンとテキストのサイズ */
font-weight: bold; /* 太字にする */
line-height: 150%; /* 行間 */
}お好みで調整してください。
親テーマのままでもいいけど、子テーマに「button-go-to-top.php」を追加しておこう！
「button-go-to-top.php」は親テーマにしかなく子テーマにありません。
なのでこのままでは 親テーマ（Simplicity2）をバージョンアップさせるたびに「button-go-to-top.php」を変更 する必要があります。これだとバージョンアップのたびに手間がかかるので、このさい子テーマに「button-go-to-top.php」を追加しておきましょう。
「button-go-to-top.php」を子テーマに追加する方法は、以下の記事を参考になさってください。
子テーマに追加しておけば、親テーマをバージョンアップさせても「button-go-to-top.php」をいちいちいじらなくて良くなりますのでね。
おわりに
「ページトップへもどる」ボタンがちょっと物足りない感じがしたので、テキストを追加するだけのカスタマイズだったんですが、思い切ってやってみました。
アイコンを変更している人は多いんですけど、テキストを追加している人って少なかったんで、ちょっとした差別化になると思いますよ！
今回もおつきあいいただきありがとうございました！また次回お会いしましょう！！
