2009年12月21日

昨日、このblogのデザインを、2カラム構造から3カラム構造へと変更しました。

これにより、右側にお勧めの動画などを載せたり出来るようになりました。
これで、表現の幅も増えることと思います。

それで、デザインを変更する前に「livedoor ナレッジ」で情報を収集しようとしたのですが、
ホントにサクっとしか探していませんが、どうにも自分が求めている情報が無かったので、
この際、折角なので自分のやった方法を紹介したいと思います。


ただし、これから記載するのは、あくまでイメージです。
『2カラムから3カラムに変更するにはこんな感じだよ〜』みたいな。
なので、具体的なHTMLやCSSの記述方法については触れませんし、解説もしません。

実際に自分で変更する場合、最低限必要な知識を集めてから行ってください。
この点については、ご承知置きいただきたいと思います。

とは言え、このイメージがあると無いとでは、全然効率が変わってくると思いますので・・・。



先ず、2カラムのイメージからですが、
(便宜上、タイトルをT、主文部分をM、左サイドバーをL、右サイドバーをRと表記します。)

一般的な2カラム

と、こうなります。
右と左の違いはあれど、これが一般的な2カラム構造になります。

そして、比較的一般的な3カラム構造は、

従来の3カラム

となり、先ずLとMRで枠を作り、さらにMR内にMとRの枠を作る事になります。
この場合も、LとRの順番はどちらでもいいのですが、
これだと箱の中にさらに箱を作る形となり、ソースが判りにくくなりがちなんですね。


そこで、自分もこの形で3カラムに変更させようと、
livedoor Blogの比較的新しい3カラムデザインのテンプレートを参考にするべく調べた所、
上記とは違う方法で3カラム構造にしてることに気が付きました。


その違う方法というのは、
先ず、Mの左右にLとRで欲しい分だけmarginで余白を取り、
その後CSSでそれぞれその余白の上にLとRを乗せるという方法です。


図で表すと、こんな感じ。

はじめに枠を決めてから…

としたあと、CSSで位置を直すと、

CSSで整形するとこうなる


このような3カラム構造のBlogが出来上がるという訳です。


これらの工程で書き換える部分は、
HTML周りでは、<$PluginList_A$>と<$PluginList_B$>を構成する部分だけと、
CSS周りでは、M部分とL部分とR部分を構成するfloat周りの変更だけです。

勿論、それぞれのブログの構成や、
好みによって書き加えたりしなければならない部分が出てくるとは思いますが、
基本的にはこれで大抵の2カラムブログを3カラムに変更出来ると思います。


(15:50)
Comments(0) | TrackBack(0) | blogのこと |

コメントする

名前
URL
 
  絵文字
 
 

トラックバックURL

TVアニメ「ゆるゆり」応援中
ドリクラPV
亜麻音 「sweet×2☆summer」PV


みお 「StayWithMe!」PV


雪 「Hi!-Kin-goo」PV


玲香 「ステキなmagician」PV


魅杏 「Real」PV


るい 「イケないLipStick」PV


理保 「カンパイ☆LOVE」PV


ナオ 「愛しきHero!」PV
llowFullScreen="true" allowScriptAccess="always" />

魔璃 「月の露珠」PV


アイリ 「TimeTraveler」PV