サイドバーのリストを見やすくするカスタマイズ
ここでのサイドバーのリストとは、『最新記事』や『ブログテーマ一覧』、
『このブログの読者』、『お気に入りブログ』などで、
縦に並んでいるリンクの事を指します。
左画像の→の部分です。
デフォルトの状態ですと、
上下の文字の間隔がせまく、
視認性の悪い状態ですね。
このカスタマイズは結構見のがしがちですが、
リストにあるリンクから他の記事を読みにいったり、
他のブログにアクセスを送りやすくなるので、
しっかりカスタマイズして視認性を上げましょう。
でも、
「いったいどのようにカスタマイズすれば見やすくなるの？」
と疑問が出ますね。
ここでは、
リストの文字上下の『文字間隔』と『間に区切り線を入れる』というカスタマイズによって
視認性を上げてみようと思います。
では、サイドバーのリストを見やすくするカスタマイズ
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。
『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*サイドバーリストの視認性を上げる*/
#archives .menu_frame li,/*アーカイブ*/
#bookmark .menu_frame li,/*ブックマーク*/
#favorite .menu_frame li,/*お気に入りブログ*/
#reader .menu_frame li,/*このブログの読者*/
#recent_entries .menu_frame li,/*最近の記事一覧*/
#recent_comment .menu_frame li,/*最近のコメント*/
#theme_list .menu_frame li{/*ブログテーマ一覧*/
padding:5px 0px 3px 18px;/*上 右 下 左のスペース*/
border-bottom:1px dotted #d3d3d3;/*下線のスタイル*/
}
/*サイドバーリストの視認性を上げる・ここまで*/
↑↑↑この上まで↑↑↑
上記タグの中で、
『padding:5px 0px 3px 18px;/*上 右 下 左のスペース*/』
は、リストの文字間隔（位置）を指定します。
４つの数字が並んでいますが、
左の数字から、上、右、下、左からのスペースを指定するのです。
当アメブロでは、リストマークをつけているので
左のスペースは『18px』とリストマーク分のスペースを設けています。
『border-bottom:1px dotted #d3d3d3;/*下線のスタイル*/』
は、リストの文字の間に線を引いて区切るためのタグです。
ここの、
・『1px』では、線の太さを指定します。数字を変えると線の太さが変わります。
・『dotted』では、線のスタイルを指定します。ここでは破線を指定しています。
『solid』と書くと実線、『dashed』と書くと点線に変わります。
・『#d3d3d3』では、線の色を指定しています。
色に関しては、色の変更方法
の記事を参照してください。
もし、線がいらない場合は、
border-bottom:none;/*下線のスタイル*/
と変更しておいてください。
※これを残しておけば、後々に区切り線を付けたい場合に簡単に付けられますので。
このタグを追加することにより、
のように見やすいスペースと区切り線が付きます。
上の画像が僕の今のアメブロのデザインです。
区切り線を変えてみると、雰囲気がガラっと変わります。
どの線のスタイルがあなたのアメブロには合うでしょうか？
画像をクリックすると拡大表示されます。●実線を指定
●点線を指定
●線なし
<< 関連記事 >>
サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズ
サイドバーのメニュータイトル部分と枠線を付けるカスタマイズ
読者登録 画像の変更 カスタマイズ
アメブロ ヘッダー画像の変更方法