カスタマイズ

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

alt=AFFINGER5,TOPへ戻るボタン,カスタマイズ

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

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

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

 

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

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

 

この記事の解説

  • 変更するアイコンやイラスト、写真素材を手に入れるおすすめサイトのご紹介
  • テーマAFFINGER5での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
1
WordPressダッシュボードから「外観」>「カスタマイズ」に進みます。

alt=WordPress カスタマイズ

 

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

alt=WordPress カスタマイズ1

 

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


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

alt=WordPress カスタマイズ2

 

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

alt=WordPress カスタマイズ3

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

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

 

まとめ

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

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

関連記事AFFINGER5カスタマイズ記事一覧を見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-

Copyright© WordPress theme NAVI , 2020 All Rights Reserved.