オサーンのFC2ブログテンプレート

共有テンプレートとして登録するテンプレは人様にお使いいただくわけですから十分な動作チェックをして万全の状態で送り出すように心がけてはいるのですが、細かい部分の動作はお使いいただく方の好みによって違ってきますのでコチラ側で設定していない部分もあるんです。
その最たる部分が引用のはみ出し設定でして、ニュース記事などを多く引用する方やテンプレのソースを貼る機会の多い人には重要度の高い部分です。

通常、引用として扱う文章はblockquoteとというタグで囲みます。FC2の記事を書く画面にもありますね「Q」ってボタンがそれです。
んで、この中に長い英文やURLを記述すると途中で改行されずにはみ出してしまいます。その結果IEではサイドバーが落ちるという現象が起こって見栄えが悪くなります。IE以外では隣の部分にはみ出した部分が重なります。これも見栄えが悪いし読みにくいです。

文章の途中で強制的に改行させる方法として word-break や word-wrap を用いる方法があるのですが、これはIEでのみサポートされているプロパティでして、他のブラウザでは何の役にも立たない使い道の限られるプロパティです。
そこで、はみ出した部分を強制的にカットするかスクロールさせて表示するかの設定をすることで見栄えが悪くなるのを回避させてやるようにします。

まずはスタイルシートの中からblockquoteを定義している箇所を探します。オサーンのテンプレートではカレンダーの設定のちょっと上に書くようにしています。

以下のような箇所が見つかったら好みに合わせてはみ出した部分の処理を決めてやります。

blockquote {
width:95%;
padding:10px;
margin: 20px 0px;
border: 1px dashed #003399;
overflow: ここに好みの値を入れます:
}
overflow: hidden; はみ出し部分を非表示にします
overflow: scroll; はみ出した部分をスクロール表示にします
overflow: auto; ブラウザにお任せです

実際にはこんな感じになります
blockquote {
width:95%;
padding:10px;
margin: 20px 0px;
border: 1px dashed #003399;
overflow: auto:
}

こうして設定してあげることで表示の崩れを防げます
overflow: hidden; のサンプル (Blue Moon Third Divisionの記事)
overflow: scroll;　のサンプル　→このページです

とまぁ、テンプレートも自分好みに弄っていくことで使いやすくなっていきます。作者がカスタマイズを禁止していなければ自由に弄って構わないとオサーンは解釈しています。もちろんオサーンのテンプレートはガンガン弄っていただいて構いません。