ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ サイドバーにリストマークを付ける方法
投稿日: 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; 画像を縦横に何個も並べて表示するか 1回だけ表示(no-repeat)
background-position:left center;画像の位置について 左右軸 上下軸(今回は左寄せの中央揃え)
ということです。
最初の部分が変更を加える項目を示しているので、
.recentEntriesMenu li{ とすると 最新の記事 の項目が
.themeMenu li{ とすると テーマ の項目が
.recentCommentMenu li{ とすると 最近のコメント の項目が
それぞれ変更できます。もちろん先ほどの文をコピーして頭だけ変えることでできます。
理解が深まれば余白のpxを変更してマーク位置を微調整したりなど、さらにカスタマイズできますね!
まとめ
上手くできましたでしょうか?
オリジナルマークを作るもよし。Webなどで素材を集めて使うもよし。
素敵なリストマークでブログを素敵に着飾っちゃいましょう!
でも著作権には注意してね!