2004年02月13日

3カラム化(Non-Java)


(2005/02/15 全面改訂)
元祖 Non-Java 3カラム化 です。 JavaScript を使わずに 3カラム化 を実現する方法です。

(2005/04/19 追記:Windowsでは検証していますが、Macでは検証していません。)

livedoor Blog のサイドバーは、livedoorが用意する様々のプラグインを自分好みに配置して構成します。通常、3カラム化デザインではセンターに記事本体、その左右に「左サイドバー」と「右サイドバー」を配置します。

ここで、3カラム化は自己責任だと言うことを肝に命じてください。

サイドバーを左サイドバーと右サイドバーに切り分けるトリックは次のとおりです。
  • 左サイドバーに配置するプラグインの最後尾に上級者向けプラグイン「フリーエリア」を配置し、このフリーエリアの末尾に次の記述をする。これがキーポイントです。
    </div></div><div id="links2"><div>

  • この後に、右サイドバーのプラグインを配置する。

  • 管理画面の デザインの設定>スタンダード>CUSTOM で、THREE-COLUMNSデザインの為のオリジナルCSSを追加記述します。
    #links が左サイドバー、#links2 が右サイドバーを規定します。

  • 次はオリジナルCSSの追加/変更記述の一例です。サイドバー(#links, #links2)を固定幅、本文欄(#content blog)の幅を自動可変長(width:auto;)に設定している。
    各自の好みで改変してください。
       #content { /* 記事本文の有効領域 */
                   
       }

       .blog { /* 記事本文(コメント・トラバを含む)の有効領域 */
                   margin:120px 180 0 180;
                   width:auto;
       }

       #links { /* 左サイドバー領域 */
                   position:absolute;
                   top:120px;
                   left:0px;
                   width:180px;
                   margin:0px 0 0 0;
       }

       #links2 { /* 右サイドバー領域 */
                   position:absolute;
                   top:120px;
                   right:0px;
                   width:180px;
                   margin:0px 0 0 0;
       }

以上がトリックの全てです。

THREE-COLUMNS を実行される方々の参考になれば幸いです。



追記;2005/02/28
注 釈
質問:</div></div><div id="links2"><div> は何を意図しているか?
回答:次の意図があります。
<div>( プラグイン「フリーエリア」の本来の始端A )
  </div>( Aに対応する終端を演出 )
  </div>( #links[左サイドバー]の終端を演出 )
  <div id="links2">( #links2[右サイドバー]の始端を演出 )
  <div>( Bに対応する始端を演出 )
</div>( プラグイン「フリーエリア」の本来の終端B)


baysky at 22:18│Comments(75)TrackBack(75)weblog 

トラックバックURL

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

1. livedoorBlogで3カラムにする手順  [ 小春日和の陽射しの中で ]   2004年02月18日 19:54
Javascriptを使用しないで3カラムにする方法として、本文中で紹介させていただきました。
2. 3カラムにしてみました  [ 下を向いて歩こう ]   2004年03月03日 03:06
3カラムにしてみました。 右側が白くてマヌケだったのでいい感じなったと思います。 相変わらずCSSに関しては勘で修正しています。 これでお勧めの本とかも増やせそうです。 なお、今回の改造に関してはBaySky eNOTEさんを参考させていただきました。 http://blog.liv
3. livedoorでの3カラム使用例  [ 見聞録Blog ]   2004年03月05日 11:42
私の使用しているJUGEMでも3カラムを好む方が見受けられ、私自身も大好きな 3カラムですが、もちろん他ホスティングサービスでも好まれてます。 livedoorBlog使用のBaySky eNOTEさんで3カラムの記事を組んでいます。 livedoor Blog の3カラム表示に関する考察では、 live
4. 【ブログ入門(その20)】 ついに三段ブログを実行!  [ 前向きな本屋さん ]   2004年03月09日 22:24
記事にさせてもらいました。
5. 【ブログ入門(その23)】 三段ブログ、ついに最終段階へ!  [ 前向きな本屋さん ]   2004年03月13日 21:53
 junikeさんのサイトでついに三段ブログ(中央可変、両端固定)のまとめ説明が出た。初心者でもわかる説明なのでぜひ試してみてくれ。
6. デザイン変更  [ yakigoori's Brain ]   2004年03月21日 22:22
今回のデザイン変更、3カラム化の詳細です。 まず3カラムにする目的は、私がこのブログで重視している2つの種類のプラグインをトップページ画面の上段の目立つ位置に振り分けて固定したいという意図があったためです。(なかば自己満足) ひとつは、数が多く(現在
7. 【ブログ入門(雑記)】 3段ブログの完成報告  [ 前向きなブログ屋さん ]   2004年03月31日 21:38
  今回、調子にのって三段ブログにも成功した。  参考にさせていただいた3段ブログの記事(小春日和の陽射しの中で、BaySky eNOTE、パンパでガウチョ)の3サイト様には、この場を借りてお礼を申し上げます。  いずれ、3段ブログ用のスタイルシートをそのままア
8. ヒント  [ wanna do ]   2004年04月05日 07:43
BaySky eNOTE:THREE-COLUMNS...
9. このトビラも3カラムへ  [ マサログのトビラ ver.1.00 ]   2004年04月13日 04:00
このトビラも3カラムにカスタムしてみたんですが、mac IE では、3カラム表示になりませんでした。 参考にしたのはjunike さんの ■livedoorBlogで3カラムにする手順[整理版](小春日和の陽射しの中で) 間違いがないかどうか、色々と再チェックしてみたんですが、原
10. 3カラム化の方法を変更  [ Chocolate Vine ]   2004年04月20日 23:38
今日はいくつかの箇所をカスタマイズで変更しました。 ●JavaScriptを使用しない3カラムに変更 今まで利用していた3カラムにはJavaScriptを使用していたんですが、どうも不具合があるみたいだったので、JavaScriptを使用しない方式のものに変えてみました。 不具合
11. 【ブログ入門(その45)】 データベース用に変形型3段ブログを作ってみた  [ 前向きなブログ屋さん ]   2004年05月20日 00:26
 データベース型ブログの形として、3段ブログの右のカラムを下に回りこませればよいのではないかと思い、とりあえず左のような形を考えた。これならば下のスペースが有効利用できる。  やり方は簡単。 〓とりあえずは次のサイト様(小春日和の陽射しの中で、BaySky
12. MT 3カラム化  [ だじゃれ空間 ]   2004年05月21日 17:45
Movable Type のレイアウトってデフォルト2カラムなんですが、他サイトのサンプルスタイルシートの最小限必要な部分だけ頂いて(100%パクリは技術者としてのプライドが許さないので(笑))ご覧の通り3カラム化に成功しました。幅も固定サイズだったのを中央のエントリー部分
13. Movable Type 3カラム化  [ 小粋空間 ]   2004年05月25日 01:21
Movable Type のレイアウトってデフォルト2カラムなんですが、他サイトのサンプルスタイルシートの最小限必要な部分だけ頂いて(100%パクリは技術者としてのプライドが許さないので(笑))ご覧の通り3カラム化に成功しました。幅も固定サイズだったのを中央のエントリー部分
14. トップページ3カラム化  [ 小粋空間 ]   2004年06月05日 21:00
Movable Type のレイアウトってデフォルト2カラムなんですが、他サイトのサンプルスタイルシートの最小限必要な部分だけ頂いて(100%パクリは技術者としてのプライドが許さないので(笑))ご覧の通り3カラム化に成功しました。幅も固定サイズだったのを中央のエントリー部分
15. Mac IE 5 対策終了かと  [ マサログのトビラ ver.1.00 ]   2004年06月23日 14:25
※ 再編集してみました。('04年6月23日)これまで当トップページをMac OS 9.2.2 +Internet Explorer 5.1.6 で閲覧すると、ブラウザに不本意な横スクロールバーが出現していましたが、ついに消えました。成功です! ただし、条件付きですが・・・。◇参考記事◇ ■コーラ君
16. がっつり改蔵  [ ROAD TO GROLY ]   2004年08月08日 01:56
ブログを改蔵、もとい、改造した。 サイドバーが右にも出来たでしょう。この3列構成を3カラムというそうで。 どうもバランスが悪くて気になってたので、徹夜でやってみるもうまくいかず。そして二日がかりで挑戦し、ついに完成。 編集にあたってはBaySky eBLOGさんの記.
17. ライブドアBlogの3カラム化  [ 経済ってそういうことだったのか ]   2004年08月14日 00:18
ここのBlogの3カラム化は下記のサイトの手法を使わせていただいてます。 BaySky eBLOG:THREE-COLUMNS ライブドアブログだと用意されたテンプレートCSSによっては背景画像の幅を調整したりしなくてはいけないものもあると思います。 だから私は背景GIF無しのシンプル
18. 3カラム  [ 煩悩の果て ]   2004年09月08日 16:47
Javascriptを使わないで3コラムを実現する事ができる。
19. 続・ブログデザイン変更  [ 十萌航路 ]   2004年09月10日 18:20
ブログデザインをまた変えました。 「確実に調子悪いわー」デザインは1日の命でした。 南無。 新しいデザインのテーマはずばり「ヤギ」です。 今回、3カラム化にもチャレンジしました。 その際、小春日和の陽射しの中でやBaySky eBLOGの記事を参考にさせていただきま.
20. JavaScriptを使わないで3カラムに変更  [ 恋愛ごっこ * キャバ嬢のホンネ ]   2004年09月12日 02:47
今までは、色んなブログで紹介されていることが多い方法の、 JavaScriptをつかって、3カラムにしてたんだけど、 メモ欄を使って3カラムにする方法を「BaySky eBLOG」さんで発見し、 採用してみたよ。...
21. 見た目主義の私としては、ど〜しても  [ 稼ぐブログ ]   2004年09月16日 20:42
専門的なことはわからないけど、 見た目主義の私としては、 ど〜しても両方にサイドバー(3カラムっていうらしい)を 表示したかった(^^; で、調べてみましたLivedoorの掲示板で。 ありました!さすが先人達(^^) が、しか〜し!CSS(スタイルシート)の知
22. デザイン変更  [ 当たり障りのない日々 ]   2004年09月25日 02:50
デザイン変更&3カラムに変更。 うーん。すっきり(してない。 まさにこの時期小春日和さんと、BaySkyさんを参考にさせていただきました。 この後はチョコチョコと変えていく予定。 もう疲れた。...
23. 個別記事にサイドバー!  [ 自分らしくあるがままに ]   2004年09月29日 15:46
昨晩はブログの再構築に時間がかかり、 あちこちいじっていて崩してしまったデザインが やっと元に戻りました。(笑) BaySkyさまのブログを参考に、 メモスペースを使った3カラムに変更。 地獄変00さまのブログを参考に、 個別記事にサイドバーを付ける事に成.
24. なんとか。  [ その女、ワガママにつき ]   2004年10月06日 09:31
参考にさせていただきました。ありがとうございました。
25. カスタマイズ参照御礼  [ Leitgeb ]   2004年10月11日 02:09
 下記の投稿記事を切り貼りしてカスタマイズ致しました。何も知らない者には大変有り難く、感謝の意をここに明示します。
26. 3カラム、再挑戦。  [ ぐだくさん徒然 ]   2004年10月11日 15:57
参考にさせていただきました。ありがとうございました。ペコリ(o_ _)o))
27. 3段blog成功  [ 「学ぶ」と「教える」 ]   2004年10月14日 19:18
BaySkyさんのJAVAなし3段blog法とjunikeさんの「小春日和の陽射しの中で」を見てなんとか、3段にできました。ありがとうございました。少しずつblogが出来上がってくると楽しいですね。...
28. すみません(その2)  [ A FOO ]   2004年10月17日 20:51
いろいろ参考にさせていただきました。 ありがとうございます。
29. “正面破風”にプラグイン!!使い道は無限!!  [ Leitgeb ]   2004年10月24日 11:33
正面破風にプラグイン
30. 3カラムにてリニューアル  [ 丘ジョカトーレはかく語りき ]   2004年10月25日 12:30
ライブドアのブログで両サイドにバーがある人に、憧れてました。 ですが、ブログをもうひとつ立ち上げるきっかけで このさびれたブログも3カラムに挑戦しました。 ネットで調べると情報はあるが、交錯している。 Javascriptやらnon-javaやら・・ 結局は、non-ja
31. ・ブログを3カラムにする(その2)【ブログ改造】  [ パブロフの負け犬(秋葉系FOREVER) ]   2004年10月30日 23:20
気にいってます
32. 3列表示について  [ ブログな風呂具屋 【入浴剤、石鹸などバスグッズやお風呂情報を紹介】 ]   2004年11月08日 23:35
おかげ様で3列化する事が出来ました。わかりやすい解説で非常に参考になりました。
33. ・livedoorブログ、コラー!  [ 副収入の証明 ]   2004年11月12日 18:51
ブログのカスタマイズでアクセスアップ!と行きたいところなんですがlivedoorブログって分かりにくいですよね。いじってもっとかっこ良くしたいと思っても初心者の僕にはさっぱりでどこをどうやって良いのか・・・イライラもっと初心者の方にも分かり易く説明せんかい!ほり.
34. livedoor blogを3カラムに変更  [ 大学生の為替日記 ]   2004年11月18日 01:56
あまりのポンドの下がり具合にぐったりとなりつつ、気分転換にブログのデザインを変更してみました。見ての通りの3カラム化にしてみました。 livedoor blogは無料サービスにもかかわらず、CSSやhtmlの変更を行う事が可能なのでデザインを結構自分好みに変更できます。多少
35. サイドバーを左右にしてみました  [ 株やってますが何か? ]   2004年11月28日 23:21
サイドバーを左右にすることを3カラム化と言うようです。 前々からサイドバーを左右にするのどうやるんだろうな〜と思いつつ「サイドバー、左右」とかで検索してもなかなか出てきませんでした。いろんなリンクをたどりつつ行き着いたのがベイスカイさんのページです。
36. 両サイドバーにする方法(livedoorブログ)  [ ブログでアフィリエイト!副業生活☆ ]   2004年12月06日 17:47
フリーエリアと、CSSで3カラムにする。 livedoorブログでは用意されているデザインに両サイドバーの テンプレートがないので、当サイトのようなサイドバーを両方に設置する方法を 解説いたします。 やり方は簡単で、フリーエリアとCSSを少し変更するだけで簡単にで.
37. 12月11日 3カラムの奇跡  [ スポーツバカの『お金を稼げ!』.com ]   2004年12月11日 12:43
あれ、アクセス増えてねーですか?しかも異常に。困ったもんです。 このくだらぬぶろぐが読まれてると想像すると・・、ぽ &nbsp; 原因は次の通り。 1、ぶろぐの『わ』に登録したから 2、ブログ大賞に応募したから 3、学生、元祖、ブログランキングの順位が上がっ
38. 3カラム構成化計画完了  [ あめこぞう@あのひぐらし島 ]   2004年12月19日 06:00
前から狙っていた3カラム化に挑戦。なんとかできました。 (スゴク時間カカタヨ) 実践にあたっては次の記事を参考にさせていただきました。 ○BaySky eBLOG ○smokin' ○小春日和の陽射しの中で ライブドアのブログをがんばってカスタマイズしている人たちがた
39. 3カラム化  [ 手段こそが目的 ]   2005年01月05日 12:30
BaySky eBLOGさんの当記事を参考に3カラム化しました。御礼かたがたTバックさせていただきます。
40. クールなブログは3カラムから!  [ 冒険野郎マクガイヤーの人生思うが侭 ]   2005年01月07日 03:46
ブログなんてハイカラなものはクールでナウでヤングなトンガリキッズがやるものだという思い込みがあった私は、クールでナウでヤングなトンガリキッズから馬鹿にされない為に、見た目にはこだわりたい。 そこで昨日、今日と睡眠時間を削ってブログのデザイン変更に勤しんだ.
41. ライブドアブログのレイアウト3カラム化(両側にサイドバーをつけたい)  [ ライブドアブログでアフィリエイト ]   2005年01月11日 00:50
ランキングが常にトップのアキバBLOGさん。この方はライブドアでブログをされているわけだが、あのレイアウトはなかなか便利そうである。両サイドにサイドバーが出てくるだけでなく、個別記事の場合もサイドバーが出るように設定されている。そして、ページ上部にカテゴリー
42. 3カラム化着工決定  [ (ブログで)アフィリエイトでもやってみるかw ]   2005年02月05日 11:33
TB失礼致します。また、いつも参考にさせて頂きありがとうございます。 この度、やっと3カラム化等にトライしてみようと考えています。 また、お世話になるかと思いますが、よろしくお願い致しますn(_ _)n
43. 3カラム化でも解説してみるかw   [ (ブログで)アフィリエイトでもやってみるかw ]   2005年02月08日 16:53
最トラックバック申し訳ありません。 3カラム化を祝し?3カラム化の手順を画像により解説することにしました。 3カラム化するより時間が掛かりました( ̄∇ ̄;) 
44. 3カラム化のしかた  [ Trial and Error ]   2005年02月09日 23:06
【備忘録その6】3カラム化に挑戦! ブログいじりを始めたとき、実は最初からやりたかったのが3カラム化。livedoorのテンプレートには元々ないのでぜひにと。でも何だか面倒そうだったので後回しに・・。 が、個別記事へのサイドバー表示(個別記事へのサイドバーの表.
45. やっと出来た三カラム化  [ Papillog ]   2005年02月11日 02:55
長崎から帰ってきて、ブログにまたもやはまってます。 今日は三カラム化に挑戦。 &nbsp; JavaScriptで出来る方法は幾つかのサイトさんで見つけたが何故かうまく行かず…。 折りしも2月10日先日のLivedoorのバージョンアップで画像(jpeg/gif/ong)以外のファイルをアップロ
46. トップページと個別記事を3カラムに  [ しげふみメモ ]   2005年02月12日 18:59
トップページや個別記事を3カラムにしてみました。 前からやりたかったのですが、大変そうだったので今までそのままにしてありました。 ようやくこの休みに半日ぐらい試行錯誤してなんとかできました。...
47. TOPページ以外の3カラム化について?  [ ☆楽して稼ぐアフィリエイト用テンプレートで、日に16万円! ]   2005年02月13日 06:29
TOPページ以外の3カラム化に挑戦しようか、と思った。 TOPページについては、3カラムを済んでいたので、今回は、カテゴリ別のページも同じようなスタイルなので、3カラムしようと思い、参照ページを探した。 BaySky eBLOG さんのサイトにたどり着いたので、早速
48. 3コラム化  [ アイドル2005画像紹介 ]   2005年02月17日 14:31
ライブドアブログで不満がありました。それは用意されているブログデザインが全て2コラムなのです。他のサイトのように3コラム化はできないの? と思っていたら、できました。 この記事を参考にさせていただきました。本当に感謝感謝です。 BaySky eBLOG:THREE-COLUMN
49. とりあえず悲願達成(なのか??)  [ れおん的 ]   2005年02月19日 01:14
とりあえず、3カラムにしてみました。 しかし、問題は多々あります。 &nbsp; たとえば、パソコンによっては、本文が両サイドのカラムのために見づらくなるとか。 %で何かを設定すればいいのだろうか・・ ダメだ、おばかな頭にはわからない!!! &nbsp; とにかく、.
50. フリーエリアを使った個別記事を含む3カラム化  [ ブログアフィリエイトで目指せ!ワンランク上の生活!! ]   2005年02月19日 14:33
今まで個別記事だけが3カラム化でなかったので、 統一させたいと思って、3カラムにそてみました。 参考にしたのは、 ちびろぐさんの「個別記事にサイドバーを入れると問題点が」と、 BaySky eBLOGさんの「THREE-COLUMNS」です。 うまくいった時は感動ものです。...
51. 3カラムデザインの重要性  [ ブログアフィリエイトを始めた妻へ ]   2005年02月21日 13:02
ライブドアブログの数少ない欠点の一つが、標準テンプレートの貧弱さだ。ブログアフィリエイトの観点から、3カラム(3ペイン)のデザインは必須であり、これを実現した。配布用キットも作ったので、活用して欲しい。...
52. デザイン変更!やっと念願の3カラム化!  [ スポーツトレーナー始末記 〜養生指南・最上晴朗〜 ]   2005年02月27日 21:27
参考にさせていただいた皆さん。 地獄変00さん 小春日和の陽射しの中でさん パンパでガウチョさん BaySky eBLOGさん この他、ここから辿って行った先で少しアイデアをいただいたり、 多数助けていただきました。感謝。 参考になった本。 誰でもできる 無
53. livedoor Blogを3カラム化する方法  [ 目指せワンピース!インターネット航海日誌 ]   2005年03月02日 22:22
■livedoor Blogを3カラム化する方法 他の人のBlogを見ていると、サイドバーが両サイドにあるものがある。こういうスタイルのデザインにすることを3カラム化すると言うらしいが、livedoor Blogではこういうテンプレは存在しなため、選択はできないはずなのである。 .
54. カスタマイズの記録  [ 午睡転寝日記 ]   2005年03月10日 23:31
天気予報で近畿全域に雪ダルママークが出ているのを見たのにはビックリしました。 ♪雨は夜更け過ぎに 雪へと変わるだろう♪ …ってもう3月ですよ?お雛さんですよ?ど〜なってんの? 不思議(不気味?)に思い、こよみのページで調べてみたら、なるほど、今は旧暦では
55. 3カラム化  [ ブログアフィリエイト by Dio's Room ]   2005年03月12日 17:55
このブログは、ホームページの日記として使っています。 そこで、デザインを統一するために、スタイルシートを少し変更して、画像を追加したり、色を変えたり、3カラム化したりしています。 このブログでは、『3カラム化』の方法を書こうと思います。 参考にしてくださ
56. ブログカスタマイズ“3カラム化”  [ DRAGONS★VICTORY ]   2005年03月13日 23:22
 livedoorBlogってテンプレートの基本が2カラムなので、livedoor以外のBlogを見ると最初から3カラムだったり、ライブドアブログでも3カラムにカスタマイズしている人のブログをよく見かける。私も以前から当ブログ“DRAGONS★VICTORY”を3カラムにしようとは思っていた
57. 3カラム化成功  [ GoToHell ]   2005年03月15日 11:23
ライブドアのブログデザインには3カラム構成のものが存在しなく、トップページが2カラム表示だと、下の方に長くなってしまうのが嫌だったので3カラム化したいなぁと思い立ち実行してみました。参考にしたのはここのブログ記事です。読んでみてだいたい概要が理解できた.
58. ■初心者のブログカスタマイズ  [ ネットできれい ]   2005年03月17日 20:30
初心者がやってみたLivedoor Blog のカスタマイズです。自分の覚え書きのために今までやったカスタマイズをまとめてみました。(padding や margin の数値やカラーナンバーは自分の都合で、すでにオリジナルのテンプレートから変えてあります。) また、もしやってみよう
59. livedoor Blog 3カラム設定  [ NEURON NETWORK BLOG ]   2005年03月22日 21:37
http://blog.livedoor.jp/baysky/archives/119020.html 上記サイトを参考にlivedoor Blogを3カラム設定にしました。 こちらのサイトに掲載されている方法ですと、上級者向けプラグイン「フリーエリア」に と、一行記述するだけで3カラム化可能です。 その後、CSSで
60. [雑記・BLOG] 3カラム化に挑戦!  [ Rock! ALBUM SELECTION ]   2005年03月25日 22:40
 今日は休みが取れたので(風邪を引いて休んだだけなんですけど)、前から気になってた3カラム化に挑戦(寝たほうが良いんじゃないかなぁ)。  朝から情報収集してjunikeさんの小春日和の陽射しの中で、BaySkyさんのBaySky eBLOGというBlogを発見。まずはトップページの
61. Blogデザインを3カラムへ!!  [ のら猫アフィリエイト ]   2005年03月27日 20:20
以前、挑戦した事があるのですが、topにあった画像をうまく処理できず断念してしまってたのです。 それでこの際、画像無しのテンプレートを選択し、 「小春日和の陽射しの中で」のlivedoorBlogで3カラムにする手順[整理版] 「BaySky eBlog」の3カラム化(Non-Java) のBl
62. ブログカスタマイズ【3カラム化】してみたっ!!  [ 『猟奇的なBlog』/原題:MY SASSY BLOG ]   2005年04月04日 01:22
今までにやったカスタマイズは カウンター設置してみたり、 アクセス解析導入してみたりと プラグインの追加で、簡単に出来るモノばかりだったが、 今回は【3カラム化】。 最初は、“3カラム”の意味すら解らなかったが・・・。 無事(?!)完成しましたっ!! ≪
63. Blogのカスタマイズ(3カラム化)  [ 子持ち侍の信on日記 ]   2005年04月10日 00:20
ライブドアブログの中で常にランキング上位の 『アキバBlog(秋葉原ブログ)』を見ていて気になることが・・・ サイドバーが右側と左側の両サイドにある3カラムのデザインが 見やすくていいな〜と常々思ってました。 というわけで、おらも3カラムにし.
64. 3カラム化終了〜  [ さくさくつづり ]   2005年04月11日 18:10
本日、休みということで前からやりたかった「3カラム化」 BaySky eBLOGさんの3カラム化(Non-Java)を参考。 簡単に3カラムになるが、 メインの記事の幅とサイドバーの幅がおかしかったので、 CSSをちょっとづつ微修正。 その後、個別記事にもサイドバーを表示.
65. 両側サイドバー(3カラム化成功!!)+フィードメータつけました。  [ 平尾日記(職業:企業戦士レベル2)-業務用- ]   2005年04月15日 00:02
自分には絶対無理と思っていた3カラム化成功しました! CSSはフォント位しかさわったことがなかったので自身がつきました。(大げさ?) &nbsp; 説明書とか最初から読む人には簡単にすぐにできると思います。 僕みたいに何時間も悩まずに・・・ &nbsp; ■今回、参考に
66. さあカスタマイズでも始めませんか  [ One’s daily Blog ]   2005年04月15日 01:01
カスタマイズを始めてみましょう。やはり3カラムでしょうか。私はこのOne’s daily Blogで2回目の3カラムです。 まだまだ理解できていないです・・・がやってみます。 ...
67. フリーエリアを使った3カラム化に挑戦してみました。  [ ★ドットコムマスター(.comMaster)ブログ★ ]   2005年05月11日 08:40
3カラムのブログをよく見かけるのにやり方がわからず悩んでいましたが、ついに3カラム化に成功しました!他の人が見てもきちんと表示されるか不安ですが。。。 CSSって何なの?って僕でもできたのはBaySky eBLOGを参考にさせていただきました。ありがとうございました。
68. サイドバー  [ ぱお日記。 ]   2005年05月12日 14:03
ちょっといじってみた。 理屈はよくわかんないけど、うまくいったからま、いっかw こちらのブログを参考にしました^^ ありがとうございます!!! BaySky eBLOG...
69. ・3カラム化〜Java配信型サービスの表示乱れ修正 その1.  [ CherryBlossom@News+ ]   2005年05月18日 19:39
昨日までの記事で、 「個別記事へのサイドバーの設置」→ 「BlogPeopleリンク(JAVA配信コンテンツ)の設置」→ 「サイドバー落ちの修正(インラインフレームの設置)」→ 「インラインフレーム内の文字色の変更」 のカスタマイズ方法を書きました。 昨日の時点
70. 3カラム化  [ Blog Detective ]   2005年06月27日 18:11
とりあえず、トップページだけ3カラムにしてみました。 こちら(BaySky eBLOG)を参考にさせていただきました。 BaySkyさんありがとうございました。...
71. JAVA  [ [TW] HOTWORDS ]   2005年07月01日 22:59
JAVAの最新情報をチェック!ad1();         JAVA...
72. 3カラム化!  [ ブログデイ ]   2005年10月09日 22:31
勝手にLOVELOGまとめサイトに掲載されていた、小春日和の陽射しの中でを参考に、念願だった3カラム化を実現できました! 二つのサイトに感謝、感謝です。 LOBELOGで、最初から3カラムのデザイン作ってくれればいいのに。ま〜カスタマイズできるようになって
73. 3カラム化!  [ ブログデイ ]   2005年10月16日 22:57
勝手にLOVELOGまとめサイトに掲載されていた、小春日和の陽射しの中でとBaySky eBLOGを参考に、念願だった3カラム化を実現できました! 二つのサイトに感謝、感謝です。 LOBELOGで、最初から3カラムのデザイン作ってくれればいいのに。ま〜カスタマイズでき
74. 3カラム化に成功しました。  [ 笑ってなんぼ!大阪の塾講師日記 ]   2006年01月08日 17:12
4時間ぐらいかかりました。(汗)
75. ライブドアブログ 3カラム化 〜実践〜  [ アフィリエイトで稼げ! ]   2006年03月23日 17:02
ライブドアブログ カスタマイズ 3カラムという事で、実際の手順を解説していきたい。参考にさせて頂いたサイト「小春日和の陽射しの中で」さんと「BaySky e blog」さんの記事から管理人soraもチャレンジした。「なるほど〜」と思ってしまう程わかりやすかった。

この記事へのコメント

1. Posted by yamjun   2004年02月14日 09:15
yamjun@FindingLupoです。
ご親切に間違いを教えて頂きありがとうございました。
本来なら菓子折のひとつでも持ってお礼に伺いたいところです。
はじめてblog拝見しましたが、非常に参考になりそうなことばかりです。

これからもよろしくお願いします<(_ _)>
2. Posted by BaySky   2004年02月14日 10:00
> yamjun@FindingLupoさんへ
綺麗に直ってよかったです。
益々素敵なBlogになることを祈ります。
3. Posted by yamjun   2004年02月15日 19:45
こんばんはyamjunです。
見よう見まねで、3カラムチャレンジしてみました。
すると・・・私にも出来ました。大満足です!
これからも私にも出来そうなものがあれば参考にさせて頂きます。

ありがとうございました。
4. Posted by BaySky   2004年02月15日 20:49
> yamjunさん
3カラム、うまく作動していますね。良かったです。今後ともヨロシク。
5. Posted by yujiro   2004年05月21日 23:37
コメントありがとうございました(URLを変えたのでこちらに投稿しました)。3カラム化が予想以上に早く設定でき、少しどころか大変助かりました!両サイド固定長、真中伸縮長いいですよね。では。
6. Posted by マイア   2004年09月23日 21:29
はじめまして。
参考にさせていただきました。
なんとか、イメージ通りの3カラムが出来上がりました。
ありがとうございました。
7. Posted by BaySky@管理人   2004年09月25日 04:46
> マイアさん
3カラム、うまく作動していますね。良かったです。お役に立てて嬉しいです。今後ともヨロシク。
8. Posted by dignyte   2004年10月15日 13:04
BaySkyさま。
>私の記事が多少なりとも役立ったとのこと、嬉しいです。
本当に役に立ちました。これからもよろしくお願いします。
9. Posted by Leitgeb   2004年10月24日 11:42
間違えて3回もTrackBack してしまいました。ご免なさい。
10. Posted by BaySky@管理人   2004年10月31日 07:20
>Leitgebさん
酒屋のご主人さん、TB感謝です。
TB3件のうち、2件はこちらで削除させていただきました。
11. Posted by べに   2004年11月01日 22:46
はじめまして
こちらの記事を参考にして3カラム構成中です。まだ完成ではないのですが、とても助かりました。
ありがとうございました。
12. Posted by べに   2004年11月03日 16:58
いつでもこられるように、MyBlogListに登録させていただきました。事後報告で申し訳ありません。御不都合でしたら連絡くだされば削除させていただきます。
13. Posted by zillionaire   2004年11月28日 23:25
非常に助かりました。感謝感謝感謝っと言った感じです。javascriptを使用しないところがいいです!
14. Posted by マクガイヤー   2005年01月07日 23:49
コメントありがとうございました。
無事3カラム化に成功し、大変助かりました。
15. Posted by hanger   2005年02月17日 13:39
 やっと、3カラム化出来ました
こちらの記事を参考にしてトライすること幾度か・・・・
 どうにか、形が整いました^^
でも、真中をautoにすると記事が被ってしまうので固定長でしか設定できず^^;
多分、原因は2月12日の記事に・・・・
どうにか、完成と呼べる所までこぎつけましたのでご報告がてらコメントさせていただきました^^
これからも色々と参考にさせていただきます
16. Posted by BaySky@管理人   2005年02月18日 00:55
>hangerさん
こんばんは、コメントありがとうございます。
HP拝見しました。真中autoで記事が被る原因は、ご自身でご指摘のように、02/12の記事にあると思います。
ところで、すべて固定幅にするのなら、次のような設定もあるように思います。
#links { position:absolute; top:120px; left:0px; width:220px; margin:0px 0 0 0; }
.blog{ margin:50px 220 0 230; width:480px; }
#links2 { position:absolute; top:120px; left:700px; width:220px; margin:0px 0 0 0; }
17. Posted by hanger   2005年02月19日 03:29
 早速のアドバイス、ありがとうございます
ちょっと今は時間がないので、
手が空き次第、挑戦してみます^^
出来上がったら
また、報告させていただきます
18. Posted by porter   2005年02月19日 14:41
今回の記事を参考に3カラム化させてもらいました。多少時間がかかりましたがうまくできました。ありがとうございます。
今後もいろいろと参考にさせてもらいます。
19. Posted by hanger   2005年02月27日 09:54
 ようやく、3カラムとも固定幅にすることが出来ました。その他ちょこっとだけ編集しましたが何とか動作しているので大丈夫のようです。また、色々参考にさせていただきます。
20. Posted by mogami   2005年02月28日 00:47
早速のコメント、有難うございました。
たかがこんな事かも知れませんが、
もうオヤジにとっては嬉しくて嬉しくて…。

また参考にさせていただきます。

個別記事の3カラム化は、試してみたのですが、
何人かの方がおっしゃているように、サイドバー内が飛び出してしまいます。
対処法も読んだのですが、私にはよく分からなくて…。

ま、気長にやります。
ご指導よろしくお願い致します。
21. Posted by 兄貴   2005年03月02日 23:52
何度もやり直してやっと出来ました!!
javaを使っていた時は、あまりの重さで
外してしまいましたが、スムーズに
動くようになって嬉しいです。
ただlink2が、どうやっても端のほうが
余ってしまい、直せずに断念(>_<)
また参考にさせていただきます。
22. Posted by 兄貴   2005年03月03日 22:34
すみません、解決しました〜!
何か、バランス悪いけど・・・
23. Posted by peace   2005年03月03日 22:40
3コラム化参考にさせていただき、見事成功しました。ありがとうございました。

さらに、個別記事にサイドバーを表示させようと
http://blog.livedoor.jp/blog_style/archives/8986209.html
の通りにしたら成功しました。
さらに、カテゴリー別アーカイブにもサイドバーを表示させようと同様にやってみたのですが、これはだめでした。

ここで質問すべきではないかもしれませんが、対処法ご存知でしたら教えていただけないでしょうか。よろしくお願いします。
24. Posted by timeranger   2005年03月06日 10:13
3カラム化したいと思い悩んでいた時にこちらのサイトを見つけ、おおいに参考にさせてもらいました。おかげさまで、何とか成功しました。あとはタイトルの右側に少し画像を入れたいんで、また悪戦苦闘してみようかと・・・。
ほんとうにありがとうございました。
25. Posted by realshibuya   2005年03月07日 02:16
3カラムにする方法として参考にさせて頂きました.ありがとうございました.
また,本文中にも紹介させて頂きました.
26. Posted by BaySky@管理人   2005年03月09日 09:47
>peaceさん
コメントありがとうございます。
ところで、カテゴリー別アーカイブのサイドバー表示のことですが、http://blog.livedoor.jp/blog_style/archives/8986209.html
は私の記事ではありませんので、この記事の管理人:reikaさんに直接質問されれば解決のヒントが得られるのではないかと思います。
27. Posted by take   2005年03月09日 15:41
紹介させていただきました。ありがとうございます。
28. Posted by DRAGONS★VICTORY   2005年03月13日 23:26
はじめまして。奥ヒダツヨシと申します。
こちらの記事を参考にブログを3カラムにすることが
出来ました。
どうもありがとうございました。
また参考になる記事をお願いします。
29. Posted by lexuser   2005年03月15日 11:52
3カラム化の参考にさせていただきました。ありがとうございます。大変親切な記事で理解しやすかったので、こちらの記事の本文にもリンク貼らせていただきました。
30. Posted by mimin   2005年03月17日 20:30
はじめまして。
とってもわかりやすい解説でしたので、初心者の私でも簡単に3カラムかができました。ありがとうございました。トラックバックもさせていただきました。よろしかったでしょうか?
31. Posted by おくまん   2005年03月27日 20:16
はじめまして

3カラムの説明が大変参考になり無事完成しました。
これからは、いろいろと応用していきたいと思います。

有難うございました。
32. Posted by はじめまして   2005年04月04日 01:23
全くの初心者なんですが、
何と!3カラム化することができました!!
ありがとうございました。
33. Posted by ひよこ   2005年04月14日 02:43
はじめまして。
3カラムにしたく色々旅を続けてここへ辿り着きました。
ここに記載されていた「プラグイン」のフリーエリアに貼り付ける方法で試してみました。

ですが、プラグインの、タイトルの枠部分だけが真ん中(記事ある部分の一番したの、空白)へ行ってしまい、うまくできませんでした。
う〜ん、なんでだろう??

それと、「3カラムは自己責任で」と最初に書いてあるのをみたのですが、なにか弊害などがあるのでしょうか?

34. Posted by BaySky@管理人   2005年04月14日 14:03
>ひよこさん
コメント書込み感謝します。

皆さんのブログの元々のデザインが一様ではなく、様々です。従って、それに対応しているスタイルシート(CSS)の内容・記述も様々です。この箇所の記述内容の修正・加筆は各自の責任で実行していただくしかありません。このための参考データを「補足事項1」と「補足事項2」で解説してあります。

切り分けるトリックの記述にミスが無ければ、あとはCSSで配置の調整をうまくやるのがコツです。

35. Posted by ひよこ   2005年04月18日 15:15
>管理人さん♪
ありがとうございます!どうにかこうにか、できました!
ですが、ここで指定のあった所しかいじっていないハズなのに、なぜか最新の記事の日付欄だけ、真っ白になってしいました。翌日また新しく記事をかけば、その新しい記事の日付は表示されませんが1日前となった分に関しては出るので、まぁそんなに困らないのですが…。
あと、Macでは見られないといわれてしまいましたが、これは3カラムにすると皆そうなのでしょうか?それとも私がどこか間違っているのですかね?
質問ばかりで本当にごめんなさい!
36. Posted by BaySky@管理人   2005年04月19日 08:19
>ひよこさん
おはようございます。気づいたこと書いておきます。
■最初の記事の日付表示のこと・・・
日付は一旦表示されています。ところが、その上に冒頭のひよこのイラスト(height:320px)とその余白(margin-bottom:20px)が覆い被さって表示されているために、結果的に日付が見えない状態になっています。
◎解決策ヒント⇒真中欄(CSSの中で'.blog'で規定されている)の書き始め位置を25pxくらい下にさげる。CSSの記述を次のように変更してみる。数値は試行錯誤でバランス良くしてください。
  .blog{
     margin:25px auto 30px;
     padding:0px 30px;
    }
■Macについての検証はしていないので、分かりません。
37. Posted by ひよこ   2005年04月19日 10:57
管理人さん、ありがとうございます。
上で教えて戴いたとおりにまずは書き換え、それでもダメだったのでmarginの25という数字を50,60と数値を大きくしていっても、ブログの文章が下がるのみで(ドラッグすると日付は一応記されているのが見えるのですが)、一向に出てきてくれません。
それで、絵の部分もいじってみたのですが、ひよこの足がどんどんかけていくばかりで、うまくいきませんでした。
さらにmargin-bottom:20pxの部分の数字も0にしてみたのですが、変化はありませんでした。
いじり方が間違っているのでしょうか?
何度も本当に申し訳ございません!
38. Posted by BaySky@管理人   2005年04月20日 07:31
ひよこさん
お早うございます。
次のCSS変更により、表紙ページでも個別ページでも、日付表示が希望通りに実現すると思います。
POSITION: absolute; がキーポイントです。
◆1)#content の記述
#content {
left: 185px;
width:450px;
LINE-HEIGHT: 140%;
PADDING-TOP: 0px;
POSITION: absolute;
}
◆2)#container の記述
#container {
POSITION: absolute;
TOP: 0px;
LEFT: 80px;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 788px;
HEIGHT: 100%;
TEXT-ALIGN: left;
}
39. Posted by ひよこ   2005年04月20日 10:11
管理人さん♪
朝早くから、ありがとうございます。
ようやく、ようやく!!できました。
何度も諦めかけましたが、教えて頂いたおかげできちんとできました!
本当に何からなにまで教えて戴いて、ありがとうございました。
40. Posted by nanapapa2   2005年04月28日 05:36
はじめまして。3カラム参考にさせて頂いております。ただ、どうしても左カラムが本文と重なってしまうのですが、何か良い対処法がないでしょうか?大変お忙しいとろこ申し訳ございませんが、是非、教えて頂けないでしょうか?お願い致します。
41. Posted by BaySky@管理人   2005年04月28日 10:57
>nanapapa2さん
お早うございます。
CSSを次のように変更すれば、表示が希望通りに実現すると思います。
◆1)#content の記述で、
margin-left および margin-right の設定を 5px にする。 
◆2)#links の記述で、
top の設定を 20px にする。
42. Posted by nanapapa2   2005年04月28日 20:38
管理人様、大変、御丁寧に教えて頂きありがとうございました。教えて頂いたとおり設定したのですが、今度は中央が左カラムに吸収されてしまいました。こんな初心者で御迷惑お掛けいたしますが、是非、もう一度解決策を教えて頂けたらと思います。本当に申し訳ございません。お願い致します。
43. Posted by nanapapa2   2005年04月28日 21:40
度々すみません。少しは自分でもやらなければと思い、頑張っているのですが、BaySky様に教えて頂いた通り、#contentのmargin leftの数値を変えると、中央カラムがどうしても、くっついてきてしまうようです。どうしてなのでしょうか。う〜ん、難しいですね。左カラムと中央カラムが一体となってしまっているようです。またアドバイスを宜しくお願い致します。
44. Posted by BaySky@管理人   2005年04月28日 23:38
>nanapapa2さん
◆#content の記述を次のように変更してみてください。
#content{
position:relative;
margin-top: 0px;
margin-right:200px;
margin-bottom: 0px;
margin-left: 215px;
line-height: 140%;
padding: 0px 0px 50px 0px;
}
45. Posted by nanapapa2   2005年04月29日 04:41
BaySky様、わざわざ私のブログに直接アドバイスを頂きありがとうございました。感動しました。残念ながら、中央カラムと左カラムはくっついたまま離れません。もうだめでしょうか?何度も申し訳ございません。また何か良い案がございましたが、御指導宜しくお願い致します。
46. Posted by nanapapa2   2005年04月29日 06:58
ご指摘の通り、全ページの再構築を行ってみました。どうでしょうか。宜しくお願い致します。
47. Posted by nanapapa2   2005年04月29日 08:16
本当に何度も申し訳ございません。フリーエリアのダブりを削除したのですが、直りませんでした。根本的に何かおかしいのでしょうか。せっかく色々アドバイスをして頂いているのに、私に知識がないばっかりに、本当に、ごめんなさい。
48. Posted by nanapapa2   2005年04月29日 19:27
この度は、本当にお世話になりました。BaySky様のお陰で、ブログを復活させる事ができました。こころより感謝致します。本当に、本当にありがとうございました。

当ブログにても感謝の気持ちを書かせて頂きました。
49. Posted by kaichou2002   2005年05月08日 06:52
このブログのおかげで無事3カラムにする事ができました。
ありがとうございました。
50. Posted by Cherry Blossom   2005年05月19日 07:06
BaySkyさん、こんにちは。
わざわざコメントをくださり、ありがとうございました。

こちらでの挨拶が遅れてすみません。
お蔭様で3カラム化することができました。
自分の思い通りになってとても嬉しいです。

ありがとうございました。
51. Posted by 永芽瀬島   2005年05月22日 19:02
 こちらの記事を参考にさせていただいたおかげで、なんとか
3カラム化に成功しました。ありがとうございました(何故か
3カラム化していない記事画面のデザインが変なのですが…)。
52. Posted by nanapapa2   2005年06月01日 22:03
BaySky様、以前は大変、お世話になりました。以来、順調にブログを楽しんでおります。
本日コメントさせて頂いたのは、私のブログのサイドカラムが画面を縮めると上の方に突き出てしまうのですが、何か良い対処法がございましたら、また教えて頂けたらと思います。毎回、突然の図々しいお願い、誠に申し訳ございません。
もし、BaySky様のお時間が許すならば、お願い致します。
53. Posted by BaySky   2005年06月03日 13:56
>nanapapa2さん
こんにちは。
HPタイトルおよびサブタイトルが長いために、画面幅が縮んだときに画面に納まりきらずに強制的に折り返し表示が発生する。次の横長のバナーの2枚並べでも同様の現象が発生する。これがサイドバーの頭に被ってしまう。
この強制折返しを極力避けるために、HPタイトルおよびサブタイトルを短くする工夫をする。また、横長バナーにも width="300" などと属性指定して表示を小さめにする。
こんなことで、取敢えずは対処できると思います。いかがでしょうか。
54. Posted by BaySky   2005年06月04日 08:23
>nanapapa2さん
改行禁止タグ <nobr>〜</nobr> を使ってみる手があるかも・・・。
次を参照してみてください。
http://www.tohoho-web.com/html/nobr.htm
55. Posted by nanapapa2   2005年06月05日 11:25
色々ありがとうございます。一度、試してみます。本当にいつも、助かります。ありがとうございます。
56. Posted by AI   2005年06月17日 23:30
はじめまして。
3カラム化やサイドバーをつける方法など、
こちらの記事を参考にさせていただき、なんとか出来ました。
とても分かりやすく書かれていて、専門的な知識がない私でも3カラム化、サイドーバー付、出来て本当にうれしいです。
ありがとうございました。
57. Posted by pczanmai   2005年07月03日 17:43
こんにちは。3カラム化するに当たり参考にさせていただきました。トラックバックというものが良くわかっておらず、失礼をしておりましたらお許し下さい。
58. Posted by nanapapa2   2005年08月14日 22:59
ごぶさたしております。新デザインに変更されたのですね。さすがです。私は、現在のデザインから新デザインに変更すると、ブログが壊れてしまうのではないかと心配で変更できないです。普通にデザイン変更してもBaySky様のように、うまくいきますでしょうか?
59. Posted by BaySky@管理人   2005年08月17日 05:49
>nanapapa2さん
こんにちは。
新旧対処のキーポイントについての記事を近くブログ掲載するつもりです。
60. Posted by ゆぅく   2005年08月20日 09:54
5 管理人さま

はじめまして。
3カラムにしたくて色々調べてこのサイトにたどり着きました。

おかげさまで何とか3カラムに成功しました。
しかし、どうしても1点改善できません。

教えていただきたいのですが、
ブログ本文の日付が下がってしまいます。
日付の設定のdate内のtop marginの数字を減らしても、改善されません。
しかも、IEのみ下がって表示され、opera, net scapeではきちんとタイトルの上に表示されるのです・・・
やはり、IEでちゃんと表示させたいのですが、どこを買えればいいのか教えてください。。。
61. Posted by BaySky   2005年08月20日 23:51
>ゆぅくさん
あなたのブログはlivedoor Blogではなく、DION Lovelogです。基本環境も違い、私には分かりません。
62. Posted by ツアー オブ ジャパン   2011年11月26日 11:31
類魂の人生はまさしく「旅」である。リーオーストラリア位ミリアン。比重の大きい建物なら、倒れたり沈むこともあるそうです。心配していた通り、女の子のジョナはすでに、オスネコの標的。
63. Posted by ascii games   2012年01月03日 03:28
旅行の主張の清算
64. Posted by hottest video download   2012年01月07日 00:57
旅行クレーム問い合わせmobcom
65. Posted by linux 2627 download   2012年01月07日 20:28
シアーズ旅行メキシコ
66. Posted by Часы Beurer   2012年01月08日 10:54
安いエジプトを旅行する
67. Posted by laptop sales canberra   2012年01月11日 11:24
シーホークのトラベルケース
68. Posted by saosin acoustic download   2012年02月14日 00:38
海の世界旅行パッケージ
69. Posted by Kitt Car From Knight Rider   2012年04月01日 05:33
旅行のチェックリストのテンプレート
70. Posted by Антирадары автомобильные   2012年05月25日 00:58
墾丁へ移動
71. Posted by Jame Chavers   2013年03月19日 22:45
The idea of your blog is very fresh, I'm positive that the readers who will encounter your blogs will appreciate your content and pointers.
72. Posted by orthotics   2013年04月28日 04:31
As I web site possessor I believe the content matter here is rattling fantastic , appreciate it for your efforts. You should keep it up forever! Good Luck.
73. Posted by shoe lift inserts   2013年05月07日 11:19
I all the time used to study post in news papers but now as I am a user of net thus from now I am using net for articles or reviews, thanks to web.
74. Posted by Hannah   2013年05月26日 17:33
Hi there Everyone, Just to the helpful write-up I anticipate reading internet web-site. I???e?ell return shortly to find new articles. Several thanks
75. Posted by shoe lifts men   2013年07月05日 14:52
I am hoping that you are going to be elaborating further on this issue. I was hoping for a bit more information.

コメントする

名前
URL
 
  絵文字