BlogNINJAブログを使いこなそうと始めたブログ。ないブログに表示されています。新しい記事を書く事で広告が消えます。│▲2006-04-08(Sat)左右メニューブロックの作り方カスタマイズBBSの左右メニューの創り方?という質問のところでも書いた内容の+αです。左右メニューの作り方はおおむね3つです。1テーブルを使う2スタイルシート(CSS)で2カラムを2つ使う3スタイルシート(CSS)で全てどちらかの方向に寄せるこれらがいわゆる左右メニュー(自分の場合は3カラムと呼んでます)の作り方になると思います。どのサイトもこのどれかに含まれます。1のテーブルが一番崩れにくいです。HTMLとしてはよろしくない。2と3はCSS制御が難しく、失敗するとすぐ崩れます。ブラウザやOS間の誤差に悩まされます。カスタマイズBBSのほうでは2の2カラムを2つ使うというを参考に挙げさせていただきました。分かりやすくこちらにも書いておくことにします。▼作り方の詳細1テーブルを使うこれは省略します。(普通にテーブルの使い方を知っていればできるので)2スタイルシート(CSS)で2カラムを2つ使うBBSでも書いた方法です。色をつけてもう少しわかりやすくしてあります。idは忍者ブログの新規テンプレートのものに改良を加えました。出来上がりのイメージは↓のようになります。id="PluginBlockRight">右側に表示するプラグインカテゴリー</div><!--//PluginBlockRightの閉じタグ//--></div><!--//MainBlockの閉じタグ//--></body>これがHTMLのソースになります。追記:忍者ブログの新規テンプレートにはMainBlock(mainBlockだったかも?)とEntryBlockはありますが他はないので追加してください。これにスタイルシートで幅などを指定していきます。{clear:both;/*回り込みを全て解除*/}これで3カラムが出来上がります。後はそれぞれの部分に表示したいソースを入れればOKです。追記:それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。3スタイルシート(CSS)で全てどちらかの方向に寄せる今度は2カラムを2つ使うのではなく全てをどちらかに寄せてしまう方法です。(SeeSaaブログの公式テンプレはこの方法を使ったのがあります。id="PluginBlockRight">右側に表示するプラグインカテゴリー</div><!--//PluginBlockRightの閉じタグ//--></div><!--//MainBlockの閉じタグ//--></body>HTMLソースはこんな感じ。普通に表示したい部分を上から順に並べますこの場合スタイルシートはこうなります。float指定は全て左寄せにします。{clear:both;/*回り込みを全て解除*/}という感じに指定しても3カラムになりますよ~追記:それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。[15:30:32]│Comment(4)│Trackback(0)│〆[カスタマイズ]テンプレート│▲3カラムの骨組み←HOME→共有テンプレート「蒼」*COMMENT-コメント-▽役に立ちました^^元々2カラムのテンプレートを3カラムにカスタマイズしようとしてうまくいかなかったのですが、ここを読んで、ようやく変更することができました。ブログカスタマイズを始めたばかりどころか、3日前までは「カラム」の意味すらわからなかったところから始めたもので。5日間完徹でhtmlとcssを覚えたというところです^^;そんな自分にとって、この記事本当に分かりやすかったです^^ありがとうございました。18:39:46」でした。13:03:15::EDIT△Re:役に立ちました^^光咲さんはじめまして5日間完徹!?それはすごい。この記事、役に立ったようでよかったです。注:このレスは再現です。13:04▽無題ア・・・本当だ間違えていました。おっしゃるとおりにしてみたのですがどうにも改善されません。根本的にどこが間違っているのでしょうか。ホント何度もすいません。left;}↑の部分は勝手に切り取ってしまってよかったのでしょうか。18:39:46」でした。12:54:12::EDIT△Re:無題>ア・・・本当だ間違えていました。>で、おっしゃるとおりにしてみたのですが>どうにも改善されません。根本的にどこが間違っているのでしょうか。>ホント何度もすいません。left;>}>>↑の部分は勝手に切り取ってしまってよかったのでしょうか。駄目でしたか?う~ん、もう一回ソース見させていただきますね~追記:新規テンプレートがなにやらおかしいですね。何もしてないのにプレビューでカラム落ちしてます。プレビュー機能追加の影響かもしれません。今、3カラムの骨組み自分でも作ってみてます。したら記事にできるかな?と思います。追記:http://start.blog.shinobi.jp/Entry/40/↑のところで骨組みだけ作りました。注:このレスは再現です。12:58▽うおっ!?一応入れ替えたり加えたりしてみました。ヒドイ有様になってしまいました。17:48:53」でした。12:53:16::EDIT△Re:うおっ!?>一応入れ替えたり加えたりしてみました。>で、ヒドイ有様になってしまいました。>何故でしょうか?>http://3530.blog.shinobi.jp/入れるスタイルシートが違うようです。3のほう入れてませんか?最初のコメントにどこに入れたらいいかと聞かれているものは3のほうです。2のほうは、もうチョイ↑です。具体的に言えばWrapperBlockの指定があるほうが2のスタイルシートです。{width:540px;/*記事部分と左メニューを合わせた部分の表示幅*/float:left;/*このブロックを左に寄せる*/}を入れてみてください。注:このレスは再現です。12:57▽ありがとうございましたカスタマイズBBSでのレスありがとうございましたm(__)m結局よく分からないので2番目の方にしようかと思って今いじくってみてます。{width:190px;/*右メニューの幅*/float:left;/*全てを左寄せ*/}上の部分はどこに入れればいいのでしょうか。新規テンプレートを作るときのサンプルと入れ替えなければならないのでしょうか。16:27:23」でした。12:51:55::EDIT△Re:ありがとうございました>カスタマイズBBSでのレスありがとうございましたm(__)mわざわここまでありがとうございます。>結局よく分からないので2番目の方にしようかと思って今いじくってみてます。{>width:190px;/*右メニューの幅*/>float:left;/*全てを左寄せ*/>}>>上の部分はどこに入れればいいのでしょうか。左右のメニューに関しては新しくスタイルシートに書き加える必要があります。left;}となっているのがこれと同じになります。>新規テンプレートを作るときのサンプルと入れ替えなければならないのでしょうか。ない部分はHTMLもスタイルシートも付け加えないといけないことになりますね。追記:新規テンプレートを使った3カラムにする方法をもうちょっと考えて見ます。編集機能も使えるようにしておきたいですし。中途半端な説明はかえってわかりづらいですよね。)o注:このレスは再現です。FORM-コメント投稿-この記事へのコメント投稿フォームです。Decoration:Message:Pass:※編集時に必要です。Secret:※チェックすると管理者へのみの表示となります。*TRACKBACK-トラックバック-この記事のURLとトラックバックURLです。必要に応じてご使用くださいませ。Leaf(2)NinjaBLOG(17)プレビュー用記事(6)新規テンプレいじり(17)[テンプレート]未定(0)■Search■About●このブログについて忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。_)ペコリなお、このブログで実験もしています。常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。→こちらは記事の内容を下に移転&閉鎖しました。Blogがメインブログになってます。night-・・・現在作成中のメインHP●リンクについてこのブログはリンクフリーです。解像度:1024*768●FireFox私が普段利用しているブラウザ。Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪ダウンロードは▼からどうぞ●Pingoo!忍者ブログのPing送信先は10件まで。それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。12345678910111213141516171819202122232425262728293031■CM&TB●コメントパンくずナビをつけるMichalexcire⇒(01/18)パンくずナビをつけるViktorianitemY⇒(01/17)コメントや最新記事にNew&Upマークをつけるkirara⇒(04/06)しばらく休止いたします。photo[ブログ]今日もいろいろあったんよ。■Thanksテンプレートを作成するに当たってよく利用させていただいているサイト様です。■QRcodeQRコードをクリックするとメールフォームが開きます。メールフォームでPCから携帯にこのブログのURLを送ることができますもし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。■EntryNavigation最新記事のタイトル一覧しばらく休止いたします。(12/15)・・・何ヶ月?(06/09)NinjaBlogのカテゴリーをタグクラウド風に(02/18)プラグインタイトルを虹色の文字で(02/17)リンクバナー(02/07)トラックバックを承認制にしました。○忍者ブログで共有化中のテンプレ●Alternation-緑×白-記事番号で背景色が交互に変わるちょっとおもしろテンプレ。Leaf初の携帯用テンプレート。さわやかな感じに仕上げてみました絵文字使用。トップページにカテゴリー表示アリ。●ブルーチャイナ涼しげなチャイナ風左右メニューテンプレ。「China」の色違いのような感じですが、配置は違いますのでご注意ください。※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。⇒ピンクチャイナ●Gray2blockノート風テンプレ「Gray」の2カラム版です。●Chinaかわいい系の3カラムテンプレート。同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。⇒China-BlueVer-●Gray灰色のノート風罫線テンプレ。追記開閉式の3カラムです。●JapnBlueサッカー日本代表ユニフォームなテンプレ。※このテンプレには2カラムバージョンもあります。なしの5ブロックテンプレ。Alpha.忍者ブログ[PR]。