(3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ
>>こちらもどうぞ
このコラムは連載コラムです。今回はCSS編集用画面の中の「(3-9) サイドバーの リスト画像、ボーダー」エリアのカスタマイズの解説を行っています。
では早速解説に行きましょう。
サイドメニューのボーダーをカスタマイズしよう
今回はサイドメニューのボーダー線をカスタマイズする方法です。
今回の論点は少々マニアックな論点ですが、一応解説させていただきます☆
ゴールイメージは?
サイドメニューのボーダーとはどの部分のことなのかを以下に掲載しましたのでイメージをつかんでください。
上のイメージのようにそれぞれの、ボーダーの色と太さをカスタマイズする方法を解説しましょう。
CSSを編集しよう
それではCSS編集用画面を開いていただき、「(3-9) サイドバーの リスト画像、ボーダー」の部分を以下のように編集してください。赤字が修正箇所
/* (3-9) サイドバーの リスト画像、ボーダー ※要素のbottomに指定すること
--------------------------------------------*/
.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:3px;
border-bottom:2px dotted #CC0000;
}
赤字の部分を修正することで太さと、色の変更が可能になります。
まず上記コードの赤字の部分を見てください。「2px」と「#CC0000」の部分が赤くなっていますね♪
まず「2px」の部分ですが、この数字を大きくすると線の太さをかえることができます。デザインのバランスにあわせて変えていただければよいですが、個人的には2pxが見やすさとしては限界なのかもしれません。
次に「#CC0000」の部分ですが、この部分がボーダー線の色をしていするコードで、「カラーコード」といいます。このコードを変更することで色を変更することができます。その他のカラーコードは当サイトの別のコラムで紹介していますのでそちらをご覧になってください。
あなたの好みに合わせていろいろ試してみましょう♪
ボーダーの太さや、色をあなた好みに変えてみましょう☆
ちなみに・・・
サイドメニューのカスタマイズも合わせて行うとさらにカスタマイズが楽しくなりますよ♪
サイドメニューの過去のコラムはこちらより参考にしてみてくださいね♪
- (3-8) サイドバー メニューのカスタマイズ①・基本理論編
サイドメニューの構造を理解しよう
- (3-8) サイドバー メニューのカスタマイズ②・背景色のカスタマイズ
サイドメニューに背景色を設定しよう
- (3-8) サイドバー メニューのカスタマイズ③・背景色のカスタマイズ(解説編その1)
サイドメニューに背景色を設定しよう(解説編その1)
- (3-8) サイドバー メニューのカスタマイズ④・背景色のカスタマイズ(解説編その2)
サイドメニューに背景色を設定しよう(解説編その2)、と実践編
- (3-8) サイドバー メニューのカスタマイズ⑤・サイドメニュータイトルの文字のカスタマイズ
サイドメニューのタイトル文字のカスタマイズ
- (3-8) サイドバー メニューのカスタマイズ⑥・サイドメニューに角丸の枠画像をつけるカスタマイズ
サイドメニューに角丸の枠をつけるカスタマイズ
- (3-8) サイドバー メニューのカスタマイズ⑦・サイドメニュータイトルに画像を設定する
サイドメニュータイトルを画像にする方法
次回は「(3-9) サイドバーの リスト画像、ボーダー」のカスタマイズ,その2です。それぞれのリストの前に画像を置くカスタマイズにチャレンジしてみましょう。
最後までありがとうございました