忍者ブログ
*ADMIN*

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

≪ 2024.11│ 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 ≫
2024-11-22(Fri)

[PR]

×

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

author:あるふぁ [06:44:00]│ Comment(-) │ Trackback(-) │〆

│▲

2006-04-08(Sat)

左右メニューブロックの作り方

カスタマイズBBSの左右メニューの創り方？という質問のところでも書いた内容の＋αです。

まず、左右メニューの作り方はおおむね３つです。
①テーブルを使う
②スタイルシート(CSS)で2カラムを２つ使う
③スタイルシート(CSS)で全てどちらかの方向に寄せる


これらがいわゆる左右メニュー（自分の場合は３カラムと呼んでます）の作り方になると思います。
どのサイトもこのどれかに含まれます。
①のテーブルが一番崩れにくいです。でも、HTMLとしてはよろしくない。
②と③はCSS制御が難しく、失敗するとすぐ崩れます。また、ブラウザやOS間の誤差に悩まされます。

カスタマイズBBSのほうでは②の2カラムを２つ使うというを参考に挙げさせていただきました。
ただ、もうちょっと分かりやすくこちらにも書いておくことにします。
▼作り方の詳細
①テーブルを使う
　これは省略します。
　（普通にテーブルの使い方を知っていればできるので）

②スタイルシート(CSS)で2カラムを２つ使う

　BBSでも書いた方法です。色をつけてもう少しわかりやすくしてあります。idは忍者ブログの新規テンプレートのものに改良を加えました。

出来上がりのイメージは↓のようになります。
３カラム説明
青く表示された２カラムとピンクで表示された2カラムをそれぞれ作ります
<body>
<div id="MainBlock">
　<div id="WraperBlock">
　　<div id="PluginBlockLeft">
　　左側に表示するプラグインカテゴリー
　　</div><!--//PluginBlockLeftの閉じタグ//-->
　　<div id="EntryBlock">
　　記事部分を表示
　　</div><!--//EntryBlockの閉じタグ//-->
　</div><!--//WraperBlockの閉じタグ//-->
　<div id="PluginBlockRight">
　右側に表示するプラグインカテゴリー
　</div><!--//PluginBlockRightの閉じタグ//-->
</div><!--//MainBlockの閉じタグ//-->
</body>
これがHTMLのソースになります。
追記：忍者ブログの新規テンプレートにはMainBlock(mainBlockだったかも？)とEntryBlockはありますが他はないので追加してください。
これにスタイルシートで幅などを指定していきます。
/*全体*/
body {
text-align:center; /*ブログ本体をセンタリング*/
}
/*ブログが表示される部分*/
div#MainBlock {
margin:0px auto;/*ブログ全体をセンタリング*/
width:740px;/*ブログが表示される幅*/
text-align:left;/*bodyでセンタリングしたのを戻す*/
}
/*左側のプラグイン＋記事表示部分*/
div#WrapperBlock {
width:540px;/*記事部分と左メニューを合わせた部分の表示幅*/
float:left;/*このブロックを左に寄せる*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*記事表示部分*/
div#EntryBlock {
width:340px;/*記事部分の表示幅*/
float:right;/*このブロックを右に寄せる*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*左メニュー*/
div#PluginBlockLeft {
width:190px;/*左メニューの表示幅*/
float:left;/*このブロックを左に寄せる*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*右メニュー*/
div#PluginBlockRight {
width:190px;/*右メニューの表示幅*/
float:right;/*このブロックを右に寄せる*/overflow:hidden;/*はみ出した要素を隠す*/

}
/*フッターブロック*/
div#FooterBlock {
clear:both;/*回り込みを全て解除*/
}

これで３カラムが出来上がります。
後はそれぞれの部分に表示したいソースを入れればOKです。
追記：それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。
また、なるべく骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。

③スタイルシート(CSS)で全てどちらかの方向に寄せる
今度は2カラムを２つ使うのではなく全てをどちらかに寄せてしまう方法です。
（SeeSaaブログの公式テンプレはこの方法を使ったのがあります。）
<body>
<div id="MainBlock">
　<div id="PluginBlockLeft">
　　左側に表示するプラグインカテゴリー
　</div><!--//PluginBlockLeftの閉じタグ//-->
　<div id="EntryBlock">
　　記事部分を表示
　</div><!--//EntryBlockの閉じタグ//-->
　<div id="PluginBlockRight">
　右側に表示するプラグインカテゴリー
　</div><!--//PluginBlockRightの閉じタグ//-->
</div><!--//MainBlockの閉じタグ//-->
</body>
HTMLソースはこんな感じ。普通に表示したい部分を上から順に並べます

この場合スタイルシートはこうなります。
float指定は全て左寄せにします。
/*全体*/
body {
text-align:center; /*ブログ本体をセンタリング*/
}
/*ブログが表示される部分*/
div#MainBlock {
margin:0px auto;/*ブログ全体をセンタリング*/
width:740px;/*ブログが表示される幅*/
text-align:left;/*bodyでセンタリングしたのを戻す*/
}
/*左メニュー*/
div#PluginBlockLeft {
width:190px;/*左メニューの幅*/
float:left;/*全てを左寄せ*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*記事表示部分*/
div#EntryBlock {
width:340px;
float:left;/*全てを左寄せ*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*右メニュー*/
div#PluginBlockRight {
width:190px;/*右メニューの幅*/
float:left;/*全てを左寄せ*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*フッターブロック*/
div#FooterBlock {
clear:both;/*回り込みを全て解除*/
}


という感じに指定しても３カラムになりますよ～
追記：それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。
また、なるべく骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。
PR

author:あるふぁ [15:30:32]│ Comment(4) │Trackback() │〆

[カスタマイズ]テンプレート

│▲

３カラムの骨組み← HOME →共有テンプレート「蒼」
＊COMMENT-コメント-
▽役に立ちました＾＾
元々２カラムのテンプレートを３カラムにカスタマイズしようとしてうまくいかなかったのですが、ここを読んで、ようやく変更することができました。なんせ、ブログカスタマイズを始めたばかりどころか、３日前までは「カラム」の意味すらわからなかったところから始めたもので。。。ほぼ５日間完徹でhtmlとcssを覚えたというところです＾＾；
そんな自分にとって、この記事本当に分かりやすかったです＾＾
ありがとうございました。

注：このコメントはキャッシュを元にした再現です
本来の投稿日時は｢2006-04-08-Sat 18:39:46｣でした。
posted by 光咲【ひさ】 URL ::2006-05-31-Wed 13:03:15 ::EDIT
△Re:役に立ちました＾＾
光咲さんはじめまして

５日間完徹!?
それはすごい。

この記事、役に立ったようでよかったです。
FC2でブログ開設されてるんですね～
(FC2なら確かカスタマイズ・マニュアルのところに３カラムの方法、あったかも･･･)

注：このレスは再現です。元の投稿時間は｢2006-05-26-Fri 11:59｣でした。
あるふぁ│2006-05-31-Wed 13:04
▽無題
ア･･･本当だ間違えていました。
で、おっしゃるとおりにしてみたのですが
どうにも改善されません。根本的にどこが間違っているのでしょうか。
ﾎﾝﾄ何度もすいません。

追伸
/*プラグイン表示箇所全体の設定*/
.PluginBlock {
width: 220px;
text-align: left;
float: left;
}

↑の部分は勝手に切り取ってしまってよかったのでしょうか。

注：このコメントはキャッシュを元にした再現です
本来の投稿日時は｢2006-04-08-Sat 18:39:46｣でした。
posted by 悶左衛門 URL ::2006-05-31-Wed 12:54:12 ::EDIT
△Re:無題
>ア･･･本当だ間違えていました。
>で、おっしゃるとおりにしてみたのですが
>どうにも改善されません。根本的にどこが間違っているのでしょうか。
>ﾎﾝﾄ何度もすいません。
>
>追伸
>/*プラグイン表示箇所全体の設定*/
>.PluginBlock {
>width: 220px;
>text-align: left;
>float: left;
>}
>
>↑の部分は勝手に切り取ってしまってよかったのでしょうか。

切り取って平気です。

ってか駄目でしたか？
う～ん、もう一回ソース見させていただきますね～

追記：新規テンプレートがなにやらおかしいですね。
何もしてないのにプレビューでカラム落ちしてます。
プレビュー機能追加の影響かもしれません。
今、３カラムの骨組み自分でも作ってみてます。
もう少ししたら記事にできるかな？と思います。

さらに追記：
http://start.blog.shinobi.jp/Entry/40/
↑のところで骨組みだけ作りました。
これを参考に組みなおしてみてください

注：このレスは再現です。元の投稿時間は｢2006-04-08-Sat 22:44｣でした。
あるふぁ│2006-05-31-Wed 12:58
▽うおっ！？
一応入れ替えたり加えたりしてみました。
で、ヒドイ有様になってしまいました。
何故でしょうか？
http://3530.blog.shinobi.jp/

注：このコメントはキャッシュを元にした再現です
本来の投稿日時は｢2006-04-08-Sat 17:48:53｣でした。
posted by 悶左衛門 URL ::2006-05-31-Wed 12:53:16 ::EDIT
△Re:うおっ！？
>一応入れ替えたり加えたりしてみました。
>で、ヒドイ有様になってしまいました。
>何故でしょうか？
>http://3530.blog.shinobi.jp/

入れるスタイルシートが違うようです。
③のほう入れてませんか？
最初のコメントにどこに入れたらいいかと聞かれているものは③のほうです。
②のほうは、もうチョイ↑です。
具体的に言えばWrapperBlockの指定があるほうが②のスタイルシートです。
（ピンクと青でスタイルシートが書かれているほうといったほうがいいかも）

右メニューを↓になおして、
/*右メニュー*/
div#PluginBlockRight {
width:190px;/*右メニューの表示幅*/
float:right;/*このブロックを右に寄せる*/
}
さらに
/*左側のプラグイン＋記事表示部分*/
div#WrapperBlock {
width:540px;/*記事部分と左メニューを合わせた部分の表示幅*/
float:left;/*このブロックを左に寄せる*/
}
を入れてみてください。

注：このレスは再現です。元の投稿時間は｢2006-04-08-Sat 18:15｣でした。
あるふぁ│2006-05-31-Wed 12:57
▽ありがとうございました
カスタマイズBBSでのレスありがとうございましたm(__)m
結局よく分からないので2番目の方にしようかと思って今いじくってみてます。
超初心者なので質問なのですが、

/*左メニュー*/
div#PluginBlockLeft {
width:190px;/*左メニューの幅*/
float:left;/*全てを左寄せ*/
}
/*記事表示部分*/
div#EntryBlock {
width:340px;
float:left;/*全てを左寄せ*/
}
/*右メニュー*/
div#PluginBlockRight {
width:190px;/*右メニューの幅*/
float:left;/*全てを左寄せ*/
}

上の部分はどこに入れればいいのでしょうか。

新規テンプレートを作るときのサンプルと入れ替えなければならないのでしょうか。（←？）

注：このコメントはキャッシュを元にした再現です
本来の投稿日時は｢2006-04-08-Sat 16:27:23｣でした。
posted by 悶左衛門 URL ::2006-05-31-Wed 12:51:55 ::EDIT
△Re:ありがとうございました
>カスタマイズBBSでのレスありがとうございましたm(__)m

わざわここまでありがとうございます。

>結局よく分からないので2番目の方にしようかと思って今いじくってみてます。
>超初心者なので質問なのですが、
>
>/*左メニュー*/
>div#PluginBlockLeft {
>width:190px;/*左メニューの幅*/
>float:left;/*全てを左寄せ*/
>}
>/*記事表示部分*/
>div#EntryBlock {
>width:340px;
>float:left;/*全てを左寄せ*/
>}
>/*右メニュー*/
>div#PluginBlockRight {
>width:190px;/*右メニューの幅*/
>float:left;/*全てを左寄せ*/
>}
>
>上の部分はどこに入れればいいのでしょうか。

左右のメニューに関しては新しくスタイルシートに書き加える必要があります。
真ん中の記事部分については、新規テンプレートでは

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width: 550px;
float: left;
text-align: left;
}
となっているのがこれと同じになります。

>新規テンプレートを作るときのサンプルと入れ替えなければならないのでしょうか。（←？）
そうですね。ない部分はHTMLもスタイルシートも付け加えないといけないことになりますね。

追記：新規テンプレートを使った３カラムにする方法をもうちょっと考えて見ます。編集機能も使えるようにしておきたいですし。
中途半端な説明はかえってわかりづらいですよね。ごめんなさいo( _ _ )o

注：このレスは再現です。元の投稿時間は｢2006-04-08-Sat 17:21｣でした。
あるふぁ│2006-05-31-Wed 12:56
＊COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
　
Name：
Title：
Mail：
Url：
Color：
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆
Decoration： Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message：
Pass： ※編集時に必要です。
Secret： 　※チェックすると管理者へのみの表示となります。
＊TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
←No.44No.43No.42No.41No.40No.39No.37No.36No.35No.34No.33→
■Category
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
　徒然倶楽部 →こちらは記事の内容を下に移転＆閉鎖しました。
　現在は十六夜's Blogがメインブログになってます。
 　Alphaの小部屋･･･BOOKLOGで作った本棚
　Mixi･･･参加中のSNS
　十六夜-the sixteeth night-･･･現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況：Windows XP SP2
ブラウザ：主にFirefox　他IE、Opera等
解像度：1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ１件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
10

12
日 月 火 水 木 金 土
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
■CM&TB
●コメント

●トラックバック
    Scrollbar ONorOFF
    ■NinjaLink
    ■Thanks
    テンプレートを作成するに当たってよく利用させていただいているサイト様です。
    ■QRcode
    QRコードをクリックするとメールフォームが開きます。
    メールフォームでPCから携帯にこのブログのURLを送ることができます

    もし、携帯電話で表示されきれない～とご不満の方はこちらのアプリを導入してみることをお勧めします。

    無料体験できるのでぜひお試しください♪
    ■EntryNavigation
    ≪ *44*43*42*41*40*39*37*36*35*34*33* ≫
    ■Template
    ○公開したテンプレのプレビュー

    ブルーチャイナ
    詳細     		ブルーチャイナ
    詳細
    Gray2block
    詳細     		China
    詳細     		Gray
    詳細
    JapanBlue
    詳細     		碧
    詳細     		蒼
    詳細
    ○公開された携帯用テンプレのプレビュー

    The Leaf
    詳細
    ○忍者ブログで共有化中のテンプレ

    ●Alternation-緑×白-
    記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
    パンくずナビも付いてます♪

    ●The Leaf
    初の携帯用テンプレート。さわやかな感じに仕上げてみました
    絵文字使用。トップページにカテゴリー表示アリ。

    ●ブルーチャイナ
    涼しげなチャイナ風左右メニューテンプレ。
    ｢China｣の色違いのような感じですが、配置は違いますのでご注意ください。
    ※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
    ⇒ピンクチャイナ

    ●Gray2block
    ノート風テンプレ｢Gray｣の２カラム版です。
    ●China
    かわいい系の３カラムテンプレート。イメージはチャイナ風♪
    同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
    ⇒China-BlueVer-

    ●Gray
    灰色のノート風罫線テンプレ。追記開閉式の３カラムです。

    ●JapnBlue
    サッカー日本代表ユニフォームなテンプレ。追記開閉式
    ※このテンプレには２カラムバージョンもあります。
    ⇒JapanBlueの２カラム版

    ●碧-midori-
    淡いパステルグリーンのテンプレ。追記開閉式

    ●蒼
    画像使用なしの５ブロックテンプレ。

    Scrollbar ONorOFF

    ○広告




    ■Recommend
    ○ルナエンバシージャパン

    ストレイシープがなんだかかわいくて好き(^-^*）

    ■Visiter