アメブロ サイドバーのリストにリストマークをつけたりしましょう。

アメブロ サイトバーのリストにリストマークを付ける

アメブロのサイドバー
項目が増えると、ちょっと見ずらい!!

リストマークを付けて、
すっきりさせましょう。

 

 

アメブロのサイドバーは、3カラムにすると、
幅が狭いものと、幅が広いものに分かれるんですね。

 

2カラムだと、幅広いサイドバーの設定となります。

 

私のアメブロもそうなんですが、
3カラムの設定で、狭いほうのサイドバーに
テーマ(カテゴリですね)を設置しているので、
項目が多いと、ちょいと見ずらいですよね。

 

以前の記事でも書いているのですが、
関連記事などもそうですが、ちょっと目立たせてあげると、
PVが増えたり、滞在時間が増えたりするんです。
【アメブロ 関連記事のプチカスタマイズ】

 

サイドバーのテーマ(カテゴリ)は、訪問者にとっては、
目次ですが、検索エンジンでもこの【テーマ(カテゴリ)】のくくりで、
表示される場合があるんですね。

 

結構テーマが、ガッツリ増えてくると、
なんかよくわかりませんよね。

 

このブログでも、ちょっと前にカテゴリーの整理をしました。

 

カテゴリーやテーマが増えるのは仕方ないけれども、
訪問者にとってはどうでしょう?

 

項目が多くてたくさんあってステキ!!
って思う方と、なんかたくさんありすぎで、うざい!!

こんな感じで分かれるかと思います。

 

通常のテンプレートを使っていると、
このテーマ(カテゴリ)の装飾、例えば項目の部分に、
リストマークがついているものと、ついていないものがありますよね。

 

サイドバーの部分は、先ほども書いたように、狭い場所です。

 

その狭い場所で、いかに読者さんに解りやすく、
見てもらいやすくするかということを、考える必要もあるんですね。

 

それが、小さなアイコンである【リストアイコン】なんです。

 

こんな小さなものなのに、結構いい仕事するんですわ!!

 

このリストアイコンがあるとないとでは、大違い!!

 

ぐっちょーねの、項目を以外とすっきり見せる効果があります。

 

通常のCSS変更ができないテンプレートでも、
フリースペースやフリープラグインを使えば簡単に設置出来ますので
やってみて!!

 

こういうプチカスタマイズから、始めると、
テンプレートの改造も楽しくなりますよ!!

 

今回は、私のサーバーにアップロードしてある、
リストアイコンを使っていますが、リストアイコンやミニアイコンを
無料素材のサイトからゲットして、お使いくださいね。

 

 

設置方法

今回は、CSS変更ができないテンプレートを、
サンプルとして使用しています。

 

このテンプレートは、実際はミニアイコンが設置しているんですが、
ちょっと小さい。

これは、これでとっても可愛いので、
そのまま使ってもいいのですが、リストアイコンの追加・変更のサンプルとして、
変更するようにしました。
こんな感じね。

サイドバーにリストマークを追加

 

 

今回利用したリストアイコンは、無料素材からゲットしたものです。
こちらを参考にしてくださいね。
【フリー素材提供サイト】

 

 

まず、使いたいリストアイコンは、予めアップロードしておいてくださいね。

 

もしこのコードのリストアイコンでよければ、
このままのコードをお使いくださいね。

 

サイドバーのそれぞれのリストは、
skinSubList という名前で設定を行っています。

上の図のように、リストの前にアイコンを付けて、
リストの下に点線を引くという設定をします。

 

 

<style type="text/css">
.skinSubList li{
margin-bottom:3px;
padding:0 0 5px 24px;
background:url(<a href="http://ame-ha.biz/img/list-mark.gif)">http://ame-ha.biz/img/list-mark.gif)</a> no-repeat;
border-bottom:1px dotted #b3b3b3;
line-height:1.2em;
}
</style>

 
background:url()は、好きなアイコンに変更してくださいね。

↑この()の中に、アップロードしたアイコンのURLを書き換えてくださいね。

 

このコードをCSS変更可能なテンプレートであれば、
CSSのところに。

 

CSS変更ができないテンプレートをお使いの場合は、
このまま、フリープラグインに設置してください。

 

 

フリープラグインは、文字数の制限がありますので、
節約したい場合、もしくはもういっぱいだ!!
っていう方は、フリースペースに追加してください。

 

 

フリースペースの場合は、改行があると表示できないので、
下記のコードを貼りつけてくださいね。

 

 

<style type="text/css">.skinSubList li{margin-bottom:3px;padding:0 0 5px 24px;background:url(リストアイコンをアップロードした先のURLを記入してください。) no-repeat;border-bottom:1px dotted #b3b3b3;line-height:1.2em;}</style>

 
※上記のコードは、改行を削除してありますので、
このまま使用してくださいね。

 

できたら、プレビューで確認するか、
保存してブログを確認してください。

 

こんな感じになったら、OK!!です。
リストアイコン設置後

 

サンプルブログなので、項目が少ないですが、
テーマ(カテゴリ)や、【最新の記事】などは、だんだん多くなっていくものです。

 

テーマ(カテゴリ)の項目数が多いのは、
あまりよろしくないので、たまに整理することをおすすめしますが、
こうやって、リストアイコンをつけるだけで、
読者さんに対して、優しいブログになるはず!!

ぜひ、お試しあれ!!

 

 

アメブロビズ2(AmebloBiz2)で作ったテンプレートは、
リストアイコンもかわいいですよ。

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ