手作りアクセサリーを売りたい! ブログ運営(WordPress)

【コピペ可】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」のインストール&有効化

wordpress
子テーマと一緒に使いこなすと便利な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コードの下にこのコードをコピペするだけ。
すると、右下に表示されているような指マークの「トップページへ戻るボタン」となる。

 

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

スポンサーリンク
jewerilworld3

手作りアクセサリー作ってみたい

technique 1

アクセサリーは一体どういう風に作られているのでしょか? あなたがもしこれから手作りアクセサリーの作り方を知って、 自分のオリジナルアクセサリーを作ってみたい、 そしてゆくゆくは販売もしていきたいと考え ...

which-one 2

本格的な手作りアクセサリーを作るには、彫金、銀粘土、ロストワックスの3つの方法で作ることが出来る。 もし、あなたが彼女や彼氏に手作りアクセサリーをプレゼントしたいと考えているならば、一体、3つのうちど ...

post-4706 3

スタッドピアスには必ずストレートのピンが付いています。 ピアスピンと言ったり、ピアス棒、ピアスポストとも呼ばれるこのピンはどうやってピアスデザインとくっついているのか知っていますか? 通常、デザイン部 ...

post-4899 4

手作りアクセサリーを作るといっても、プロはその作ったものを販売するという視点から作り方を考えていきます。 趣味で作る場合との大きな違いが、この考え方だと言っても過言ではありません。 今回はそんな商売と ...

brain-training 5

アクセサリーを作るには、地金から作り出す彫金技法やワックスから作り出すロストワックス法があります。 あなたがもし、彫金やロストワックスをはじめたいと考えているのであれば、アクセサリーを作るために必要な ...

-手作りアクセサリーを売りたい!, ブログ運営(WordPress)
-, ,

Copyright© ピアスマップ , 2017 AllRights Reserved.