AFFINGER

AFFINGER5【TOPに戻るボタンのカスタマイズ】任意の画像に

AFFINGERサンプル

AFFINGER5で【TOPに戻るボタン】をカスタマイズする方法の紹介です。

記事後半では、使用する画像の入手先や作り方についての解説も行っています。

 

こんな人のお役に立てる記事です。

小豆
ページ右下に表示されているボタンって、自分好みにカスタマイズできないの?
ありきたりな画像ではなくて、自分で用意した画像を使用したい。

AFFINGER5で【TOPに戻るボタン】をカスタマイズ

AFFINGERでは、【TOPに戻るボタン】を自分好みにカスタマイズすることができます。

TOPに戻るボタン

ちなみに、カスタマイズの方法は以下の3種類。

  • 色を変更する
  • オリジナル画像を使用する
  • 非表示にする

 

というわけで、早速やってみました。

オリジナルボタンデザイン

だいぶ印象が変わりましたね。

ブログのオリジナリティが、格段に上がりました。

「スマホ用フッターメニュー」を設定している場合は、【TOPに戻るボタン】は表示されません
PCでのみ・・の表示となります。

関連AFFINGER5【スマホ用フッターメニューを設置】カスタマイズも

カスタマイズの方法と注意点

【TOPに戻るボタン】のカスタマイズは、カスタマイザーから簡単に行うことができます。

手順

  1. カスタマイザーを開く
  2. TOPに戻るボタンを選択
  3. 設定する

 

step
1
カスタマイザーを開く

カスタマイズメニュー

WordPressメニュー → 外観 → カスタマイズ

 

step
2
TOPに戻るボタンを選択

TOPに戻るメニュー

オプションカラー → TOPに戻るボタン

 

step
3
設定する

カスタマイズメニュー設定

  1. デフォルトのボタンカラーの変更
  2. オリジナル画像の設定
  3. ボタンを非表示にする

 

オリジナル画像を使用する際のポイント

  • PNG画像を使用する
  • サイズは60px × 60pxくらいのものを使用する
  • ひと目で「TOPに戻るボタン」だとわかる画像を使用する

メモ

ボタンの位置を微調整したい場合は?

当ブログの場合は、right(px):15 bottom(px):15で設定しました。

 

設定後に表示が反映されない場合

設定が反映されない場合

こんな場合は、ブラウザのキャッシュをクリアすることで直るはずです。

大福
ブラウザのキャッシュをクリアするには、スーパーリロードをすればOKだよ。

 

スーパーリロード

Windows ShiftF5
Mac CommandShiftR

※Google Chrome、Microsoft Edgeをお使いの場合の操作方法です

メモ

Safariをお使いの場合は、以下のように操作します。

Shift + 更新ボタン

画像の入手先とオリジナル画像の作り方

【TOPに戻るボタン】に使用する画像は、主に以下の3つの方法で用意します。

画像の準備

  • 無料素材サイトのものを使用する
  • 画像編集ソフトで自分で作る
  • ココナラで依頼する

 

無料素材サイトのものを使用する

最も手軽にできるのが、無料素材サイトの利用です。

たとえば、ブロガーに大人気の「イラストAC」を使った場合はこんな感じ。

矢印の画像

矢印 🔎 で検索すると、【TOPに戻るボタン】に最適な画像が豊富に表示されます。

 

イラストACに移動する

イラストACの利用は無料ですが、初回のみ会員登録(名前とメールアドレスのみ)が必要です。

 

画像編集ソフトで自分で作る

ちょっと難易度は高めですが、画像編集ソフトを使用すれば、オリジナル画像を自分で作ることができます。

僕の場合は、GIMP(ギンプ)という無料の高性能画像編集ソフトを利用しています。

GIMP編集画面

画像の編集は、ブロガーにとって「身につけておきたい必須のスキル」ですよね。

GIMPなら有料ソフト顔負けの画像編集が行なえます。

 

GIMPダウンロードサイトへ移動する

 

GIMPをサクッと使えるようになりたい場合は、以下の本がおすすめです。

 

ココナラで依頼する

ココナラ

ココナラを利用すれば、オリジナル画像の作成をイラストレイターさんにお願いすることができます。

ちなみに料金は、最安で500円~。

ブログにオリジナルキャラを設定している人におすすめです。

 

依頼する際は、以下のようなイメージを添付するとスムーズにいきます。

依頼書

 

ココナラに移動する

 

まとめ:自分好みのボタンにカスタマイズしよう

AFFINGER5なら、簡単に【TOPに戻るボタン】をカスタマイズすることができます。

ブログにオリジナリティを出したい人は、ぜひやってみてください。

 

AFFINGER利用者向けオリジナル特典の販売

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

特典詳細ページへ移動する

こちらの記事もよく読まれています

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

© 2021 大福日記