サイドバーのリンクの横に画像(リストマーク)をつける方法【アメーバブログカスタマイズ方法】 | アメーバブログカスタマイズ講座 

サイドバーのリンクの横に画像(リストマーク)をつける方法【アメーバブログカスタマイズ方法】

アメーバブログのサイドカラムのカスタマイズの中でもリンクをどれだけクリックしやすいか?


これはとても重要になります。


デザイン的に言えば


「読みやすさ」
「見やすさ」
「クリックしやすさ」


は、最低限必要になります。


あなたのブログのサイドカラムのリンクは見やすいですか?


今回はその中でも重要な”リストマーク”です。

下記の画像を見て欲しいのですがリンクの左側に画像がありますね。


この画像があるかないかによって読みやすくなっているのがわかりますか?



かなり見やすくなっているのがわかると思います。



まず、画像を作ってください。



一応、画像は下記からダウンロードできるようにしましたのでアップードしてください。

※ダウンロードは右クリックして”対象ファイルに保存”をクリックしてください。


>>画像のダウンロードはコチラ


そしたら画像をアップロードしていただいてそのURLを下記のタグに挿入してください。



/*サイドバーのリストマーク*/
#recent_entries .menu_frame li,
#recent_comment li,
#theme_list li,
#archives li,
#reader li,
#bookmark li,
#favorite li{
background-image:url(画像);
background-repeat:no-repeat;
background-position: 0px;
padding-left: 22px;
padding-top :10px;
}
/*サイドバーのリストマーク・ここまで*/


そしたらCSS編集の一番下にコピー&ペーストで貼り付けてください。


サイドバーのリンクの横に画像がつくと思います。


 

読者登録 アメンバー申請をする