FC2blogの着せ替えブログ * ＨＴＭＬとＣＳＳの違い

- - - - - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - - - - - -

FC2blogの着せ替えブログ＞＞カスタマイズのヒント＞ ＨＴＭＬとＣＳＳの違い

ＨＴＭＬとＣＳＳの違い

ＦＣ２のブログテンプレートは、ＨＴＭＬファイルと、ＣＳＳファイルにわかれています。
テンプレートのカスタマイズで、ＨＴＭＬとＣＳＳのどちらを直したらいいの？って迷いませんか？

ＨＴＭＬやＣＳＳについての本を調べてみると、ＨＴＭＬでは、文章の構造を定義し、ＣＳＳでは、装飾や配置などの文章の体裁を設定します。
と、書いてあります。
でも、これを読んでもピンと来ないでしょう？
私はピンと来ませんでした(笑)。

ブラウザでブログを見た時に、表示される文字は、基本的に、すべてＨＴＭＬに記載されています。
そして文字は、必ず何らかのＨＴＭＬタグに挟まれています。
その、何らかのＨＴＭＬタグというのが、その構造を表す為のタグです。

ブログの場合、サーバーにアップロードし蓄積されたデータを、ＨＴＭＬ上に取り出す為に、テンプレートが必要になり、それは、テンプレートのＨＴＭＬ上では、具体的な文字では無く、そのブログサービス独自の置き換えタグを配置します。
ただし、固定でいつも決まって表示される文字（サイドバーの見だしタイトル、記事のステータス部分の一部などは、直接ＨＴＭＬに「最新のコメント」などと書かれています。
そして、基本的には、上から、表示したいものを順に、次々と記入してあります。

たとえば、記事部分の大まかな部分を大まかに（大汗）ＨＴＭＬタグにしてみると、以下のようになります。

＜div class="entry"＞
＜h2＞＜％topentry_title＞＜/h2＞
＜h3＞＜％topentry_month＞月＜％topentry_day＞日＜/h3＞
＜p class="entry_body"＞＜％topentry_body＞＜/p＞
＜p class="entry_more"＞＜％topentry_more＞＜/p＞
＜/div＞

上のタグを日本語に訳してみると、こんな感じかな？

＜ここから、記事のカタマリ＞
＜ここから、見だし２＞＜独自タグ：記事のタイトル＞＜ここまで、見だし２＞
＜ここから、見だし３＞＜独自タグ：記事の月＞月＜独自タグ：記事の日＞日＜ここまで、見だし３＞
＜段落　記事本文＞＜独自タグ：記事の本文＞＜記事本文段落終わり＞
＜段落　追記記事＞＜独自タグ：記事の追記＞＜追記記事段落終わり＞
＜ここまで、記事のカタマリ＞

これをブラウザで見ると、下のような感じになります。

明日も晴れるといいな！
３月３日

今日は久々に気持ちの良い青空が広がりました。
あしたも、晴れるといいな！
どうしてかって？それはね・・・

明日は、仕事を休んでドライブに行く予定なの。
温泉に入って、美味しい物を食べたりして。
楽しみ。

あれ？でも、見栄えが良く無いですよね？
記事のタイトルも、記事日付も、みんな左に寄っていますし、文字の色も一緒でメリハリが無いですよね？
そんな時に、利用するのがＣＳＳ（スタイルシートです）
フォント、文字色、文字の大きさ、行間、文字間、などの変更、背景に画像を貼る、細かい位置の調整、などは、ＣＳＳ（スタイルシート）で変更します。

では、記事のタイトルよりも、日付を先に（上に）表示させたい時は、ＨＴＭＬとＣＳＳ（スタイルシートです）のどちらを直したら良いのでしょうか？
正解は、ＨＴＭＬです。

日本語に訳したほう(笑)で、入れ替えてみますね。

＜ここから、記事のカタマリ＞
＜ここから、見だし２＞＜独自タグ：記事の月＞月＜独自タグ：記事の日＞日＜ここまで、見だし２＞
＜ここから、見だし３＞＜独自タグ：記事のタイトル＞＜ここまで、見だし３＞
＜段落　記事本文＞＜独自タグ：記事の本文＞＜記事本文段落終わり＞
＜段落　追記記事＞＜独自タグ：記事の追記＞＜追記記事段落終わり＞
＜ここまで、記事のカタマリ＞

どうでしょう？
＜見だし２＞の内容と＜見だし３＞の内容が入れ替わっています。
つまり、独自タグだけを入れ替えます。
ＨＴＭＬのタグはそのままです。

※ 注意 ※
見だしタグの場合、同じボックス内で（例の場合は、entryという記事のカタマリ）＜h3＞を＜h2＞のタグよりも上に配置する事は出来ません。
ご利用のテンプレートで、＜p＞や＜div＞でタイトルや日付の独自タグを挟んでいる場合は、ＨＴＭＬタグごと入れかえる事が出来る場合もあります。