Blogger:RSS登録に説明文を入れた時にハマった罠

Blogger の「RSS登録」ガジェットへ説明文を挿入した時にハマった現象について記載します。



初期の RSS登録のガジェットは次のように非常にシンプルです。

デフォルトの RSS 登録ガジェット

そこで、「RSSをRSSリーダへ登録しておくと、新着記事を簡単にチェックできるようになります！」という説明文を表示して、RSS登録の意味を表示したいと思いました。

そのために、テンプレートの HTML を編集して、

  <b:widget id='Subscribe1' locked='false' title='RSS登録' type='Subscribe'>
    <b:includable id='main'>
        <b:if cond='data:isPublic'>
          <div style='white-space:nowrap'>
            <b:if cond='data:title != &quot;&quot;'>
              <h2 class='title'>
                <data:title/>
              </h2>
            </b:if>
            <div class='widget-content'>
              <p>RSSをRSSリーダへ登録しておくと&#12289;新着記事を簡単にチェックできるようになります&#65281;</p>
              <b:loop values='data:feeds' var='feed'>
<!-- 以下略 -->

赤字で示した HTML を追加しました。
それで、説明文が表示できるようになっただろうと思い、結果を表示してみると次のように改行してほしいところで改行されず、隣の投稿を表示する領域を浸食していました。

説明文が隣の投稿を表示する領域を浸食

理由を調べたところ、RSS登録ガジェットの場合、今回挿入した説明文の上位の要素でスタイルシートとして、white-space:nowrap; が指定されていました。

これにより、本来の要素の幅を超えて、中身が外に飛び出していました。

そこで、説明文を次のように修正しました。

              <p style='white-space: normal;'>RSSをRSSリーダへ登録しておくと&#12289;新着記事を簡単にチェックできるようになります&#65281;</p>

スタイルとしてwhite-space: normal;を指定することで、上位要素の幅に収まるようにしました。

結果として、次のようにちゃんと説明文が折り返されるようになりました。

説明文が上位要素の幅で折り返されている