ドリコムRSSをCSSでカスタマイズ

ドリコムRSSで表示される更新状況の見た目をCSSで変更することができます。

.drecom {
text-align:left;
}
div.drecom br { 
line-height: 0px; 
} 
.drecomrss_blog_list_category { 
font-weight:bold;
margin:10 10 0 0px; 
background: #DDDDFF; 
width:100%;
color:#6666FF;
} 

.drecomrss_blog_list_item { 
padding: 0px; 
font-size: 13px; 
line-height: 130%; 
border-bottom: 1px dotted #CCCCCC; 
} 
.drecomrss_blog_list_powered { 
margin-top: 5px; 
}

CSSに上枠の中に記述されている内容を追加するだけで、下のような表示に変更することができます。
ちなみにドリコムでの表示設定の表示方法を「カテゴリ別新着順」にしています。こうするとカテゴリ別に表示できてカッコいいです。

CSSでブログカスタマイズ スクロールバーの見た目を変える

スクロールバーの色をCSSで変更する方法を解説します。
指定できるプロパティは8個あります。
但しscrollbar-base-colorは、他のプロパティで指定されなかった場合に基本となる色を指定します。

具体例を見ていただいた方が早いので、まずは下枠のCSSの記述を見てください。

BODY{
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-arrow-color:#9999FF;
scrollbar-3dlight-color:#9999FF;
scrollbar-darkshadow-color:#9999FF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
}

このように指定した場合、下のようなスクロールバーになります。
各プロパティの色を変えていろいろ試してみてください。

あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも

CSSでブログのカスタマイズ 行間の幅を変える

行間が狭すぎると文章が読みにくく感じる場合があります。
そんなときは行間を広げましょう。
記述の仕方は、line-heightプロパティで行の間隔を指定します。
また、ここで指定できる行の間隔とは、行の上のラインから次の行の上のラインまでのことです。

■数値で指定する
単位をつけずに数値だけで指定した場合、行間はフォントサイズに数値を書けたものになります。

■pxやemの単位で指定する
指定した単位が行の間隔になります。

■％で指定する
フォントサイズに対する比率が行の間隔になります。

下枠の中に例を示します。

line-height:1で指定した場合

あいうえお
かきくけこ
さしすせそ

line-height:2で指定した場合

あいうえお
かきくけこ
さしすせそ

line-height:5pxで指定した場合

あいうえお
かきくけこ
さしすせそ

line-height:150%で指定した場合

あいうえお
かきくけこ
さしすせそ

CSSでブログのカスタマイズ リンク編

リンクの色・修飾・挙動のカスタマイズを解説します。
具体例を挙げて解説したほうが早いので、まずは下枠の中を見てください。
通常のリンク／実行中のリンク／訪問済のリンク／マウスオーバー中のリンク　 以上、４つの場合のリンクの色や挙動を記述できます。

a:link    {......}      /* 通常 */
a:active  {......}      /* 実行中のリンク */
a:visited {......}      /* 訪問済のリンク */
a:hover   {......}      /* マウスオーバー中のリンク*/

■色の指定
　color:#0000FF; /* リンクの色を指定 */

■リンクの修飾

　text-decoration:none;           /* 装飾無し */
　text-decoration:underline;      /* 下線 */
　text-decoration:overline;       /* 上線 */
　text-decoration:line-through;   /* 取り消し線 */

■マウスオーバー時のリンクの移動
　position:relative; top:1px; left:1px; /* リンクの相対的移動 */


下枠のようにCSSを記述した場合

a:link    {color:#33FF33;text-decoration:none;}
a:active  {color:#00FF00;text-decoration:none;}
a:visited {color:#33FF33;text-decoration:none;}
a:hover   {
  color:#FF0000;
  text-decoration:underline overline;  /* 上下線 */
  position:relative;
  top:1px;
  left:1px;
}

マウスを下のリンクに乗せて挙動を確かめてみてください。

Yahoo Japan!

CSSでブログのカスタマイズ ulタグ その２

リストのマークを画像に変更する方法を解説します。

【カスタマイズ方法】
ulタグのlist-style-imageプロパティで変更可能

ul { list-style-image:url([画像のURL]); }

[画像のURL]に画像へのURLを指定します。

以下に１つだけ例を挙げておきます。
list-style-image:url(http://blog-imgs-12.fc2.com/s/e/o/seotemplate1/point1.gif)としています。

• カスタマイズ１
• カスタマイズ２
• カスタマイズ３