【Stinger7】右下のトップへ戻るボタンに5種類のアイコンを入れてみた

   

【Stinger7】右下のトップへ戻るボタンに5パターンのアイコンを入れてみた 

@yuichico_です。トップへ戻るボタン(先頭に戻るボタン)がすこし質素でしたので、サイト訪問者の閲覧が邪魔にならないように、大きめにカスタマイズしてみました。サイト訪問者にとって、これがあるかないかでイメージが変わりますし、あるととても便利なものです。

スポンサードリンク

トップへ戻るボタンって?

単一記事を見ているとサイドバー右下に丸い矢印のマークがあります。これがトップへ戻るボタン(先頭に戻るボタン)です。これがあると、上へ戻りたいときに、いちいちスクロールせずに済むようになります。クリックすると一番上に戻ります。

トップへ戻るボタンってなに?

子テーマのダウンロードとインストール

リンク  Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマをダウンロードしてインストールしてしてください。割愛しますが、あとあとインストールしておかないとめんどうです。

カスタマイズ

ボタンの位置や大きさ、幅、角、アイコンの大きさやFontawesomeを使ってのアイコンを変えてみました。

CSS

外観→テーマ編集→style.cssの一番下へコピーして、貼り付けてください。

少し解説します。スキップしたい人は以下をみないでも問題ありません。

ボタンの位置

このpxが、大きすぎるとスマホで見るときに記事の邪魔になります。このくらいがベストだと考えました。

ボタンの大きさ、幅、角、アイコンの大きさを変える

それぞれ自分にあったカスタマイズをしてみてください。

マウスが重なっとき

ボタンにマウスが乗ったときにリンクの色を変えます。

Font Awesome

ボタンの中のアイコンを変えましょう。トップへ戻るボタンをFontawesomeから取得してみました。外観→テーマ編集→style.cssの一番下へこの中から選んで貼り付けてください。それかcontentの f よりあとの数字と英文字を変えれば、ボタンの中のアイコンが変わります。それぞれお好みの矢印マークをお選びください。5つほどアイコンをカスタマイズしてみました。その内の1つを選んでいただけたら光栄です。

二つのアングル

個人的に好きなので、これにカスタマイズしました。

トップへ戻るボタン カスタマイズ 上の2つの矢印

丸く小さい矢印

ポップな印象を与えます。

トップへ戻るボタン カスタマイズ 小さい矢印マーク

太い線の矢印

シンプルでわかりやすいアイコンです。

トップへ戻るボタン カスタマイズ 太い矢印マーク

指マークのアイコン

Facebookいいねのようなアイコンです。

トップへ戻るボタン カスタマイズ 指マーク

ロケットのアイコン

気さくな感じです。押すと上に行くのでイメージとしてはいいかもしれません。

トップへ戻るボタン カスタマイズ ロケット

まとめ

トップへ戻るボタンでも、いろんなアイコンがありますね。アイコンが違うとサイト全体の雰囲気も変わってきます。参考にしてみてください。

シェアしていただけると助かります。

 - Stinger7, カスタマイズ