ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2014/11/04    投稿者:webコラム

　皆さん、こんにちは！

 

今回のアメブロカスタマイズはサイドバーにリストマークをつける方法をご紹介します。

 

リストマークとは、記事のタイトルやテーマなどの前につける小さいアイコン（画像）のことです。

見た目をオシャレするだけでなく、たくさんの項目をスッキリと整理させる効果もあります！

 

いつものようにCSSの部分に変更を加えていきます。

 

①リストマークにしたい画像をアップロードする

 

　はじめに、リストマークにしたい画像を用意しましょう！今回は私が自分で書いた小さい丸を使って説明します。皆さんは使いたい画像を用意してください。ウェブ検索で「リストマーク　画像」などと検索するとたくさん出てくると思います。著作権について留意し、正しく使いましょう。

今回はこの画像を使います。

↓

  

画像が用意できたらCSSの編集ページを開きます。

※CSS編集が初めての方は、アメブロのマイページから[ブログを書く]の直下にある[管理トップ]を開き、

開いた画面の左側メニューにある[デザインの変更]を選択します。そうすると画面上部に[CSSの編集]というリンクが出てくるので、そこからCSSの編集ページを開くことができます。

　

開いたページの上部に[ブログデザインヘッダ・背景用画像の追加]の欄があります。

[ファイルの選択]というボタンを押して、用意した画像を指定し、右側にあるアップロードを押します。

アップロードが完了すると自動で再度読み込みされて、追加した画像とそのurl（http～と書かれた長い文章）が表示されれば成功です！

 

 

 

②CSSにリストマークをつけるための文章を追加する

 

　次に、CSSの中身を編集していきます。　

今回編集していく部分ですが、もともとある文を改変するのではなく、新たに追加する形となるので、まずは以下の文章をコピーしましょう。

 

/*ここから

 

.recentEntriesMenu li{

  padding-left:16px;

  padding-bottom:0px;

   background-image:url(リストマークにしたい画像のurl);

  background-repeat:no-repeat;

  background-position:left center;

｝

 

/*ここまで

 

　これを追加する場所についてですが、どこでもかまいません。しかし、後から再度編集する際に見やすい場所が良いので、

 

「(3-9) サイドバーの　リスト画像、ボーダー」

 

の項目や、

 

「 (4) その他、拡張」

 

の項目に改行などでスペースを作って貼りつけると良いでしょう。

そして先ほど追加したリストマークの下に出たurlをコピーし、「リストマークにしたい画像のurl」の部分に替えて貼り付けます。

※括弧はそのまま残してください

 

.recentEntriesMenu li{

  padding-left:16px;

  padding-bottom:0px;

　background-image:url(http://～(省略)～～.jpg);

  background-repeat:no-repeat;

  background-position:left center;

｝

 

と直せたら画面一番下にある[表示を確認する]を押して見てみましょう！

 

 

こんな感じに最新記事のタイトルの前に追加したリストマークがついていたら成功です！

 

 

ここからはさらに一歩進んだ応用編。

CSSに追加した文の意味がわかればさらにカスタマイズ可能！

 

それぞれの行が表しているのは、

.recentEntriesMenu li{　→最新の記事　という項目について、

  padding-left:16px;　→　左の余白を16px

  padding-bottom:0px;　→　下の余白を0px

　background-image:url(http://～(省略)～～.jpg);　使う画像

  background-repeat:no-repeat;　　画像を縦横に何個も並べて表示するか　１回だけ表示（no-repeat）

  background-position:left center;画像の位置について　左右軸　上下軸（今回は左寄せの中央揃え）

 

ということです。

最初の部分が変更を加える項目を示しているので、

 

.recentEntriesMenu li{　とすると　最新の記事　の項目が

.themeMenu li{　　　　　とすると　　テーマ　　の項目が

.recentCommentMenu li{　とすると　最近のコメント　の項目が

それぞれ変更できます。もちろん先ほどの文をコピーして頭だけ変えることでできます。

 

理解が深まれば余白のpxを変更してマーク位置を微調整したりなど、さらにカスタマイズできますね！

 

 

まとめ

 

　上手くできましたでしょうか？

オリジナルマークを作るもよし。Webなどで素材を集めて使うもよし。

素敵なリストマークでブログを素敵に着飾っちゃいましょう！

 

でも著作権には注意してね！