Monkey Talk 忍者BLOGテンプレート構成　[覚書]

Monkey Talk

猿話的雑記帳

PAGE LINK 124 123 121 122 119 117 118 105 103 102 104

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 (Sat) [Entry URL]

忍者BLOGテンプレート構成　[覚書]

忍者BLOGテンプレート構成ですが
新規テンプレート作成を開くと
赤い部分
HTMLファイル
青い部分
CSSファイル（構成設定ファイルの方が正解かも・・）
でブログデザインの構築が出来る様に構成されています。

構造自体は基本的なHTMLとCSSの知識があれば
理解できる内容となっており、

HTMLファイルは
「CSSファイルとブログデータ（自身ブログの記事等々）を読み込ませて反映させる記述構成」
CSSファイルでは
「スタイル指定での各項目の指定」
を行っています。

因みに新規テンプレート作成/編集画面では主にCSSの変更支援機能となっており、
HTML部分はコピペして書き込んでください的な仕様となってます、

試しにプレビュー表示を行うと
デフォルト状態でのブログ画面（サンプル）を見ることが出来ます、

そのデフォルト状態での構成ですが、
※左画像参照
CSS指定にてメインの枠を作り、
その中に3段組、4つのブロックを配置して
さらにその中に細かな各項目の枠を入れ込んで
表示されるように作られているようです、
CSSファイルとHTMLファイルを
読んでいくと、XXXBlockと記述してある部分が
いくつも有りますが、主となるブロックが下記の

1.ブログ表記部分全体を囲っている
mainBlock
2.見出しブログタイトルと説明文表示する
TopBlock　（画像赤部分）
3.記事・コメント・トラックバック等を表示する
EntryBlock　（画像青部分）
4.プラグイン（カレンダーやリンクetc.）部分を表示する
PluginBlock　（画像緑部分）
5.広告が表示されている部分（著作権等表示部分）
FooterBlock　（画像オレンジ部分）

mainBlockで囲まれた4つのBlockで構成されています、

この内容を自分好みに変更する場合、大雑把に・・

1.HTMLファイルでテーブルレイアウトを作成した上でその中に各ブロックを割り当てる方法
2.CSSファイル側からレイアウト指定を行う方法
3.CSSファイル側でブロックを増やしHTMLでも応じて割り振りを行う方法

等、同じレイアウトを考えても3つほどの作成手順が考えられます、
1の場合が私としては楽なので当ブログでは今現在基本的にはその方法を採用しているのですが、
実際の所、2もしくは3での方法が無理の無い綺麗な作成方法として一般的です。

たとえば・・・
1.HTMLファイルでテーブルレイアウトを作成した上でその中に各ブロックを割り当てる方法
をメインとして考えた場合、

HTMLファイルの
<body>~</body>間を簡略化すると・・・

こんな感じ▽になっています。

<div id="mainBlock">　
<div id="TopBlock">　
-------------------------------------------------------
「一番上のブロック（タイトルが書かれる場所）の設定」
「ページタイトル文字部分・文字色の設定」
「ページタイトルの下に来るブログの説明文書」
に関する記述が入ってます
-------------------------------------------------------
</div>　
<div id="EntryBlock">　
-------------------------------------------------------
「記事ブロック用デザイン」
「各コメント表示部分の設定」
「トラックバック表示部分の設定」
「pagelink記述」
「pagelink_prev/HOME/pagelink_next記述」
等に関する記述が入ってます
*項目が多い為上から3項目目迄は詳細割愛
-------------------------------------------------------
</div>　
<div class="PluginBlock">　
-------------------------------------------------------
「環境設定：プラグインの設定
プラグインカテゴリー1～5」
「プラグイン表示箇所全体の設定」
「プラグイン表示箇所の背景や余白設定」
「プラグインのタイトル（名称）部分の設定」
「プラグインの説明部分の設定」
「プラグインが表示される場所の設定」
に関する記述が入ってます
-------------------------------------------------------
</div>　
<div id="FooterBlock">　
-------------------------------------------------------
「一番下のブロックの設定」
に関する記述が入ってます
-------------------------------------------------------
</div>　
</div>

と割と簡潔に纏まってます、

要は<div>~</div>で囲まれた部分を
HTMLでレイアウトした内容に入れ込むだけなので
5つのBlockが入っていた大枠のmainBlock記述部分は取ってしまって、
下の様にHTMLファイルでレイアウトを用意した上で
各セルの中にBlock部分を割り振っていきます。

[サンプル]

<TABLE border="0" width="150">
<TBODY>
    <TR>
      <TD height="20" colspan="2">

      <DIV id="TopBlock">トップブロック</DIV>

      </TD>
    </TR>
    <TR>
      <TD width="100" height="100">

      <DIV class="CommentBlock">コメントブロック</DIV>

      </TD>
      <TD width="50" height="100">

      <DIV class="PluginBlock">プラグインブロック</DIV>

      </TD>
    </TR>
    <TR>
      <TD height="20" colspan="2">

      <DIV id="FooterBlock">フッターブロック</DIV>

      </TD>
    </TR>
</TBODY>
</TABLE>

注：テーブルサイズは記事の大きさに合わせたのでリサイズして下さい

ここ迄の作業で配置の作業は大体終わるのですが、
各BlockのサイズがCSSファイル側で指定されており
このままだときれいに収まりません、

そこでCSSファイル側の記述を
下記のように変更する必要があります、

[例：トップブロック部分]

/******************************
トップブロック用デザイン
******************************/
/*一番上のブロック（タイトルが書かれる場所）の設定*/
#TopBlock {
width:770px;
height: 200px;
text-align: left;
}

width:で幅height:で高さをピクセル指定してあるので
テーブルのサイズに合わせればきれいに収まるようになります。

HTMLでのレイアウト指定の利点は
レイアウトが複雑な場合などCSSで指定を行うと
かなり~~メンドクサイ~~ 細やかな指定やブラウザ対策を行わなければ
レイアウトが崩れてしまうような場合でも、
強制的に固定できたり、作成時にレイアウトチェックが簡単です。
（ブラウザ随時見れるしCSSと切り分けて考えられる部分が増える為）

2008/12/25 (Thu) [Entry URL] [HP&BLOG]Template Trackback() Comment(0)

この記事にコメントする

・・・プレビュー中・・・

この記事へのトラックバック

この記事にトラックバックする：

≪PREVIOUS 　｜HOME｜　　　NEXT　≫

CALENDAR

2024/11

S	M	T	W	T	F	S
					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

LINK

NAME
TITLE
COLOR	▼色を選択する
E-MAIL
URL
COMMENT
PASS