2005年04月02日 12:23

redframeの3カラム化

livedoorBlogで用意されているテンプレートのうち
 redframe,blueframe,blackframe,greenframe
3カラム化する手順のとおりにやると、BODYのbackgroundで左サイドバーの部分を背景に指定しているので、個別記事にページを切り替えたときに記事本文が左サイドバー領域にかぶってしまうので調整が必要になります。
3カラム化する手順ではブラウザの幅に合わせて真ん中の部分が可変となるやり方になっていますが、可変だとどうしても個別ページにしたときにうまくいかないので幅を固定にします。その際に記事部分をトップページと同じ幅にしないとまたおかしくなるのでそうすると、今度は両サイドが空いててさびしいので、個別記事にもサイドバーを表示する方法とあわせて以下にまとめて記しておきます。


該当部分だけ抽出しておきます。
スタイルシートは以下のとおり。

#container{
position: absolute;  /* relativeではない */
width: 800px;   /* ここで全体幅を固定 */
margin:0 auto 0 auto;
padding: 0;
text-align:left;
}

#content{
position:absolute;  /* relativeではない */
top: 97px;
line-height: 140%;
padding: 0px 10px 50px 10px;
}

#links{
position:absolute;
left:20px;
top:97px;
width:190px;
}

#links2{
position: absolute;
width:190px;
top:97px;
right: 0px;
}
.blog{
width:auto;
padding:0 20px;
margin-right:210px; /* 右サイドバースペース */
margin-left:220px; /* 左サイドバースペース */
text-align:center;
}

#text{
width:300px; /* 個別記事でのコメント記入欄幅 */
height:200px;
}

個別記事にもサイドバーを持ってくるにはHTML編集の個別ページの画面で <div class="blog"> の1行上に <div id="content"> を書きます。

<div id="content">
<div class="blog">

そして<div id="footer"></div> の1行上に以下の文を追加します。並べて書くと

</div>
</div>
<div id="links">
<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>
</div>

<div id="footer"></div>

参考元記事:地獄変OOさんの記事

links2をフリーメモプラグインで入れておくのをお忘れなく。(3カラム化する手順を参照してください)

また、サイドバーにJavascript配信型サービスを入れているとおかしくなるそうなので地獄変OOさんのこちらの記事やぼくのこちらの記事も参考にしてみてください。

※追記
positionを relativeではなく、absolute にしたのでもしかしたらMac版のIEで見ると崩れるかもしれません。当方にMacがないので確認できませんが、もし崩れたらcountainer の方だけでも relative に戻すと直るかもしれません。 

※追記
真ん中を可変にするには #container の width を
width: 800px; ではなく
width: 100%; とすればできるようです。

    このエントリーをはてなブックマークに追加

トラックバックURL

トラックバック一覧

1. livedoorのブログって  [ あなたのことが書いてある?初めてのアフィリエイト挑戦! ]   2005年04月08日 02:30
livedoorのブログのサンプルデザインで、どれがいいかなとあれこれデザインを変えてみて、よし!これがいい!って決めたのに、いざコメントを投稿したらトップページには、ちゃんとサイドにメニューバーみたいのがあるのに、個別記事を見ると記事だけでメニューが表示されな
2. ライブドアBlogで個別記事にサイドバー表示  [ 子持ち侍の信on日記 ]   2005年04月23日 10:08
livedoor Blogでは個別記事やカテゴリー別ページに サイドバーがありません。 ゴルァ━━━━━━(゚Д゚)━━━━━━ !!!!! どう考えてもおかしい・・・というか、不便だし〜、 なにより画面が寂しいです。 そんな訳で、個別記事等のページにもサイドバー
3. ブログ3カラム化できました  [ 会社を辞めずにヤフオク・せどり・アフィリエイト・情報起業で金持ちビジネスマン ]   2005年04月23日 10:43
以前からブログの両側にサイドバーをつけたいと思っていました。 参考にさせていただいたのブログはこちら ブログアフィリエイトで日給8万円 小春日和の陽射しの中で 個別記事のページを調整するのに苦労したんですが、、ようやくできました ありがとう
4. 3カラム化[2]  [ 小遣い2万円亭主の慎ましくも物欲な日々 ]   2005年05月01日 19:42
 今まで使っていたテンプレートはデザインはとっても気に入っていたのだが、スクロールの動きがズルッズルッとぎこちなく重い感じがしてイヤだったので、ライブドアのデザイン一覧の中から「グリーンフレーム」というシンプルさだけがとりえのテンプレートに取り替え
5. ブログの最新(個別)記事にもメニューをつける  [ 子パンダ群 逃げた ]   2005年05月05日 03:53
小春日和の陽射しの中でさんの ブログに載っていた方法でなんとか完成しました。 最初メニューが下に行ったりしましたがなんとか調整成功★ ありがたいのでトラバってみました、本当に参考になりました。
6. 3カラム化できた!!  [ 或る日のできごと ]   2005年05月14日 14:34
このブログのデザインはサイドバーが左しかないのですが、 以前から右側にもサイドバーを作りたいと思っていました。 &nbsp; そこで 小春日和の陽射しの中で&nbsp; さんのページを参考に 作ってみました。説明も分かりやすく、簡単にできました。(☆▽☆ ) &nbsp;
7. 3カラム化とパンくずリストとアクセスランキング  [ 蹴流 ]   2005年05月14日 20:24
ちょっとブログをリニューアルということで、、小春日和の陽射しの中でさんの記事を参考に、3カラム化とパンくずリストとアクセスランキングを付けてみました。 ついでにスキンも変更し、シンプルマリノス仕様にカラー変更!結構時間かかりましたが、なかなか楽しみなが.
8. t_closs_dを3カラムに  [ 日々の糧。日々感じたこと。 ]   2005年05月25日 02:41
参考にさせて頂きました。
9. ブログカスタマイズ 〜全ページ3カラム化〜  [ 20代独身雄のボヤキ ]   2006年08月13日 18:41
1年以上前にトップページを3カラム化して以来は、アクセス解析を埋めたり、アフェリエイト広告を入れたぐらいでたいしてカスタマイズしてなかったけど、このたび大幅(?)にリニューアルしてみた。 ご覧の通り、個別記事のページも3カラム化してサイドバーを表示させて....

コメント一覧

1. Posted by kamachi   2005年05月02日 05:36
大変参考になりました。おかげさまで成功!です。
遅ればせながら有難うございました。
ただひとつ個別記事の両サイドバーが
トップに比べると少し下にきてしまうのはどこを編集すれば良いのか?で、
今後の課題です。。こちらにも載っているかしら。まずは調べてみます。
2. Posted by junike   2005年05月02日 15:14
>kamachiさん
現象はわかりましたが原因がよくわかりませんでした。
とりあえずBODYの中が

background:#fff url
text-align:left;

となっていたので「url」を消して、#fffの後ろに「;」をつけて

background:#fff;
text-align:left;

としてください。これが影響しているとも思えないですが、こういうのをつぶしてみても変わらなければ原因はわかりません。
気力があれば、もういちど最初からやった方がいろいろ悩むより案外できてしまうこともあります。
3. Posted by kamachi   2005年05月04日 09:15
junikeさん
ご指摘の通りにやってみましたが、やはり未解決でした。
最初からチャレンジですね・・・
とりあえず気力温存してからにします・・(弱気)
アドバイスありがとうございました!
4. Posted by liuliu   2005年05月04日 18:07
初めまして。junikeさん
ブログの表示を3カラムにしたくて、
検索していたらこちらに辿り着きました。
こういうことに疎いので、2日がかりでしたが、
なんとかできました!!
(もう少しお勉強して右に分けたサイドバーに
左と同じ色にしたいと思ってます。)
ありがとうございました。
5. Posted by junike   2005年05月04日 21:17
>liuliuさん
左サイドバーは背景に指定した画像(絵)ですので
右サイドバーにも同じ色にするには工夫が必要です。
とりあえず #000033 で同じ色になりますがどうやればいいかは研究してみてください。
6. Posted by みなみあるぷー   2005年05月05日 03:58
はじめまして、みなみあるぷーといいます。
最新記事からもサイドバーは必要だなーと感じていたので
こちらの記事がとても参考になって感謝しています!
ところで、すみません…ちょっとブログの使い方を
熟知しておらず、一回送ればいいトラックバックを
複数回送信してしまいました、ごめんなさい。
ご迷惑おかけしましたm(__)m
7. Posted by junike   2005年05月05日 09:46
>みなみあるぷーさん
ダブり分を削除しました。
8. Posted by hiyohi   2005年05月14日 14:49
はじめまして、hiyohiと申します。

先日から色々な方のブログを参考に3カラムに挑戦していたのですが、
junikeさんの記事を読んで、
やっとサイドバーを表示させることができました。
ありがとうございます!!

しかし私も先日コメントされていたkamachiさんと同じく、
個別記事ではサイドバーがずれてしまうので、
これからまた試行錯誤しながら直して行きたいと思います。
9. Posted by junike   2005年05月14日 16:54
>hiyohiさん
どうしてでしょうねぇ。。
ぼくが実験したところや、上のコメントのliuliuさんは個別記事になってもサイドバーが下に下がるようなことはないのですが、なぜか下がってしまう人もいますね。何が違うのかわかりません。。
10. Posted by liuliu   2005年05月27日 00:58
junkikeさん、こんばんは〜
3カラムにできて、とても気に入っています。
ありがとうございます。
友達からの指摘で、その子のPCでは
右サイドバーに記事が重なって見えるそうなんです。
真ん中は可変で設定したつもりなのに。
やはり勉強しなきゃダメですね・・・
11. Posted by junike   2005年05月28日 16:06
>liuliuさん
返事が遅れました。
その人のPCの環境が何だか分かりませんが、可変じゃなくて固定でもだめですか?
このテンプレは難しいです。
12. Posted by liuliu   2005年05月29日 01:55
junkikeさん、
可変から固定に変えてみました。
私のPCでは全然問題ないので、
わかりませんが、聞いてみます。
お返事いただきありがとうございました。

コメントする

名前
 
  絵文字
 
 
お知らせ
★データの入れ替え作業で全記事が二重存在します。修正前のものと後のものが混在しています。
(2007/11/14以前のもの)

■画像について
個別ページで画像が表示されていないページでは記事右上の「次の記事」リンクをクリックすると同じ内容の記事で画像が表示されます。(「ImgRedを利用した引用」の画像はリンクが切れました
プロフィール
中年男性、北関東在住、未婚。05年5月にうつ病発症。現在も療養中。17年11月より午後だけの勤務。補聴器使用者。

Blogカスタマイズネタはこちらにまとめました。

自己紹介 兼 足跡帳

小春日和の意味:「晩秋から初冬にかけての暖かく穏やかな晴天」(こちら[外部リンク]が詳しいです)


※記事やこのブログに関係のないトラックバックやコメントはこちらで削除することがあります。
近況報告
19/3/21up

08年3月よりうつ病。
いくつかの職を経て、17年11月より午後だけの4時間勤務。事務。

最新コメント
月別
カテゴリー別
検 索
Google

WWW ThisBlog
記事検索