yuichi.co

ゆういちのノートブック

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

 10556

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

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



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

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

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

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

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

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

カスタマイズ

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

CSS

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

#page-top {
    bottom: 20px;
    right: 20px;
}
#page-top a {
    border-radius: 50%;
    font-size: 32px;
    height: 32px;
    line-height: 32px;
    width: 32px;
}
#page-top a:hover {
    background: #3498db;
}
.fa-angle-up:before {
    content: "\f102";
}

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

ボタンの位置

#page-top {
    bottom: 20px; /* 画面下からの幅 */
    right: 20px; /* 画面右横からの幅 */
}

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

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

#page-top a {
    border-radius: 50%; /* ボタンの角を丸くする */
    font-size: 32px; /*ボタンの中のアイコンの大きさ */
    height: 32px; /* ボタンの縦の大きさ */
    line-height: 32px; /*ボタンの中のアイコンの幅 */
    width: 32px; /* ボタンの横の大きさ */
}

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

マウスが重なっとき

#page-top a:hover {
    background: #3498db; /* マウスが重なったときに色を変える */
}

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

Font Awesome

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

二つのアングル

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

/* 二つのアングル */
.fa-angle-up:before {
    content: "\f102";
}

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

丸く小さい矢印

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

/* 丸く小さい矢印 */
.fa-angle-up:before {
    content: "\f01b";
}

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

太い線の矢印

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

/* 太い矢印 */
.fa-angle-up:before {
    content: "\f062";
}

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

指マークのアイコン

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

/* 指マーク */
.fa-angle-up:before {
    content: "\f0a6";
}

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

ロケットのアイコン

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

/* ロケット */
.fa-angle-up:before {
    content: "\f135";
}

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

まとめ

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

Stinger7 カスタマイズ