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

HTML Code / Sebastian Fuss

こんばんは、すなふ(@sunafu35)です。

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

投稿の下に関連記事を付けるのは、是非ともしたいところですが、シンプルなのがいいと言う方に向けて。 ...

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

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

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

要素の検証を使って、Smart Related Postsが表示されている部分を見てみると、

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

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

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

カスタムCSSの追加フォームを表示したら、そこにコードを追加します。

.rpw {
  list-style-type:disc!important;
  padding-left:20px!important;
  line-height:1.5!important;
}

上から

全てに「!important」を付けて、設定を上書きするように指定しています。

はい、おしまい！

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

リストスタイル『list-style-type』は以下の設定で色々な表示をすることが出来ます。

私が使っているのは黒丸ですね。
もっと詳しく、どんな表示なのかも見ながら決めたい方は、下記のリンクへどうぞ。

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

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

Pages