【コピペ可】AFFINGER4のトップページへ戻るボタンをカスタマイズ

更新日:

AFFINGER4の「トップページへ戻るボタン」は、なにも設定をしていない状態だと「おまえ、ほんとにそこにいるの!?」って言うくらい影が薄い存在である。

というか、目を凝らしても見えないほどの薄さなのだ。

これじゃ、おまえの役目はちゃんとはたせていないぜ!ということで、「トップページへ戻るボタン」の存在をもっとアピールするカスタマイズをすることにした。

下にスクロールすると右下に現れるボタンみたいにね。

 

スポンサーリンク

トップページへ戻るボタンの背景色を変更する

post-4784i

WordPress管理画面

post-4784a

まずは、Wordpress管理画面左メニューにあるAFFINGER管理から、サイト全体の設定にある「オリジナルテーマカスタマイザーを使用する」にチェックが入っているか確認しよう。

ここにチェックが入っていないと、これからおこなうカスタマイズの画面が表示されないぞ。

post-4784b
外観⇒カスタマイズをクリック

post-4784c
オリジナルテーマカスタマイザーの「メニューのカラー設定」を選択

post-4784d
スマートホンの「スマホ用メニューとトップに戻るボタン背景色」で、ボタンの色を好きなカラーに変更する。

色を変えたら、カスタマイズ魂がぁ~~、ついでにボタンのデザインも変えてみよう!

 

トップに戻るボタンのデザインを変更する

post-4784e

続いて四角のデザインから丸デザインに、そしてスマホで読んでいる場合を考えて、押しやすいように大きめのサイズにCSSでカスタマイズしたいと思う。

カスタマイズ手順

  1. WordPressプラグイン「Simple Custom CSS」のインストール&有効化
  2. 「Simple Custom CSS」の編集画面にCSSコードをコピペする

WordPressプラグイン「Simple Custom CSS」のインストール&有効化

子テーマと一緒に使いこなすと便利なSimple Custom CSSのプラグイン

なんと!プラグインの宝箱を拾った。 スポンサーリンク 目次1 Simple Custom CSSをどうして使うのか?1.1 プラグイン「Simple Custom CSS」のインストール&有効化1.1 ...

続きを見る

上記の記事を参照にこのSimple Custom CSSプラグインをインストール&有効化しておこう。

 

「Simple Custom CSS」の編集画面にコードをコピーする

post-4027a

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: #ff0033 !important; /* マウスが重なったときに色を変える */
}

こちらのCSSコードをカスタムCSSの編集画面にコピペすると、こんな感じの丸型デザインへとカスタマイズされるはず。

post-4784e

Font Awesomeでアイコンをカスタマイズしてみよう!

ボタンのデザインが変わったので、もうちょっと欲張りにアイコンのデザインも変えて、あなたのブログに合った「トップページへ戻るボタン」にしてみましょう。

アイコンのデザインはこちらのFont AwesomeのWEBサイトから取得できます。

アイコンのデザインを選ぼう。

post-4784f
Iconsをクリックすると、アイコンサンプル一覧が表示されます。

post-4784g
好きなアイコンを選んでクリックします。ボクは指マークにしました。

post-4784h
この「f25a」がこの指アイコンのデザインとなるユニコードです。

こいつを以下のコードにあるcontent以降に入れるのです。

f 以降の英数字を変えれば、ボタンの中のアイコンがいろいろと変更できます。

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

あとは先ほどのCSSコードの下にこのコードをコピペするだけ。
すると、右下に表示されているような指マークの「トップページへ戻るボタン」となる。

 

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

-ピアスを売りたい!, ブログ運営(WordPress)
-, ,

Copyright© ピアスマップ , 2018 All Rights Reserved.