1. TOP
  2. アメブロカスタマイズ
  3. (3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ

(3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ

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

>>こちらもどうぞ

このコラムは連載コラムです。今回はCSS編集用画面の中の「(3-9) サイドバーの リスト画像、ボーダー」エリアのカスタマイズの解説を行っています。

では早速解説に行きましょう。

サイドメニューのボーダーをカスタマイズしよう

今回はサイドメニューのボーダー線をカスタマイズする方法です。

今回の論点は少々マニアックな論点ですが、一応解説させていただきます☆

ゴールイメージは?

サイドメニューのボーダーとはどの部分のことなのかを以下に掲載しましたのでイメージをつかんでください。

image-11085518594-11627322789

のイメージのようにそれぞれの、ボーダーの色と太さをカスタマイズする方法を解説しましょう。

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-9) サイドバーの リスト画像、ボーダー」のカスタマイズ,その2です。それぞれのリストの前に画像を置くカスタマイズにチャレンジしてみましょう。

最後までありがとうございました

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

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