ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors
電話番号: 03-3986-2773
電話番号: 03-3986-2773
ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » アメブロカスタマイズ サイドバーを左右同じ幅にする方法
投稿日: 2014/06/28
みなさん、こんにちは。
今回のカスタマイズは、広告を非表示にしている方のみ対応できるカスタマイズになっています。
使えそうと思った方は是非お試しあれ。
まずはこれを見てください。
アメブロは、３カラムのデザインにした場合、このようにサイドバーの左右の幅が違います。
全体の幅が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と決まっているので、幅を狭くしてしまうと、広告がかけてしまうのです。
つまり視認性が悪くなり、これは規約違反になってしまうことになります。
広告非表示にしている方は、是非試してみましょう♪
我社のマスコット『弁慶』です。
名前の由来：忠実な番犬
主な仕事：マスコットキャラとして認知度UP↑
不得意：電話
しゃべりが苦手なので、コンタクトはこちらから
我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。
Copyright(C)2014 ｜ ホームページ制作・SEO対策を通じて集客向上↑売上UP↑Cyber Accel-Advisors. All Rights Reserved.
