アメブロの横幅を広げたり狭くしたりする方法を説明

アメブロの新しいテンプレートでの横幅調整は難しい部分があります。

横幅を広げる際は良いかもしれませんが、狭くする場合は、有料で広告を消さないと狭くできる範囲は限られてしまいます。

デフォルトのアメブロテンプレートの横幅は、980pxで指定されていますが、実際にCSSを調整してみた所、当サイトと同じ940pxの幅に狭くすることはできました。

しかし、実際には、3カラムテンプレートでは広告が切れたり、大きすぎてデザインがズレたりするなど、実現はできませんでした。

当サイトの場合、こちらのブログサイトと同じデザインにしたかったので、本来は3カラムのテンプレートの使用を考えていましたが、実現できなかったので、仕方なしに2カラムテンプレートで横幅を940pxまで狭くしました。

そんな経緯もあり個人的な感想として、無料でアメブロを使っている場合、横幅を狭める事はあまり実用的ではないかなと思いました。

とまぁ個人的な感想はこれくらいにして、まずは、横幅の理解を深めて頂く為にアメブロの枠部分の構造を書き出してみましたので、興味のある方は参考にしてみて下さい。

大体、こんな感じの構造になっています。

ちなみにもっと簡素化していきますので、ご安心下さい。

続いて、もう少し横幅について理解を深めて頂く為に、横幅を広げたり狭くする際に使用する、アメブロのCSSと実際に個々が使用しているカラムとの連動性について少し説明させて頂こうと思います。

まず、アメブロの幅を変える際に出てくる属性にcolumnというものがあります。これは、実際に使用しているカラムとの連動を表しています。

次の画像をご覧下さい。

アメブロの幅を変える際は、上の画像のように自分が使用しているカラムによって.columnの記載がABCDEと異なりますので、始めにこれを覚えておくとカスタマイズしやすいかと思います。

一応、もう少し説明させて頂くと、

• 2カラム・メニュー左
  .columnA
• 2カラム・メニュー右
  .columnB
• 3カラム・右ワイドメニュー
  .columnC
• 3カラム・左ワイドメニュー
  .columnD
• 3カラム・右メニュー
  .columnE

となっていますので、カスタマイズする場合は、その部分だけ書き換えれば横幅の変更は可能です。

以下、アメブロの横幅を調整するCSSです。コピペしてCSSの一番下に貼り付ければ、横幅の修正が可能です。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

上記CSSで自分の使用しているカラムの横幅（数字pxの部分）を調整してからCSSの一番下にコピペして貼り付ければ、横幅調整が可能です。

当サイトの場合は、『2カラム・右メニュー』で.columnBに該当するので、その部分だけ以下のように書き換えています。

2カラムの場合、たったこれだけの記述だけでも横幅の調整が実現できます。

ちなみにわかりやすいように

も記述しましたが、これは右サイドメニュー部分の横幅で、当サイトの場合、元のCSSからの変更がないので本来は不要ですが、一応、記述しておきました。

ちなみにカラム間の隙間は『940px（全体）-620px（メイン（記事）カラム）-300px（サイドメニュー）＝20px（カラム間の隙間）』という感じに表示されると思います。（2カラム・メニュー右でしか試していませんが表示されています。）

横幅の調整は広告がらみのカスタマイズで、横幅を狭くすると広告が切れてしまい規約違反の問題も起きてくるかもしれませんので、注意してカスタマイズしてみて下さい。