サイドメニューの各一欄部分にリストマーク画像を表示する方法

アメブロカスタマイズで自分らしい空間を作る技 サイドメニューの各一欄部分にリストマーク画像を表示する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロカスタマイズ用『CSS編集用デザイン』の『サイドメニューの各一欄部分にリストマーク画像を表示する方法』をご紹介します。

リストマーク画像とは、記事冒頭の画像のように、一覧の各項目の左側に表示される小さい画像のことを言います。

CSSを編集する

さて早速ですが、CSSの編集で、以下のようなコードをアメブロのユーザーCSSの最後に追加して下さい。

.recentEntriesMenu li{
  padding-left:16px;
  background-image:url(『最新の記事』用画像URL);
  background-repeat:no-repeat;
  background-position:left center;
}
.recentCommentMenu li{
  padding-left:16px;
  background-image:url(『最近のコメント』用画像URL);
  background-repeat:no-repeat;
  background-position:left center;
}
.themeMenu li{
  padding-left:16px;
  background-image:url(『テーマ』用画像URL);
  background-repeat:no-repeat;
  background-position:left center;
}
.archiveMenu li{
  padding-left:16px;
  background-image:url(『月別』用画像URLf);
  background-repeat:no-repeat;
  background-position:left center;
}
.readerMenu li{
  padding-left:16px;
  background-image:url(『このブログの読者』用画像URL);
  background-repeat:no-repeat;
  background-position:left center;
}
.favoriteMenu li{
  padding-left:16px;
  background-image:url(『お気に入りブログ』用画像URL);
  background-repeat:no-repeat;
  background-position:left center;
}
.bookmarkMenu li{
  padding-left:16px;
  background-image:url(『ブックマーク』用画像URL);
  background-repeat:no-repeat;
  background-position:left center;
}

画像URLには、リストマークとして表示したい、小さい画像のURLを設定します。

緑文字部分は、画像を表示するための左余白の大きさです。

使用する画像によっては調整が必要になってくると思います。

なお、今回は、素材を用意できていませんが、かわりに僕がいつもお世話になっているサイトをご紹介します。

フリーWEB素材サイト「DOTS DESIGN」さんです。

商用でも使える小さい画像ファイルを、びっくりするくらいたくさん無償提供してくださっている、とってもありがたいサイトです。

もちろん、リストマーク用の画像もたくさんありますよ。

『サイドメニューの各一欄部分にリストマーク画像を表示する方法』の説明は以上です。

上手に使うと、一覧が見やすく、かっこ良くなるカスタマイズ方法ですので、よかったらやってみてくださいね。

アメブロカスタマイズで自分らしい空間を作る技