BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ サイドバーにリストマークを付ける方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ サイドバーにリストマークを付ける方法

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

mark.jpg

 皆さん、こんにちは!

 

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

 

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

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

 

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

 

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

 

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

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



  リストマーク[1].jpg

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

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

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

 

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

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

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

 

画像のパス[1].jpg

 

 

②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;

 


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


 変更後画像[1].jpg

 

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

 

 

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

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

 

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

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

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

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

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

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

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

 

ということです。

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

 

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

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

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

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

 

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

 

 

まとめ

 

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

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

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

 

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

 

 

カテゴリ:

TOPへ