スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレートの骨組みについて。

こちらもお読みください。→ 利用上の注意

06/05/18以降のものは、コンテンツ全体のブロックの名前が「div#container」になりました。
あとは同じ…ですが、「.side_body2」はなくなりました。
ちかいうちに新しいもの用を書こうと…おもってます…

この記事は、07/13以降のものが対象です。
07/13以前のものの骨組みについては、こちらをご覧ください。
各部の細かい説明にはCSSの表記を使っています。
ex) 「<h1 id="blog_title">」→「h1#blog_title
」■ 全体の構成
全体の構成は以下のとおりです。

<html>
<head>HTMLヘッダ</head>
<body>
<div id="range">
 <div id="header">ヘッダ部ナカミ</div>
 <div id="main">メイン部ナカミ</div>
 <div id="menu">メニュー部ナカミ</div>
 <div id="footer">フッタ部ナカミ</div>
</div>
</body>
</html>

div#range
コンテンツ全体のブロック。以下のブロックも全てこの中に入っています。
div#header
ヘッダ部。管理メニューリンク&RSSリンク、ブログタイトル、ブログ説明文、横カレンダー。
「cloudy_day」の場合、トップ画像はココの背景に設定しています。
div#main
エントリ表示部。「float:right;」で右寄せ。
div#manu
メニュー部。「float:left;」で左寄せ。
div#footer
フッタ部。広告表示、著作権表示。


■ ヘッダ部。
ヘッダ部の構成は以下。

<div id="header">
 <div class="admin">管理メニューリンク</div>
 <h1 id="blog_title">ブログタイトル</h1>
 <p class="blog_description">ブログ説明文</p>
 <div class="header_cal">横カレンダー</div>
</div>


■ メイン部。

<div id="main">
 <div class="section">記事</div>
 <div class="section">コメント</div>
 <div class="section">トラックバック</div>
 <div class="page">ページナビリンク</div>
</div>

エントリ、コメント、トラックバックそれぞれを、「.section」で区切ってます。
正確には「コメント」の前にページナビリンクが入ってるんですが、とりあえず省略。

■ メニュー部。

<div id="menu">
 <div class="side">メニュー</div>
 <div class="side">メニュー</div>
   以下省略…
</div>

同じくメニューひとつずつ「.side」で区切ってます。

■ フッタ部。

<div id="footer">
 <div class="ads">広告</div>
 <div class="copy">著作権表示</div>
</div>



■ #main内ブロック「.section」のナカミ。

<div class="section">
 <h2 class="entry_title">エントリタイトル</h2>
 <p class="entry_date">エントリ日付</p>
 <div class="entry_body">
  エントリ本文
 </div>
 <div class="entry_footer">エントリ情報</div>
</div>

「コメント」「トラックバック」は、エントリタイトルの場所が、
「h2.entry_title」から「h3.entry_header」に変わり、「.entry_date」がなくなります。
追記は「.entry_body」内で表示しています。
外側ブロックを使いまわしているので、コメントフォーム&コメント本文、トラックバック本文(?)も「.entry_body」内です。

■ #menu内ブロック「.side」のナカミ。

<div class="side">
 <h2 class="side_title">メニュータイトル</h2>
 <div class="side_body">メニューのナカミ</div>
</div>

↑これだけが、メニュー1つぶんです。
サンプルブロックでは、「.side_body」内でリスト(<ul><li>○○</li></ul>)を使っていますが、
リストなしでそのままナカミを入れても表示的には変わりません。
リストを使わない場合は、リストタグは削除してください。
その場合「<li></li>」だけでなく、「<ul></ul>」も削除してください。
「.side_body」についての補足


■ カレンダー
メニューブロック内の表タイプのカレンダーと、
ヘッダブロック内の横1列タイプのカレンダー、両方入ってます。
お好きなほうを使ってください。
いらないほうはブロックごとごそっと消しちゃってください。

■ 機能面
リンクターゲットは設定していません。…ので、リンクは全て同窓表示になります。
必要に応じて「target="_blank"」を追加してください。
記事数ゼロのカテゴリは表示されないようになっています。
表示したい場合は、CSSの指定「.count0」を削除してください。
スクリプトは使用していません(まだあまり必要性を感じていないので…)。

注意点
※ スクロールバーの色を設定しています。
これはWinIEのみの機能なのですが、スクロールバーが出てくるところ全部に設定してあります;;。
ページの背景色や記事部分の背景色を変える場合は、こちらもご注意ください。
「scrollbar-○○-color」というものは全てスクロールバー色についての設定です(設定1ヵ所につき7~8個書いてあると思います)。不要な場合は全てごそっと消してしまってください。

ボックスの枠線(border)や余白(padding)の設定を多用しています。
「ボックスモデルハック」という、表示崩れ回避のための「おまじない」も多用しています。
ボックスの幅、枠線の幅や有無、余白、いくつか指定しているマイナス値のマージンをいじる場合は、充分に注意してください。
(指定ミス1ヵ所で、いきなり派手に崩れたりします…;;)
ブログパーツ等の幅にも注意してください…
「cloudy_day」の場合、デフォルトではメニューのナカミの有効表示幅(?)は158px、
同じく記事部分のナカミは508pxになっています。
IE6で崩れる場合は、このへんが原因である可能性が高いと思われます。
逆に、この「おまじない」を使わなかった場合、IE6では表示崩れはおこりません。
でも、他のブラウザで見た場合、激しく崩れている可能性があります。
(特にIEユーザーのかたは、)いちど別のブラウザで確認してみることを強くオススメします。
個人的なオススメはFirefoxです(理由は一応あるけれどここでは省略)。

■ その他
不具合等、何かありましたら、是非お知らせくださいっ(必死に修正します;;)。
不明な点や、「ココいじったらいきなり崩れた!」等も、お気軽にお問い合わせください。
できる限りのことはさせていただきます。
カスタマイズで行き詰まったときも、お気軽にどうぞー。
「cloudy_day」をいちばんハデにいじりたおしているのは私自身だとおもうので(笑)、
どうぞ遠慮なくいじりたおしてやってください♪

掲示板がわりのエントリをつくりました。なにかありましたらお気軽にどうぞー。
templateBBS?


至らない点はイロイロあるかと思いますが;;、どうぞよろしくおねがいします。


「.side_body」についての補足
メニューのナカミ用ブロックは、「.side_body」と「.side_body2」の、2種類あります。
違いは、リンクではない普通の文字の色が濃いか薄いか、それだけです。
配布状態では、「Calendar」「Search」「Appendix(Profile)」が「.side_body2」、
それ以外は「.side_body」になっています。
…が、07/13以降のものは、全部「.side_body2」にしてしまっても表示的には変わりません;;。
(「.side_body」は文字色が薄いので、CSS初期状態で全てを「.side_body」にすると、プロフィール文字が薄い色になってしまいます…)
07/13以前のものは、メニューリストの日付部分(エントリタイトルやコメントタイトル等の横にくっついているやつ)がリンクになっていなかったので、その日付部分を薄い色にするために、2パターン用意していました。
現在公開中のものは、その日付部分もリンクにしました。そのため、設定を分ける必要はなくなっています。(わかりづらいですね…すみません;;)
(日付部分は、クラス「.count」で色指定しています。)
それなのに残っているのは、単にそのことを忘れてしまっていたから、なのですが;;、
なにか使い道があるかも…とも思うので(貧乏性;)、そのままにしています。
どちらか片方を「text-align: center;」とかにして、ブログパーツ用にするのもいいかもしれません(…と、いま思いつきました;;)。
スポンサーサイト

Comment

管理者だけに表示を許可する

Trackback

Trackback URL:

http://peacockblue.blog10.fc2.com/tb.php/65-9ba8625a
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。