ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » アメブロカスタマイズ サイドバーを左右同じ幅にする方法
投稿日: 2014/06/28
みなさん、こんにちは。
今回のカスタマイズは、広告を非表示にしている方のみ対応できるカスタマイズになっています。
使えそうと思った方は是非お試しあれ。
まずはこれを見てください。
アメブロは、3カラムのデザインにした場合、このようにサイドバーの左右の幅が違います。
全体の幅が980px。
広いほうが300px。狭いほうは180pxです。(左右の位置は選べます)
上の図を見ると、記事を書くエリアが、広いほうに押されてちょっとずれているのが分かりますね?
これだとちょっと読みづらい感じを受けませんか?
なんとなく狭くも感じます。
どうですか?
記事エリアが中央にくることによって、だいぶ読みやすいブログになったような気がしませんか?
あれ??あまり変わらないですか?
微妙なズレや、少し曲がってるというのがすごーく気になる性格の私にとっては
これはずいぶんと違いがあります(笑)
まずやってみましょう!やり方は簡単です!
「デザインの変更」を選ぶと「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;
}
どうですか?あっという間です。
何故かと言うと二番目の図を見ると、ちょっと広告が欠けていますね。
四番目の図を見ると、注意点が書いてあるのが分かりますか?
「広告を消す行為、位置変更や視認性を悪くする行為は規約違反」とあります。
広告は300pxと決まっているので、幅を狭くしてしまうと、広告がかけてしまうのです。
つまり視認性が悪くなり、これは規約違反になってしまうことになります。
広告非表示にしている方は、是非試してみましょう♪