サイドバーのリンクにリストマークを付ける
今回は、サイドバーにあるリンクにリストマークをつけて分かりやすし、
クリックしてもらえるようになる方法をご紹介します。
リストマークとは？
このようにリンクの脇についている
小さいアイコン
の事です。
これが有る無いで
クリック率が全然変わってくる
のです。
また、
視認性を高めるとともに、
デザイン的にも
バランス良くしてくれるので、
付けておいたほうが
良いのです。
では、
サイドバーのリンクにリストマークを付けるカスタマイズ
①リストマーク用アイコンをあなたのPCに保存して、
【画像フォルダ】にアップロードしておきましょう。
リストマーク用アイコンはこちらにあります
【無料素材】矢印 アイコン リストマーク用
【無料素材】色んな アイコン リストマーク用
②以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。
『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*サイドバーのリストマーク*/
#recent_entries .menu_frame li,
#recent_comment li,
#theme_list li,
#archives li,
#reader li,
#bookmark li,
#favorite li{
background-image:url(画像のURLをここに入力してください);
background-repeat:no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top :1px;
}
/*サイドバーのリストマーク・ここまで*/
↑↑↑この上まで↑↑↑
赤文字の部分にあなたのお好みの『画像のURL』を貼り付けることにより、あなたの好みのスタイルに変更できます。
もし、画像がずれてしまう場合は青文字の部分の数字を変えてみてください。
（おそらくこのままで大丈夫だと思います。）
<< 関連記事 >>
アメブロ ヘッダー画像の変更方法
記事内のリンクを自動で強調する方法
【無料素材】矢印 アイコン リストマーク用
【無料素材】色んな アイコン リストマーク用
【無料素材】色んな アイコン リストマーク用
【11px × 11px】サイズの小さな色んなアイコンです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
取り扱い注意点
・この記事内で素材として提供しているもの全てに関して、無料でご利用いただけます。
・素材の直リンクはNGです。
※直リンクとは？
このページにある画像を右クリックして、URLを取得して画像を使用することです。
ちゃんと素材をあなたのPCにダウンロード（保存）して、
あなたのアメブロの【画像フォルダー】にアップロードしてから
使用してください。
・商用利用、加工も全てOKです。
しかし、販売するのは禁止させていただきます。
・この記事にある素材をお持ち帰りしましたら、
一言コメントいただけるとありがたいです。
この記事の素材はこちらのサイトからお借りしたものです。
このアイコンの使用については、
WEBデザイナーが作った超シンプル素材集様の利用規約
に従っております。
<< 関連記事 >>
リストマークって？？
【無料素材】色んな アイコン リストマーク用
追加有！【無料素材】矢印 アイコン リストマーク用
といっても、アメブロ限定ではないのでご自由にお使いください。
今回は、リストマーク用で使える
【11px × 11px】サイズの小さな矢印アイコンです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
取り扱い注意点
・この記事内で素材として提供しているもの全てに関して、無料でご利用いただけます。
・素材の直リンクはNGです。
※直リンクとは？
このページにある画像を右クリックして、URLを取得して画像を使用することです。
ちゃんと素材をあなたのPCにダウンロード（保存）して、
あなたのアメブロの【画像フォルダー】にアップロードしてから
使用してください。
・商用利用、加工も全てOKです。
しかし、販売するのは禁止させていただきます。
・この記事にある素材をお持ち帰りしましたら、
一言コメントいただけるとありがたいです。
この記事の素材はこちらのサイトからお借りしたものです。
このアイコンの使用については、
WEBデザイナーが作った超シンプル素材集様の利用規約
に従っております。
<< 関連記事 >>
アメブロ ヘッダー画像の変更方法
記事内のリンクを自動で強調する方法
【無料素材】矢印 アイコン リストマーク用
【無料素材】色んな アイコン リストマーク用