解決済
第4世代のHTMLテンプレートの構造について
第4世代のHTMLテンプレートが追加されましたが色々と構文や構造が変わったみたいなので
だれかチェックした人は
主な部分を教えてください。
3カラムにwrapperが無いし
sideの記述も変わったので
構造をチェックするのに苦戦してます。
回答(1)
3.
見落としていました。。
大雑把にサッとまとめてみました。
●3カラム
●2カラム
●各部の説明
table#header ヘッダー広告 div.contents-outer コンテンツ全体のブロック div.blog-title-outer(-2,-3) ヘッダーのブロック h1#blog-title： ブログタイトル div.blog-description-outer ブログの説明 div#contents 記事とサイドバーを内包するブロック div#main 中央のブロック（外） div#main-inner 中央のブロック（内） div.paging-outer ページャーのブロック div.article-outer 記事のブロック div#sub 3カラムでは左サイドバー、2カラムではサイドバー上部 div#extra 3カラムでは右サイドバー、2カラムではサイドバー下部 div.footer-outer フッターのブロック注、#mainはマイナスマージンを使って、#sub、#extraと領域が重なっています。
●カスタマイズ
全体の幅を変える
div.contents-outerのwidthサイドバーの幅を変える（3カラム）
div#subのwidth、backgroundの上背景画像の編集とURL指定 div#extraのwidth、margin-left、backgroundの上背景画像とURL指定 div#sub-innerの下背景画像の編集とURL指定 div#extra-innerの下背景画像のURL指定 div#main-innerのwidthサイドバーの幅を変える（2カラム）
div#mainのmargin（2番目の値） div#main-innerのmargin（2番目の値）、のwidth div#subのwidth、backgroundの上背景画像の編集とURL指定 div#extraのwidth、backgroundの下背景画像の編集とURL指定
●追記
記事部分がウィンドウに合わせて幅が可変するリキッドデザインです。
大きな画像を貼ってもサイドバーが落ちにくくなっています。
ウィンドウ幅800px以下は辛いです。特にIE6でレイアウトが崩れます。
まだ一部修正予定があるとのことです。
これは凄い!!!
こんな辺鄙なところに載せるのはもったいないくらいです。
ここよりもWikiやblogに載せたらとても役に立ちような気はします。
ちなみに先日のタグ機能の強化の際に
contentsがcontentに変わったり
inner、outerなど色々と変わってるみたいです。
コメント(9)
とりあえず開発日誌のソースをチェックしてみましたが、降参です。
とりあえず記事エリアは<div id="content">から"contents"に
コメント部分はリストタグでの表示に変わってましたね～
カスタマイザー泣かせです。
あのデザインは
記事部分の幅を広げたいという
質問が増えると思うんですが
その辺の解析もまだできませんでした。
とりあえず、わかったところから
Wikiにでも表としてUPしようと思ったんですが
livedoorのWikiで表を作ろうとしたら
横には統合できても
縦には統合できないみたいなので
そこでもつまずいてしまって
自分でなんとかしようという気力は
果てしなく落ちてます。
取り急ぎ3カラムを大雑把に。
id="header" ←ヘッダー広告 class="contents-outer" ←本文 class="footer-outer" ←フッター
contents-outerの中が
id="blog-title-outer" ←ヘッダー id="contents" ←本文
さらにcontentsの中が
id="main" ←記事（センター） id="sub" ←左サイドバー id="extra" ←右サイドバー
リキッド＋コーナーの丸めをするためにdivを4つ重ねているのがちょっと紛らわしいですが
そんなに複雑ではないと思います。
あとは詳しい方におまかせします。
Firefoxを使っているならFirebugというアドオンを使うとすぐ分かります。
imqさん、ありがとうございます。
私も色々と調べてみましたが
subとextraのコーナーも
画像をのためにdiv4つ設定できるようになれば
キレイに大きさを変えられそうな感じ。
サイドバーのコーナーの丸みさえ気にしないなら
div#subとdiv#extraのwidthと
div#extraのmargin-leftのマイナスの数値の
3つを変更して
div#main-innerのmargin: 0 ○px;の
○の部分を変更した数値＋10にしたら
サイドバーと本文の幅を変更できるみたいです。
私はサイドバーの丸みを
なんとかうまいことできるようになったら
メインブログのカスタマイズもやってみる予定。
サイドバーは幅固定なので、div2つで済ませていますね。
外divに上コーナー、内divに下コーナーの背景画像があります。
左右センター配置なので、幅を縮めるとコーナーの部分が隠れます。
上のコーナーの画像がdiv#subとdiv#extraにある
http://parts.blog.livedoor.jp/img/usr/default_2008...
下のコーナー画像がdiv#sub-innerとdiv#extra-innerにある
http://parts.blog.livedoor.jp/img/usr/default_2008...
この2つをダウンロードして、自分のPCで幅を縮めてから
再びアップロードしてCSSを変更すればいいと思います。
imgさんありがとうございます。
実はほぼ解析が終了して
色々と調整もやってみました。
そしてサイドバーの件も画像編集ソフトで
サイズ変更をやってみたのですが
IEとその他ブラウザでは微妙な誤差が出たり
見てる最中にブラウザのサイズを変更すると
崩れておかしくなるので
デザインをカスタマイズする際は
外してしまった方が楽という事になりました。
質問を閉じたいので
だれかなんでもいいので回答してください。
ベストまたは複数いる場合はナイスを差し上げます。
あれ？
回答のお知らせが来たのに
回答なしになってる…
お役に立てまして何よりでした。
早速最新のデザインに変更してみました。
再構築速！
