サイドバーの幅を揃えるカスタマイズ

こんにちは。
『やさしいブログの作り方』の松田です。

先日、サイドバーの左右の幅を揃えるととても見やすくなる、という記事を書いたところ数名の方から「やり方を教えてほしい」という声をいただきました。

現在アメブロで提供されているデザインスキンのサイドバーは左右の幅が違います。

広い方は300px、狭い方は180pxです。

※　旧デザインスキンはサイドバーの左右の幅は同じです。

新デザインスキンになってからサイドバーに大きな広告が入るようになりましたが、その広告の横幅が300pxありますので、それを表示させるためにサイドバーの左右の幅が異なるような形になっています。

それゆえ記事エリアがちょうどセンターに表示されないため、ブログの構図的には若干違和感を感じる方もいます。

実際、記事エリアがセンターに来るブログの方が体裁よく映ります。


CSSのカスタマイズで左右のサイドバーの幅を合わせることは可能ですので、今日はそのやり方をご紹介します。

CSSの最後に以下の記述を追記します。

.columnC .layoutContentsA{
float:right;
width:725px;
}
.columnC .skinMainArea{
float:left;
width:470px;
}
.columnC .skinSubA{
float:right;
width:240px;
}
.columnC .layoutContentsB{
float:left;
}
.columnC .skinSubB{
width:240px;
}
.columnD .layoutContentsA{
float:left;
width:725px;
}
.columnD .skinMainArea{
float:rightt;
width:470px;
}
.columnD .skinSubA{
float:ieft;
width:240px;
}
.columnD .layoutContentsB{
float:right;
}
.columnD .skinSubB{
width:240px;
}

これにより広い方のサイドバーの幅が60px狭く（240px）なり、狭い方のサイドバーが60px広く（240px）なりますので、左右のサイドバーの幅が揃い、記事エリアがセンターになります。


ただし、重要なことが一つ。

このカスタマイズを推奨するのは「広告を非表示にしている人のみ」です。

広告を非表示にしていない方でも上記のカスタマイズをすると、左右のサイドバーの幅を合わせることができます。

しかしサイドバーの横幅を300pxよりも小さく設定すると表示されている広告の一部が欠けてしまいます。

広告の表示を妨げるカスタマイズをすることはアメブロの利用規定で禁止されており、罰則の対象となります。

最悪の場合はIDはく奪の可能性もあります。


広告を非表示にしている人はサイドバーの広告も消えますので自由にサイドバーの幅を調整することができます。


最後までお読みいただきありがとうございました。

アメブロ初心者の方へ

見やすく、読みやすく、わかりやすく。
やさしいブログにするためのポイントを１日１テーマずつお話しています。
『やさしいブログづくりのための、やさしいメール講座』
（全５回／無料）

イベント、企画してみる？

セミナー、講座、お茶会、ランチ会　etc...
少人数のイベントを始めたい方・主催している方向けのメール講座です。
『今すぐ企画したくなる！　少人数イベント実施のための５つのステップ＋２が学べるメール講座』
（全７回／無料）

メルマガを始めたい方へ

どうせやるならお客さんとの関係を深めるメルマガを作りたい！
でもどうやって？ 私にも出来る？ そんな方向けのメール講座です。
『初めての人でも安心して始められるステップメールの作り方講座』
（全１０回／無料）