2006-04-28(Fri)
基礎からのカスタマイズ１
新しく登録したテンプレート、simple_base_oneをカスタマイズしていく連載記事です。初めてテンプレートを弄る人にも分かりやすく書いていきますんで参考にしていただければと思います。
あくまでもオサーンが作るテンプレートに関した記事ですので、他の作者さんが作ったテンプレートには当てはまらない部分も出てきます。そこいら辺は適宜読み替えて応用してください。
まずはテンプレートの構造から覚えましょう。これを知っておくとメニューの配置を変更したり、後から3カラムに変更したりと色々と弄れるようになりますので。まずは下の図を見て下さい。
これがsimple_base_oneの大まかなレイアウトです。
赤い部分がブログタイトルの枠
ベージュの部分がプラグイン１とプラグイン２が表示されるメニューの枠
ピンクの部分がプラグイン３と記事が表示される枠
シルバーの部分が著作権表示部分
この4つの枠を更に外側の緑色の枠で囲っています。
緑色の枠で囲うのは中央寄せで表示するためです。
更にそれぞれの枠の中には小さな枠が組み込まれてます。
こうして図形にしてみると色々なことが分かります。
例えば、メニューを右側にするにはベージュの部分とピンクの部分を入れ替えればいいんだな。とか、ピンクの記事部分の横幅を拡げるためには緑色の部分も拡げなくてはいけないな。といったことです。
と、こんな感じで進めていたのではいつまで経っても本格的なカスタマイズまで進めませんので、実践的な内容を盛り込みながら進めていきたいと思います。
では次の図をご覧下さい。
これは各ブロック（枠）に対して実際のテンプレート内でどのような名前で指定しているかを示したものです。いやいや、横文字だらけですが難しくはありません。まずはsimple_base_oneのテンプレート編集画面を開いてみて下さい。
上の方からゆっくり見ていくと以下のような部分があると思います。
<!-- 一番外側のブロック(枠)ここから最終行付近までcontainer -->
<div id="container">
これは「ここから緑色の部分（container）が始まっていることを表しています。
上の図を見るとベージュの部分やピンクの部分は緑に枠の中に収まっているので、実際のテンプレートのソースでもベージュやピンクの部分は緑の部分より下（中に）記述されることになります。
では次にテンプレートの編集画面からスタイルシートを見て下さい。
上からゆっくり見ていくと以下のような部分が見つかります。
/* 一番外側の大きなブロック 全体の文字色や横幅もここで決めます*/
#container {
width:720px; /* 全体の横幅 */
margin:0px auto 0px auto; /* 全体のセンタリング（中央寄せ）に必要 */
color:#333333; /* 全体の文字色 */
padding:0px 0px 0px 0px; /* 全体を枠で囲う場合に使います */
text-align:left; /* 全体の枠内を左寄せに戻します */
}
HTMLの方に <div id="container"> と「container」という記述があって、
スタイルシートでも #container と「container」と記述してあります。
これを相互に照らし合わせてみると、
一番外側の枠（緑色の部分）はcontainerという名前が付けられていて、横幅が720px 文字の色が#333333(ダークグレー)に指定されているんだな
ということが分かります。
このようにそれぞれのブロック（枠）には名前が付けられていて、HTMLとスタイルシートで相互に連携し合ってデザインされています。
これを理解することが自由自在にカスタマイズするための第一歩。これさえ理解してしまえば「どこを弄っていいか分からない」ということが無くなります。
例えば著作権表示の文字の大きさを変えたい場合は・・・・。
そうです、著作権表示部分は footer という名前が付けられていますからスタイルシート内で footer と言う場所を見つければいいんです。
ということで、カスタマイズをする前にまずはHTMLとスタイルシートをザッとでいいから読んでみて下さい。simple_base_oneではなるべく詳しい説明書きを加えたつもりですので、HTML内の大まかな順番や、スタイルシートでどこをどう設定しているかが何となくお分かり頂けると思います。
ということで第一回目は終わりです。次回は文字色を変更してみたいと思います。
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; のサンプル →このページです
とまぁ、テンプレートも自分好みに弄っていくことで使いやすくなっていきます。作者がカスタマイズを禁止していなければ自由に弄って構わないとオサーンは解釈しています。もちろんオサーンのテンプレートはガンガン弄っていただいて構いません。
