忍者ブログ

Customize in Ninja Blog

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

2017.01│ 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

[PR]

×

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

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

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

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


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

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

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

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

出来上がりのイメージは↓のようになります。
3カラム説明
青く表示された2カラムピンクで表示された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;/*回り込みを全て解除*/
}

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

③スタイルシート(CSS)で全てどちらかの方向に寄せる
今度は2カラムを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;/*回り込みを全て解除*/
}


という感じに指定しても3カラムになりますよ~
追記:それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。
また、なるべく骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。
PR
*COMMENT-コメント-
▽役に立ちました^^
元々2カラムのテンプレートを3カラムにカスタマイズしようとしてうまくいかなかったのですが、ここを読んで、ようやく変更することができました。なんせ、ブログカスタマイズを始めたばかりどころか、3日前までは「カラム」の意味すらわからなかったところから始めたもので。。。ほぼ5日間完徹でhtmlとcssを覚えたというところです^^;
そんな自分にとって、この記事本当に分かりやすかったです^^
ありがとうございました。

注:このコメントはキャッシュを元にした再現です
本来の投稿日時は「2006-04-08-Sat 18:39:46」でした。
△Re:役に立ちました^^
光咲さんはじめまして

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

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

注:このレスは再現です。元の投稿時間は「2006-05-26-Fri 11:59」でした。
▽無題
ア・・・本当だ間違えていました。
で、おっしゃるとおりにしてみたのですが
どうにも改善されません。根本的にどこが間違っているのでしょうか。
ホント何度もすいません。

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

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

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

切り取って平気です。

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

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

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

注:このレスは再現です。元の投稿時間は「2006-04-08-Sat 22:44」でした。
▽うおっ!?
一応入れ替えたり加えたりしてみました。
で、ヒドイ有様になってしまいました。
何故でしょうか?
http://3530.blog.shinobi.jp/

注:このコメントはキャッシュを元にした再現です
本来の投稿日時は「2006-04-08-Sat 17:48:53」でした。
△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」でした。
▽ありがとうございました
カスタマイズ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」でした。
△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もスタイルシートも付け加えないといけないことになりますね。

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

注:このレスは再現です。元の投稿時間は「2006-04-08-Sat 17:21」でした。
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■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一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

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

■Calendar
12

02
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
■CM&TB
●コメント

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

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

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

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

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

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

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

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

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

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

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

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


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

Scrollbar ONorOFF

○広告




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

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

■Visiter