アメブロのデザインを横幅可変(リキッドレイアウト)にする方法

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

こんにちは。

今回は、CSS編集用デザインを適用したアメブロのデザインを横幅可変(リキッドレイアウト)にするカスタマイズ方法をご紹介します。

以前にも似たような方法をご紹介したのですが、以前の方法では、ブログ横幅が変わるにつれてサイドバーの幅も変わってしまったためやや使いにくかった印象があるのですが、今回の方法ではサイドバーの幅は変わりません。

なので、以前ご紹介した方法と比較しても、いく分扱いやすくなるのではないかと思っています。

ただし、全体あるいはメインカラムの横幅が可変になることで、画像等の扱いが煩雑になる可能性があることは同様ですのでご注意ください。

では、やり方です。

CSS編集用デザインを適用したアメブロのデザインを横幅可変(リキッドレイアウト)にするには、ユーザーCSSの末尾に以下のコードを追加してください。

.skinHeaderArea, .skinContentsArea{
  width: auto;
  margin: 0 10px;
}

/* 2カラム左サイドバー */
.columnA .skinMainArea{
  width: 100%;
  margin-left: -310px;
}
.columnA .skinMainArea2{
  margin-left: 310px;
}

/* 2カラム右サイドバー */
.columnB .skinMainArea{
  width: 100%;
  margin-right: -310px;
}
.columnB .skinMainArea2{
  margin-right: 310px;
}

/* 3カラム右幅広サイドバー */
.columnC .layoutContentsA{
  width: 100%;
  margin-left: -180px;
}
.columnC .skinMainArea{
  width: 100%;
  margin-right: -300px;
}
.columnC .skinMainArea2{
  margin-left: 190px;
  margin-right: 310px;
}

/* 3カラム左幅広サイドバー */
.columnD .layoutContentsA{
  width: 100%;
  margin-right: -180px;
}
.columnD .skinMainArea{
  width: 100%;
  margin-left: -300px;
}
.columnD .skinMainArea2{
  margin-right: 190px;
  margin-left: 310px;
}

/* 3カラム右2列サイドバー */
.columnE .skinMainArea{
  width: 100%;
  margin-right: -500px;
}
.columnE .skinMainArea2{
  margin-right: 500px;
}

このコードは、CSS編集用デザインで用意されている5種類のレイアウト全てに対応するように作ってあります。

ただし、サイドバーの横幅を初期状態から変更してある場合は、それに合わせて適宜数値を変更する必要がありますのでご注意ください。

なお、既にある程度カスタマイズを進めてあるブログに適用すると、デザインが大きく崩れてしまう可能性があります。

また、本ブログでご紹介している方法も含め、一般的なアメブロカスタマイズ用のノウハウは、横幅固定であることを前提としている場合が多いので、横幅を可変(リキッドレイアウト)にすることで使えなくなってしまうカスタマイズ方法もありえることもご承知おきください。

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

よかったら参考にしてみてください。

関連記事

CSSを編集してアメブロをカスタマイズする手順

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