アメブロを横幅可変(リキッドレイアウト)にする

アメブロカスタマイズのわざめーばです。

こんにちは。

僕の超個人的ブログわざめーばの脳内を、新デザイン(CSS編集用デザイン)ベースで軽くカスタマイズしなおしたんですが、アメブロではあまり見かけないリキッドレイアウトにしてみました。

リキッドレイアウトというのは、ブログの表示幅が可変になっていて、ブラウザの表示幅に合わせて変わるようになっているレイアウトのことです。

アメブロのCSS編集用デザインの場合、広告表示義務の都合上、片方のサイドバーの横幅を300ピクセルより狭くできない制限がありますが、それをクリアしたリキッドレイアウト化の基本部分をご紹介しておきます。

以下のコードを、CSS編集用デザインの初期状態のユーザーCSSの末尾にコピペすると、リキッドレイアウト化することができます。

/* 『CSS編集用デザイン』をリキッドレイアウト化する */
/* by わざめーば ( http://ameblo.jp/wazameba/ ) */

/* ページ全体 */
body { min-width: 980px; }

/* ブログ枠 */
.skinFrame { min-width: 970px; padding: 0 0.5%; }

/* ヘッダー部 */
.skinHeaderArea { width: auto; }

/* コンテンツ部 */
.skinContentsArea { width: auto; }

/* メインカラム + 幅広サイドバー 幅設定 */
.columnC .layoutContentsA, .columnD .layoutContentsA,
.columnE .layoutContentsA { width: 80.5%; min-width: 785px; }
.columnE .layoutContentsA { float: left; }

/* メインカラム 幅設定 */
.columnA .skinMainArea, .columnB .skinMainArea
{ width: 68.0%; min-width: 450px; }
.columnC .skinMainArea, .columnD .skinMainArea,
.columnE .skinMainArea { width: 59.5%; min-width: 450px; }

/* 幅広サイドバー 幅設定 */
.columnA .skinSubA, .columnB .skinSubA
{ width: 31.0%; min-width: 300px; }
.columnC .skinSubA, .columnD .skinSubA, .columnE .skinSubA
{ width: 39.5%; min-width: 300px; }

/* 細いサイドバー 幅設定 */
.columnC .layoutContentsB, .columnD .layoutContentsB,
.columnE .layoutContentsB { width: 18.5%; min-width: 180px; }
.columnC .skinSubB, .columnD .skinSubB, .columnE .skinSubB
{ width: auto; }
.columnE .layoutContentsB { float:right; }
.columnE .skinSubB { margin-left: 0; float:none; }

/* ページナビ */
.pagingArea { width: 100%; }
.pagingPrev
{ width: 28.75%; left: 10px; right: auto; overflow: hidden; }
.pagingNext
{ width: 28.75%; left: auto; right: 10px; overflow: hidden; }

/* サイドバー内 調整 */
.blogSearchForm { margin: 20px auto; }
.skinSubB .userProfileImageArea
{ margin-left: auto; margin-right: auto; }
.skinSubB .profileBtnArea { text-align: center; }
.skinSubA .profileBtnArea { width: 270px; }

一応、2カラム2種、3カラム3種の全5種類のカラムレイアウトに対応できていると思います。

誤解のないよう書かせてもらいますが、決して、わざめーばの脳内のデザインになるわけではありません。

(近いテンプレートを近々配布しようと思います。)

また、既にある程度カスタマイズを進められたデザインに対して適用すると、全体が滅茶苦茶になってしまう可能性が高いので、やらない方がいいと思います。

飽くまでも、CSS編集用デザインの初期状態に適用することでリキッドレイアウト化し、そこからカスタマイズを進めて行くベースとするためのCSSです。

なお、リキッドレイアウトは、横幅がコロコロ変わるため画像の扱いが難しくなるなど色々と制約が多く、初心者向けではないと思います。

それでもチャレンジしてみたいという方がおられましたら、どうぞ参考になさってください。

以上、アメブロのCSS編集用デザインを横幅可変(リキッドレイアウト)にする方法をご紹介しました。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ

アメブロカスタマイズで人が集まるブログ作り