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

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

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

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

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

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

この記事の解説

変更するアイコンやイラスト、写真素材を手に入れるおすすめサイトのご紹介
テーマAFFINGER6でのTOPへ戻るボタンを簡単に変更する方法

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

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

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

イラスト編

Frame illust

SHIN

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

Frame illustへGO

いらすとん

alt=いらすとん

SHIN

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

いらすとんへGO

ぴよたそ

alt=ぴよたそ

SHIN

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

ぴよたそへGO

写真編

写真を採用する場合

写真をTOPへ戻るボタンにする場合、人物や建物を素材にしたいところですけど、背景も一緒になると違和感があります・・。なのできれいに切り取れるソフトを使うか、丸く切り取るなどの工夫をすることをおすすめします。

ぱくたそ

alt=ぱくたそ

SHIN

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

ぱくたそへGO

pixabay

alt=pixabay

SHIN

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

pixabayへGO

Gratisography

alt=Gratisography

SHIN

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

GratisographyへGO

アイコン編

fontawesome

alt=fontawesome

SHIN

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

fontawesomeへGO

ICOON MONO

alt=ICOON MONO

SHIN

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

ICOON MONOへGO

FLAT ICON

alt=FLAT ICON

SHIN

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

FLAT ICONへGO

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

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

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

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

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

変更する画像チェック点

● 丸いアイコン画像以外は「透過画像」がおすすめ！（ボタンが四角だと変かなと・・）

● 写真の場合、アイコンになる「人」「動物」「物」は徹底的にキレイな透過で！

● 画像は「PNG」がおすすめ（アイコン画像はサイズが小さいので画質優先にしましょう）

● アイコンにする画像サイズは・・・縦横100px～150pxがベター（確認しながらでもOK）

● 画像を決めてサイズ調整したら、WordPerssのメディア内にアップロードしましょう。

● スマホで「フッター固定メニュー」を表示している場合は、アイコン非表示なので注意！

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

alt=WordPress カスタマイズ

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

alt=WordPress カスタマイズ1

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

事前にWordPressの「メディア」にサイズ調整した画像をアップロードしておきます。

alt=WordPress カスタマイズ2

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

alt=WordPress カスタマイズ3

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

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

まとめ

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

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