【AFFINGER6】TOPへ戻るボタンをカスタマイズする方法

AFFINGER6には画面を下にスクロールさせると、右下へ便利な「TOPへ戻るリンクボタン」が表示されるように実装されています。

このボタンを簡単にカスタマイズする方法をご紹介していきます。

こんにちは！WordPressテーマ研究家SHINです。

このTOPへ戻るボタン「デフォルトデザインはちょっと味気ないな・・・」って感じた方、AFFINGER5には簡単にカスタマイズできる機能が実装されているので、好きな写真やイラストなどの画像に変更できます。

もちろんウェブサイト上にある無料のアイコン素材にも変更可能です。

TOPへ戻るボタンの変更画像を手に入れよう

まずはデフォルトのTOPへ戻るボタンを変更する画像を手に入れましょう。

無料素材では屈指の人気サイトをご紹介していきます。

Frame illust

SHIN

シンプルで可愛いイラストがたくさん揃っています。他にも吹き出し・ライン・季節別の素材も全て無料で手に入ります。

いらすとん

SHIN

ゆるカワでちょっとPOPなイラスト素材サイト。こちらもカテゴリー別に多くの素材が揃っています。

ぴよたそ

SHIN

ぴよたそは「ひよこ素材」中心のイラストサイト。シュールで可愛いイラストがたくさん揃っています。

ぱくたそ

SHIN

写真素材での有名人が多数いるサイト。ボタンに合うアクセントになる写真も多く揃っているので、切り取りや透過加工して利用するのがおすすめ。

pixabay

SHIN

日本語・英語ともに対応している無料写真素材サイト。イラストも取り扱っていて、僕はアイキャッチ画像を作成するのに大変お世話になっているサイトの一つです。

Gratisography

SHIN

面白い写真を中心に取り扱っている無料素材サイト。ウケ狙いでアイコンを写真にするなら、いい素材が見つかりそうですね。

fontawesome

SHIN

AFFINGER5で標準実装されているアイコン素材サイト。このサイトでのアイコンであればサクッと表示できる上、シンプルな素材なのでどのウェブサイトにも合いますね。

ICOON MONO

SHIN

シンプル素材がたくさん揃っていて、透過素材なのも◎。モノクロ以外に2色（青・赤）へカラーリングすることもできます。

FLAT ICON

SHIN

シンプルでキレイなマテリアルデザインやフラットアイコン素材をたくさん取り扱っています。カラー素材も多いので、目立つアイコンを探すならおすすめのサイトですね。

イラスト・写真・アイコンの無料素材人気サイトをご紹介しました。

もちろん自作のイラストや写真など加工してアイコンにするのもOKです。僕はエゴコロが全くのセンスゼロでございますので、ウェブサイトから入手しました（笑）

TOPへ戻るボタンにする画像を決めたら、さっそくテーマAFFINGER5側で設定していきましょう。

TOPへ戻るボタンを変更する方法

変更する画像が準備出来たら、まず下のポイントをチェックしましょう。

step
1WordPressダッシュボードから「外観」＞「カスタマイズ」に進みます。

step
2AFFINGER5カスタマイズ画面に移行したら「オプションカラー」＞「TOPに戻るボタン」に進みます。

step
3TOPへ戻るボタンにするアイコン画像をアップロードする以外は「デフォルトのまま」でOKです。

step
4更に下にある3つのチェックボックスもデフォルトのまま外しておきましょう。

この手順設定でTOPへ戻るボタンが変更できます。

リアルタイムのプレビューで、アイコンが変更されてサイズもOKであれば、最上部にある「公開」をクリックして変更保存して完了です。

まとめ

今回は遊び心満点「TOPへ戻るボタンの変更方法」を解説しました。

ウェブサイトにマッチングしたアイコンにしてみましょう！