バズブーストの一般的なスタイル設定

バズブーストのスタイル設定に必要となる基本的な CSS テクニックについていくつか説明します。今回は代表的なものをいくつか挙げます。

デフォルトのビュレット (箇条書きで先頭に使用される記号) を削除する
以下に手順を説明します。ほとんどのサイトでは、次のコードを既存の CSS スタイルシートに追加することによって、バズブーストからビュレットを確実に削除することができます。

コード:

div.feedburnerFeedBlock ul { 

        margin-left:0; 

        padding-left:0; 

        list-style-type: none 

        }

タイトルと見出しの間のスペースを広げる
投稿のタイトルと見出しの間の標準スペースが狭いように思える場合は、見出しを段落のように表示することができます。このテクニックは、投稿日付を表示するかどうかに関係なく有効です。見出しの <span> を変更するには、次のようなコードを使用します。

コード:

div.feedburnerFeedBlock ul li span.headline { 

        font-weight:bold; 

        display:block; 

        margin:12px 0 0 0; 

        }

バズブーストを枠で囲む
バズブーストがページ上の他の要素よりも目立つようにするにはどのように設定したらよいか、という質問も届いています。次のスニペットを追加することで、簡単にバズブーストを「枠で囲む」ことができます。

コード:

div.feedburnerFeedBlock { 

        border:2px solid #ddd; 

        background-color:#ffe; 

        padding:12px; 

        }

「border」と「background-color」で指定されている 16 進表記のカラーコードは、好みに合わせて自由に他の値に変更することができます。直感的にわかるように「gray」や「green」といった色名表記を使用することもできます。

記事の見出しを太字にする
元の記事に移動するためのリンクを太字で表示するには、次のスニペットを使用します。

コード:

div.feedburnerFeedBlock ul li span.headline { 

        font-weight:bold; 

        }

バズブーストの CSS のデバッグ/調査に関するヒント: ソースの使用
スタイルに関する上記のヒントが機能する理由は、バズブーストのスクリプトによって出力される実際の HTML 内に、スタイルを簡単に設定できるようにするためのフックが含まれていることにあります。 CSS の細部についはここでは詳細に説明しませんが、CSS クラスや ID を使用してスタイルを適用する方法を知っているパブリッシャーは、バズブーストでその知識を活用することができます。

バズブーストのマークアップを表示して、使用できるクラス/ID を確認する最善の方法は、ブラウザでバズブーストの JavaScript ソースを直接表示することです。例として、次の URL にある FeedBurner の公式ブログ「Burning Questions」の記事「BuzzBoost」を表示してみてください。

「Burning Questions」の記事「BuzzBoost」のソースを表示 (新しいウィンドウで開きます)

見てわかるように、<span> に適用されている「headline」クラスには記事タイトルのリンクが含まれています。このクラスにより、このテキストブロックのスタイル設定が可能になっています。