2012/06/10

[blogger]シンプルな関連記事をつけた後に、スタイルを選ぶ!「Smarter Related Posts Widget for Google Blogger - v2.0」

follow us in feedly
follow us in RSS
HTMLイメージ画像
HTML Code / Sebastian Fuss
こんばんは、すなふ(@sunafu35)です。

以前に、bloggerにシンプルな関連記事を付ける方法として、Smart Related Postsを紹介しました。

[blogger]シンプルな関連記事表示がしたい!「Smarter Related Posts Widget for Google Blogger - v2.0」! - sunabox
投稿の下に関連記事を付けるのは、是非ともしたいところですが、シンプルなのがいいと言う方に向けて。 ...

んでも、設定で「Use CSS Style?」を選んで、プレビューでリストの前に●点がつくのを確認したというのに、そういったスタイルになってくれないので、CSSを使って表示方法を変えてみましたので、その方法をご紹介です。

紹介した記事でのリストのスタイル


記事の中でリストにした時や、ソーシャルボタンを並べるのにリスト形式を使った時には、●点でるのに、なんでだ・w・


変更方法

まずは、テンプレートからデザインを変えようという人には是非覚えておいて欲しい、Chromeのデペロッパー機能で、HTMLタグを確認します。Chromeでの説明になりますけど・・・、確認したいところで右クリックして、コンテキストメニューの一番下「要素を検証」をクリックです。


要素の検証を使って、Smart Related Postsが表示されている部分を見てみると、
こんな感じの画面が、ウィンドウ下に表示されると思います。赤枠で囲んだ部分がガジェット部分。選択している箇所が、リストスタイルで表示している部分ですね。

視線をウィンドウ上に移すと、選択している箇所が分かるようになっています。
ここで確認するのは、リストタグが「.rpw」だというところ。画像では点が表示されている状態ですが、脳内変換してください。


カスタムCSS

個人的に大好き、カスタムCSS画面に移ります。
管理画面から『テンプレート>カスタマイズ>アドバンス>CSSの追加』です。

カスタムCSSの追加フォームを表示したら、そこにコードを追加します。
.rpw {
  list-style-type:disc!important;
  padding-left:20px!important;
  line-height:1.5!important;
}
上から
  • 『list-style-type』・・・ここで、リスト表示のスタイルを設定します。
  • 『padding-left』・・・表示が少し左よりな気がしたので、左にスペースを。
  • 『line-height』・・・リスト間の上下に少し余白を入れて、視覚しやすいように。
全てに「!important」を付けて、設定を上書きするように指定しています。

はい、おしまい!

これで、Smart Related Postsのリスト形式に、●点がついて、尚且つ余白を調整することが出来ますよ!


おまけ


リストスタイル『list-style-type』は以下の設定で色々な表示をすることが出来ます。
  • list-style-type: none マーカーなし
  • list-style-type: disc 黒丸
  • list-style-type: circle 白丸
  • list-style-type: square 黒四角
  • list-style-type: lower-roman 小文字のローマ数字
私が使っているのは黒丸ですね。
もっと詳しく、どんな表示なのかも見ながら決めたい方は、下記のリンクへどうぞ。

【list-style-type-スタイルシートリファレンス】

あんまり気に入った表示にならないなぁ・・・ってガジェットも、CSSでなんとかすることも結構あります。
ではまた!

2 件のコメント:

  1. 有難うございます。大変参考になりました。

    返信削除
  2. コメントありがとうございます!
    参考になってよかったです(。・ω・。)ゞ

    返信削除

Related Posts Plugin for WordPress, Blogger...