CSSでサイドバーの一覧にリストマークをつける | 熊谷市 WEBコンサルタントあんちゃんブログ

熊谷市 WEBコンサルタントあんちゃんブログ

ホームページ制作からSEO対策・総合WEBコンサルタント【熊谷市マイアイランド】

少しでもサイドバーメニューを見やすくするためにリストマーク画像を使用する方法を紹介します。
プチカスタマイズではありますが、とても大切なことだと思います。

サイドと言う狭い領域の中で、すこしでも読者にわかりやすく見てもらうための小さな工夫の積み重ねがファンを増やす要因に繋がるのではないでしょうか。

ブログをカスタマイズするには、CSS編集が可能なデザインタイプに変更する必要があります。

まず、デザインの変更をクリック→カスタム可能→CSS編集用デザイン→レイアウトを選び→適応するをクリックで完了。

(旧スキン)


使用するリスト画像(13px~14px)

$ホームページ制作 熊谷市 自力作成支援ブログ  $ホームページ制作 熊谷市 自力作成支援ブログ  $ホームページ制作 熊谷市 自力作成支援ブログ  $ホームページ制作 熊谷市 自力作成支援ブログ

こちらの画像は、自由にお持ち帰りください。


CSSの編集ページから下記のコードを追加をします。
追加するCSSコード
下記をコピーして張り付けるだけでok!

/*============ ☆ 最近の記事 リストマーク CSSコード ☆ ==============*/
#recent_entries
.menu_frame ul li{
background: url(http://stat.ameba.jp/user_images/20110814/21/myisland/43/98/g/o0012001311417030249.gif) no-repeat;
padding-left: 18px;
}


/*============ ☆ テーマ別 リストマーク CSSコード ☆ ==============*/
#theme_list
.menu_frame ul li{
background: url(http://stat.ameba.jp/user_images/20110814/21/myisland/5a/e7/g/t00120012_0012001211417079608.gif) no-repeat;
padding-left: 18px;
}


/*============ ☆ アーカイブ リストマーク CSSコード ☆ ==============*/
#archives
.menu_frame ul li{
background: url(http://stat.ameba.jp/user_images/20110814/21/myisland/da/2d/g/o0012001311417031268.gif) no-repeat;
padding-left: 18px;
}


/*============ ☆ ブックマーク リストマーク CSSコード ☆ ==============*/
#bookmark
.menu_frame ul li{
background: url(http://stat.ameba.jp/user_images/20110814/21/myisland/72/58/g/t00140014_0014001411417118611.gif) no-repeat;
padding-left: 18px;
}

アップした画像ファイル名のURL



その他のリストマークCSSコードです。

/*============ ☆ 最近のコメント リストマーク CSSコード ☆ ==============*/
#recent_comment
.menu_frame ul li{
background: url(アップした画像ファイル名のURL) no-repeat;
padding-left: 18px;
}


/*============ ☆ ブログの読者 リストマーク CSSコード ☆ ==============*/
#reader
.menu_frame ul li{
background: url(アップした画像ファイル名のURL) no-repeat;
padding-left: 18px;
}


/*============ ☆ お気に入りブログ リストマーク CSSコード ☆ ==============*/
#favorite
.menu_frame ul li{
background: url(アップした画像ファイル名のURL) no-repeat;
padding-left: 18px;
}