1. TOP
  2. アメブロカスタマイズ
  3. (2-3) ページ送りボタンのカスタマイズ・初級アメブロカスタマイズガイド

(2-3) ページ送りボタンのカスタマイズ・初級アメブロカスタマイズガイド

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

今回はCSS編集用画面の(2)ボタンのスタイルブロックの中の、「(2-3) ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン」です。

 

「(2-3) ページ送りボタンの解説 アメブロカスタマイズ

「(2-3) ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン」のブロックは以下の画像の部分のことを言っています。

image-11036649864-11523257120

 

アメブロカスタマイズCSSコードの解説

・・・の前に、カスタマイズするには、色を指定するカラーコードが必要になります。わたしのサイトでも紹介していますので、後ほどカスタマイズする際の参考にしてください。

では解説です。

このブロックのコードは以下のようになっています。

/* (2-3) ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/

.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #dddddd;/*----ボタンの枠線の太さ 枠線の種類 枠線の色を設定---①*/
background:#ffffff;/*---ボタンの背景色の設定---②*/
color:#0066cc !important;/*---ボタンの中の文字色の設定---③*/
}

/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#f7f7f7;/*---ボタンにマウスを合わせた時に変化する色の設定---④*/
}

赤い字を見てください。①~④まで番号がふってあります。

それぞれを解説します

①ボタンの枠線の設定

①ではボタンの枠をどうするかを設定します。コードは

border:1px solid #dddddd

となっていますね♪

変更するのは:(コロン)以下です。

まず、1pxとあります。これは枠線の太さを表し、この数値を大きくすると枠が太くなります。
次に、solidです。これは枠線の種類を表します。solidは通常の線です。この他に2重線のdoubleや、点線のdottedなどがあります。最後の#FF0000は枠線の色の指定です。これらを変えることでボタンの枠線をカスタマイズできます。

②ボタンの背景色

ここでボタンの背景色を設定します。初期値は#ffffffで白色ですが、これを変えることでボタンの背景色を変更できます。

③ボタンの文字色の設定

ここでボタンの中の文字色を変えることができます。#0066ccのコードを変えると色を変えることができます。

④ボタンの背景の設定その2

ここはボタンにマウスを載せた時に、変化するボタンの色を設定します。現在は#f7f7f7です。これを変更してマウスが乗った時の背景色を設定することができます。

アメブロカスタマイズ:設定例

実際に設定してみましょう。①の枠線の太さを少し太くし、枠線の種類をドットで設定します。そして枠線の色を青色にします。
②ボタンの背景色は、薄い青色にします。③ボタンの文字色は白色にしましょう。④マウスがのったときは、黒色になるように設定します。

設定コードは以下のようになります。赤い字が変更した部分でうす。

/* (2-3) ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/

.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:3px dotted #3300CC;/*----ボタンの枠線の太さ 枠線の種類 枠線の色を設定---①*/
background:#6666FF;/*---ボタンの背景色の設定---②*/
color:#ffffff !important;/*---ボタンの中の文字色の設定---③*/
}

/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#000000;/*---ボタンにマウスを合わせた時に変化する色の設定---④*/
}

上記の設定をした場合の変更イメージは以下画像のようになります

 

image-11036649864-11523299406

 

いろいろ試してみましょう。

あなたのブログの背景やサイズにあわせてタイトルの文字をカスタマイズしてみてください。

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ