アメブロで個人事業主が集客するための方法 -43ページ目

サイドバーのリンクにリストマークを付ける


あなたのアメブロが読者を魅了するオリジナルデザインにカスタマイズできる~簡単なCSS編集方法-記事用自分


今回は、サイドバーにあるリンクにリストマークをつけて分かりやすし、
クリックしてもらえるようになる方法をご紹介します。

※リストマークとは?
アメブロを簡単にカスタマイズできます~CSS編集方法-リストマーク説明 このようにリンクの脇についている
小さいアイコン横三角の事です。

これが有る無いで
クリック率が全然変わってくる
のです。

また、
視認性を高めるとともに、
デザイン的にも
バランス良くしてくれるので、
付けておいたほうが
良いのです。


では、
サイドバーのリンクにリストマークを付けるカスタマイズスパナ

リストマーク用アイコンをあなたの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アメブロを簡単にカスタマイズできます~CSS編集方法-リスト赤5 2アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黄5 3アメブロを簡単にカスタマイズできます~CSS編集方法-リスト緑5 4アメブロを簡単にカスタマイズできます~CSS編集方法-リスト青5 5アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黒5 6アメブロを簡単にカスタマイズできます~CSS編集方法-リスト白5 7アメブロを簡単にカスタマイズできます~CSS編集方法-リスト紫5


8アメブロを簡単にカスタマイズできます~CSS編集方法-リスト赤2 9アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黄2 10アメブロを簡単にカスタマイズできます~CSS編集方法-リスト緑2 11アメブロを簡単にカスタマイズできます~CSS編集方法-リスト青2 12アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黒2 13アメブロを簡単にカスタマイズできます~CSS編集方法-リスト白2 14アメブロを簡単にカスタマイズできます~CSS編集方法-リスト紫2


15アメブロを簡単にカスタマイズできます~CSS編集方法-リスト赤6 16アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黄6 17アメブロを簡単にカスタマイズできます~CSS編集方法-リスト緑6 18アメブロを簡単にカスタマイズできます~CSS編集方法-リスト青6 19アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黒6 20アメブロを簡単にカスタマイズできます~CSS編集方法-リスト白6 21アメブロを簡単にカスタマイズできます~CSS編集方法-リスト紫6


22アメブロを簡単にカスタマイズできます~CSS編集方法-リスト赤3 23アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黄3 24アメブロを簡単にカスタマイズできます~CSS編集方法-リスト緑3 25アメブロを簡単にカスタマイズできます~CSS編集方法-リスト青3 26アメブロを簡単にカスタマイズできます~CSS編集方法-リスト黒3 27アメブロを簡単にカスタマイズできます~CSS編集方法-リスト白3 28アメブロを簡単にカスタマイズできます~CSS編集方法-リスト紫3



取り扱い注意取り扱い注意点
 ・この記事内で素材として提供しているもの全てに関して、無料でご利用いただけます。

 ・素材の直リンクはNGです。
   ※直リンクとは?
    このページにある画像を右クリックして、URLを取得して画像を使用することです。

  ちゃんと素材をあなたのPCにダウンロード(保存)して、
  あなたのアメブロの【画像フォルダー】にアップロードしてから
  使用してください。

 ・商用利用、加工も全てOKです。
  しかし、販売するのは禁止させていただきます。

 ・この記事にある素材をお持ち帰りしましたら、
  一言コメントいただけるとありがたいです。

 ※この記事の素材はこちらのサイトからお借りしたものです。
    アメブロを簡単にカスタマイズできます~CSS編集方法-素材バナー
   このアイコンの使用については、
   WEBデザイナーが作った超シンプル素材集様の利用規約 別ウインドウに従っております。



<< 関連記事 >>
▲リストマークって??
▲【無料素材】色んな アイコン リストマーク用

追加有!【無料素材】矢印 アイコン リストマーク用

アメブロカスタマイズ用素材を配布します。

といっても、アメブロ限定ではないのでご自由にお使いください。

今回は、リストマーク用で使える
【11px × 11px】サイズの小さな矢印アイコンです。

1アメブロを簡単にカスタマイズできます~CSS編集方法-矢印赤4 2アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黄4 3アメブロを簡単にカスタマイズできます~CSS編集方法-矢印緑4 4アメブロを簡単にカスタマイズできます~CSS編集方法-矢印青4 5アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黒4 6アメブロを簡単にカスタマイズできます~CSS編集方法-矢印白4 7アメブロを簡単にカスタマイズできます~CSS編集方法-矢印紫4


8アメブロを簡単にカスタマイズできます~CSS編集方法-矢印赤3 9アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黄3 10アメブロを簡単にカスタマイズできます~CSS編集方法-矢印緑3 11アメブロを簡単にカスタマイズできます~CSS編集方法-矢印青3 12アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黒3 13アメブロを簡単にカスタマイズできます~CSS編集方法-矢印白3 14アメブロを簡単にカスタマイズできます~CSS編集方法-矢印紫3


15アメブロを簡単にカスタマイズできます~CSS編集方法-矢印赤5 16アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黄5 17アメブロを簡単にカスタマイズできます~CSS編集方法-矢印緑5 18アメブロを簡単にカスタマイズできます~CSS編集方法-矢印青5 19アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黒5 20アメブロを簡単にカスタマイズできます~CSS編集方法-矢印白5 21アメブロを簡単にカスタマイズできます~CSS編集方法-矢印紫5


22アメブロを簡単にカスタマイズできます~CSS編集方法-矢印赤1 23アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黄1 24アメブロを簡単にカスタマイズできます~CSS編集方法-矢印緑1 25アメブロを簡単にカスタマイズできます~CSS編集方法-矢印青1 26アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黒 27アメブロを簡単にカスタマイズできます~CSS編集方法-矢印白1 28アメブロを簡単にカスタマイズできます~CSS編集方法-矢印紫1


29アメブロを簡単にカスタマイズできます~CSS編集方法-矢印赤2 30アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黄2 31アメブロを簡単にカスタマイズできます~CSS編集方法-矢印緑2 32アメブロを簡単にカスタマイズできます~CSS編集方法-矢印青2 33アメブロを簡単にカスタマイズできます~CSS編集方法-矢印黒2 34アメブロを簡単にカスタマイズできます~CSS編集方法-矢印白2 35アメブロを簡単にカスタマイズできます~CSS編集方法-矢印紫2



取り扱い注意取り扱い注意点
 ・この記事内で素材として提供しているもの全てに関して、無料でご利用いただけます。

 ・素材の直リンクはNGです。
   ※直リンクとは?
    このページにある画像を右クリックして、URLを取得して画像を使用することです。

  ちゃんと素材をあなたのPCにダウンロード(保存)して、
  あなたのアメブロの【画像フォルダー】にアップロードしてから
  使用してください。

 ・商用利用、加工も全てOKです。
  しかし、販売するのは禁止させていただきます。

 ・この記事にある素材をお持ち帰りしましたら、
  一言コメントいただけるとありがたいです。

 ※この記事の素材はこちらのサイトからお借りしたものです。
    アメブロを簡単にカスタマイズできます~CSS編集方法-素材バナー
   このアイコンの使用については、
   WEBデザイナーが作った超シンプル素材集様の利用規約 別ウインドウに従っております。



<< 関連記事 >>
▲アメブロ ヘッダー画像の変更方法
▲記事内のリンクを自動で強調する方法
▲【無料素材】矢印 アイコン リストマーク用
▲【無料素材】色んな アイコン リストマーク用