2006-04-20(Thu)
引用部分の動作指定
共有テンプレートとして登録するテンプレは人様にお使いいただくわけですから十分な動作チェックをして万全の状態で送り出すように心がけてはいるのですが、細かい部分の動作はお使いいただく方の好みによって違ってきますのでコチラ側で設定していない部分もあるんです。
その最たる部分が引用のはみ出し設定でして、ニュース記事などを多く引用する方やテンプレのソースを貼る機会の多い人には重要度の高い部分です。
通常、引用として扱う文章は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; のサンプル →このページです
とまぁ、テンプレートも自分好みに弄っていくことで使いやすくなっていきます。作者がカスタマイズを禁止していなければ自由に弄って構わないとオサーンは解釈しています。もちろんオサーンのテンプレートはガンガン弄っていただいて構いません。
2006-04-20(Thu)
Blue Moon Third Division
Blue Moonを3カラム化して微調整を加えたものです。管理画面ではblue_moon_3divisionでお探しいただけます。サンプル
多少実験的な部分が含まれていますので頻繁に仕様変更するかもしれません
2カラム版からの大きな変更点としてフォントを変えています。テンプレのイメージに合わせるために従来のsans-serifからmonoに変更しました。
変更前 変更後
変更前の丸みを帯びたフォントがお好みの方はスタイルシートの以下の部分から変更が可能です。
/* 背景画像と背景色の指定 */ body {
background:url("http://blog50.fc2.com/i/image1000/file/blue_moon_back.jpg") bottom right no-repeat fixed;
background-color: #000000;
font-size: 100%;
/* font-family:"Courier New", verdana, arial,"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", "\30D2\30E9\30AE\30CE\20Pro\20W3", HiraKakuPro-W3, Osaka, sans-serif; */
font-family:"Courier New", Courier, mono;
line-height:140%;
text-align:center;
}font-family:"Courier New", Courier, mono;の部分を削除していただき、
その上の行の"Courier New", と /* と */を削除することで変更が可能です。(赤字の部分を全て削除)
記事本文と追記部分の区別を付けやすくするために点線を引いています。
変更前 変更後
点線が不要な方はスタイルシートの該当部分を削除してください(スタイルシートをご覧頂ければ説明が書いてあります)
3カラムに関してはまだまだ手探りでやっているのでお気付きの点がありましたらご指摘いただけるとありがたいです。よろしくお願いいたします。
