アメブロカスタマイズの方法 ～次の記事への移動ボタンを可愛くする～の続きです
移動ボタンだけ変更したいときは、
アメブロカスタマイズの方法 ～準備編～
で準備をしてからこちらの設定に移ってください。
今日のプチカスタマイズはこちら
ナビゲーションバーです。
ナビゲーションバー
名前だけ聞いても、どれ？？って話ですね。
記事一覧とかを表示できるボタンのあるところです。
ここ
例えば変更するとこんな感じ
線の種類、色、太さ
と
背景の色
が変えられます
それでは、変更の仕方です
＜準備＞
まず、変更するための準備をします。
CSSの中の
--------------------------------------------*/
/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
という部分がナビゲーションバーの設定です。
border-color: rgba(0, 0, 0, 0.2);
という部分で線の色を指定しているのですが、このままだと色しか変更できないので
ここの文章を
border: 5px #6495ed;
border-style: dotted none;
に変えてください。
変更するとこうなります。
--------------------------------------------*/
/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border: 5px #6495ed;
border-style: dotted none;
background-color: #ffffff;
}
青字が変更した部分ですね。
それではどこをどう変えたらいいのかの説明をします
背景の色の変え方
background-color: #ffffff;
青字のところが背景の色です。
今は#fffff（白色）に設定されてます。
色を選ぶときにオススメのサイトはこのブログの下の方に載せてますのでお好みの色を探してみてください
線の色の変え方
border: 5px #6495ed;
青字のところが線の色です。
ここを変えるとナビゲーションバー上下の線の色が変わります。
枠線の太さの変え方
border: 5px #6495ed;
5pxというのが枠線の太さです。数字を変えると太さが変わります。
線の種類の変え方
border-style: dotted none;
青字のところが線の種類です。
今は点線（dotted）になってます。
線の種類はたくさんあるのですが、代表的なのがこちら。
いろいろ変えて試してみてください
solid：実線
dashed：破線
dotted：点線
double：二重線
＜補足＞
ここは読み飛ばしてもOKです
boder-styleで線の種類を指定してるけど、
dotted none
って二つ並んでるのはなんで？
って思うと思うのですが、2個めの指定は縦線です。
ちなみに
border-style: dotted solid;
にしてみるとこんな感じになります。
だいぶ見づらいのですが左右の赤丸のとこに直線が増えたのわかるでしょうか・・・
お好みによりますがアメブロのナビゲーションバーに関しては縦線が無いほうがいいかなぁと思うので、わざわざnoneというものを付けてます。
＜補足２＞
色見本はこちらのサイトがオススメ。
下のサイトを参考に、お好きな色に変えてみてください。
WEB色見本 原色大辞典 ←こちらをクリックするとサイトに飛べます
こんな感じで色の見本とそれぞれのアルファベットと数字の並びが書いてあります。
ちっちゃくて見づらいかもですが、たとえば左上の黒なら
#000000
とかいう感じです。
試してみるのが一番
一杯あるのでお気に入りの色を探してみてくださいね
もし、自分でやってみたけどわかんなかったー
っていう場合はお手伝いしますので、下記のお申込みフォームからお申込みください。
『アメブロプチカスタマイズ』
という名前のサービスです。
ナビゲーションバーの変更のお手伝い：500円
ボタンの変更のお手伝い：500円
ヘッダー画像設置のお手伝い：1000円
ご質問がある場合も、上のフォームからお問い合わせください
続く…かも？
こんな感じの文字列眺めてる。
