レイアウト変更の方法
2008.07.13 ｜Category …サンプル記事
「若葉 *Wide3」を例に。
両サイドのプラグイン部分の幅を広げ、位置を上にずらしてみる方法。
※HTMLとCSS、両方を変更するので、慣れてない方はゆっくり焦らず少しずつどうぞ。
▽以下少々長い説明
●まずプラグインの幅を広げる場合。「CSS」に注目。
/*プラグイン表示箇所全体*/
.PluginBlock {
width:180px; /* ←この数値を変更（左のブロック） */
float:left;
}
.PluginBlockR {
width:180px; /* ←この数値を変更（右のブロック） */
float:right;
}/*記事ブロック全体*/
#EntryBlock {
margin:0px 180px; /* ←この数値を右・左のブロック幅に合わせて変更 */
padding:10px;
background-image:url(http://bfile.shinobi.jp/3314/bg8.gif);
}
※左右ブロック各々240pxまでは、この３箇所の変更で広げられます。それ以上の幅にする場合は、あと２箇所CSSの変更が必要。
●プラグイン部分を上にずらす場合。「HTML」に注目。
<div id="All">
<div id="mainBlock">
という２行があります。この２行をカット。HTMLの少し上に戻って「<div id="Admin">～</div>」の行と「<div id="TopBlock">」の行の間にペースト。
※ここで一旦「HTML編集のプレビュー」ボタンを押して見てみてください。
はい、ブログタイトル部分とパンくずナビ（「HOME>>」の部分）がプラグインの下に潜ってますね。
そこで「CSS」に注目。
/*一番上のブロック*/
#TopBlock {
margin:0px 20px 10px 20px; /* ←この数値を変更（例:0 100px 10px 220px） */
（略）
}/*ページリンクブロック*/
.PageLinkBlock {
padding:2px 20px;
margin:10px 220px; /* ←適切な数字でmarginを追加 */
}
※数値はお好みに合わせて試行錯誤してみてください。
レイアウトの変更方法は１つだけとは限りません。別の方法（背景の横線を活かしたい場合）として、「<div id="EntryBlock">」の中にブログタイトルも入れ込んでしまう手もあります。自分の好み通りのレイアウトにカスタマイズするには、テンプレートのHTMLとCSSをきちんと把握する必要があります。色々試してみてください。
ちなみに、うちの記事幅可変のテンプレート作成の際に参考にさせていただいたのは
「CSSによる段組（マルチカラム）レイアウト講座」様です。CSSレイアウトについて詳しく知りたい方はGO。
●Thanks Comments
無題
NUI様
こんにちは。お礼が大変遅くなってすいません；
独学で少しいじっていたせいか、一部表示が崩れているのに気付きまして…
（目立たないところだったので気付くのが遅すぎました）
すでにどこがおかしいのかわからない状態だったので、
テンプレートをDLし直し、始めからやり直すことになってしまいましたが、
おかげさまで、ほぼ希望通りにカスタマイズ出来ました！
わかりやすく教えて下さってありがとうございました！！
でもあと少しだけ、気になるところがありまして…；、
サイドバーはちゃんと一番上まで上げられたのですが、
ブログタイトル欄の両側に、境目が見えないので
この境目部分にも背景を表示したいのです。
あと、記事の日付とカテゴリの行を右寄せにしたいのですが、
「text-align:right;」を、どこに指定すればいいのかがわかりませんでした；
もし可能であれば、またご助言頂けたら幸いです。
重ね重ね申し訳ありませんが、どうぞ宜しくお願い致します。
>「<div id="EntryBlock">」の中にブログタイトルも入れ込んでしまう手もあります。
これはちょっと、知識が足りなくてどんな感じになるのか想像がつきませんね；
今の状態でほぼ満足してますので、ここまで高度なカスタマイズはしなくてよさそうです。
「CSSによる段組（マルチカラム）レイアウト講座」様のご紹介も
ありがとうございました！
興味深いので、時間のある時にでもじっくり拝見させて頂きたいと思います。
それでは、長文にて失礼しました；
Re:無題
>「text-align:right;」を、どこに指定すればいいのかがわかりませんでした；
CSSの「.EntryDate」です。
>でもあと少しだけ、気になるところがありまして…；、
>サイドバーはちゃんと一番上まで上げられたのですが、
>ブログタイトル欄の両側に、境目が見えないので
>この境目部分にも背景を表示したいのです。
これに対するヒントが↓です。
>>「<div id="EntryBlock">」の中にブログタイトルも入れ込んでしまう手もあります。
>今の状態でほぼ満足してますので、ここまで高度なカスタマイズはしなくてよさそうです。
完全に満足されるには、その「高度なカスタマイズ」をする必要があるわけです。
少しきつい物言いに感じられるかもしれませんが、今ゆきさんがしておられるのは「カスタマイズ」ではなく、ご自分専用テンプレートの「注文」です。
私は供出した共有テンプレートのカスタマイズは推奨しており、出来る限りお手伝いもしたいと考えていますが、レイアウトの変更にはある程度の基礎知識と労力が必要です。知識を身につけるためにも、その方法についてはご自分で模索されることを強くお薦めします。
もう少しゆっくりHTML＆CSSについての基礎知識を押さえてから、テンプレートの構造を「読んで」みてください。きっと、人に聞かなくても簡単に分かるようになります。ご自分のペースで頑張ってみてください。
※もしこの返信がご不快なようでしたら、非表示にしますので、その旨ご連絡ください。
無題
NUI様
こんばんは。
私の不躾な書き込みで不愉快な思いをさせてしまって、
こちらこそ申し訳ございませんでした。
HTML＆CSSの知識につきましては、わかりやすい所から勉強中なのですが、
忍者さんの独自構文に悩まされ混乱してばかりいて、
なかなか思うように変更出来なかったために
テンプレートの作者様にすがってしまいました…。
>「<div id="EntryBlock">」の中にブログタイトルも入れ込んでしまう手もあります。
これに関しては、何度読み返しても言われている意味がよくわからなかったので、
（タイトルを入れ込んでどうなるのかが想像つきませんでした）
軽はずみなお返事をしてしまってすいません。
これが、タイトルの両サイドにも背景を出すヒントだったのですね。
それにも気付かずに、的外れな事を聞いてしまいました…。
この度は不愉快な思いをさせたにも関わらず、
色々とアドバイスをありがとうございました。
これからはもっと精進します。
NUI様も創作活動頑張って下さい。
素敵なテンプレートをありがとうございました。
Re:無題
不愉快というのではなかったのですが。。きつい言い方をしてすみません。
けれど、自分の思い通りのテンプレを作るには、人に訊くよりとにかく自分で試してみるのが一番いいと思うのですよ。（自分がそうだったもので。。）
忍者ブログのテンプレ作成システムはリアルプレビューがあるので試行錯誤するのに便利がいいですし。
頭ひねって試して失敗して、そのうち、あ、そうか！と自分で解答に辿り着いた時の達成感は格別だと思うのです。所謂アハ体験でしょうか。
焦らないで、悩んで試すことも楽しんでみてください〜。