AFFINGER5で【TOPに戻るボタン】をカスタマイズする方法の紹介です。
記事後半では、使用する画像の入手先や作り方についての解説も行っています。
こんな人のお役に立てる記事です。
ありきたりな画像ではなくて、自分で用意した画像を使用したい。
AFFINGER5で【TOPに戻るボタン】をカスタマイズ
AFFINGERでは、【TOPに戻るボタン】を自分好みにカスタマイズすることができます。
ちなみに、カスタマイズの方法は以下の3種類。
- 色を変更する
- オリジナル画像を使用する
- 非表示にする
というわけで、早速やってみました。
だいぶ印象が変わりましたね。
ブログのオリジナリティが、格段に上がりました。
「スマホ用フッターメニュー」を設定している場合は、【TOPに戻るボタン】は表示されません。
PCでのみの表示となります。
カスタマイズの方法と注意点
【TOPに戻るボタン】のカスタマイズは、カスタマイザーから簡単に行うことができます。
手順
- カスタマイザーを開く
- TOPに戻るボタンを選択
- 設定する
step
1カスタマイザーを開く
WordPressメニュー → 外観 → カスタマイズ
step
2TOPに戻るボタンを選択
オプションカラー → TOPに戻るボタン
step
3設定する
- デフォルトのボタンカラーの変更
- オリジナル画像の設定
- ボタンを非表示にする
オリジナル画像を使用する際のポイント
- PNG画像を使用する
- サイズは60px × 60pxくらいのものを使用する
- ひと目で「TOPに戻るボタン」だとわかる画像を使用する
メモ
ボタンの位置を微調整したい場合は？
当ブログの場合は、right（px）：15 bottom（px）：15で設定しました。
設定後に表示が反映されない場合
こんな場合は、ブラウザのキャッシュをクリアすることで直るはずです。
スーパーリロード
| Windows | Shift ＋ F5 |
| Mac | Command ＋ Shift ＋ R |
※Google Chrome、Microsoft Edgeをお使いの場合の操作方法です
メモ
Safariをお使いの場合は、以下のように操作します。
Shift + 更新ボタン
画像の入手先とオリジナル画像の作り方
【TOPに戻るボタン】に使用する画像は、主に以下の3つの方法で用意します。
画像の準備
- 無料素材サイトのものを使用する
- 画像編集ソフトで自分で作る
- ココナラで依頼する
無料素材サイトのものを使用する
最も手軽にできるのが、無料素材サイトの利用です。
たとえば、ブロガーに大人気の「イラストAC」を使った場合はこんな感じ。
矢印 🔎 で検索すると、【TOPに戻るボタン】に最適な画像が豊富に表示されます。
イラストACの利用は無料ですが、初回のみ会員登録（名前とメールアドレスのみ）が必要です。
画像編集ソフトで自分で作る
ちょっと難易度は高めですが、画像編集ソフトを使用すれば、オリジナル画像を自分で作ることができます。
僕の場合は、GIMP（ギンプ）という無料の高性能画像編集ソフトを利用しています。
画像の編集は、ブロガーにとって「身につけておきたい必須のスキル」ですよね。
GIMPなら有料ソフト顔負けの画像編集が行なえます。
GIMPをサクッと使えるようになりたい場合は、以下の本がおすすめです。
ココナラで依頼する
ココナラを利用すれば、オリジナル画像の作成をイラストレイターさんにお願いすることができます。
ちなみに料金は、最安で500円～。
ブログにオリジナルキャラを設定している人におすすめです。
依頼する際は、以下のようなイメージを添付するとスムーズにいきます。
まとめ：自分好みのボタンにカスタマイズしよう
AFFINGER5なら、簡単に【TOPに戻るボタン】をカスタマイズすることができます。
ブログにオリジナリティを出したい人は、ぜひやってみてください。
AFFINGER利用者向けオリジナル特典の販売
＼ AFFINGER6にも対応済み ／
AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。
目的に合わせて、以下の2つを用意しました。
- AFFINGER5利用者向けカスタマイズ集 9選
- AFFINGER利用者向けカスタマイズ＆役立つテクニック 14選
2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選：2,980円 → 2,480円
・カスタマイズ＆役立つテクニック 14選 4,980円 → 3,980円
