BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » アメブロカスタマイズ サイドバーを左右同じ幅にする方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ サイドバーを左右同じ幅にする方法

   投稿日: 2014/06/28

si.jpg

      

      

みなさん、こんにちは。

      

今回のカスタマイズは、広告を非表示にしている方のみ対応できるカスタマイズになっています。

使えそうと思った方は是非お試しあれ。

      

まずはこれを見てください。

      

      

3カラム表示を選ぶとサイドバーの幅が左右で違う!?

      

      

blog-g6.jpg

     

     

アメブロは、3カラムのデザインにした場合、このようにサイドバーの左右の幅が違います。

      

全体の幅が980px。

広いほうが300px。狭いほうは180pxです。(左右の位置は選べます)

      

上の図を見ると、記事を書くエリアが、広いほうに押されてちょっとずれているのが分かりますね?

      

これだとちょっと読みづらい感じを受けませんか?

なんとなく狭くも感じます。

      

      

左右のサイドバーの幅を揃えてみよう

      

      

blog-g5.jpg

     

     

どうですか?

      

記事エリアが中央にくることによって、だいぶ読みやすいブログになったような気がしませんか?

      

あれ??あまり変わらないですか?

      

微妙なズレや、少し曲がってるというのがすごーく気になる性格の私にとっては

これはずいぶんと違いがあります(笑)

      

      

実際にCSSを編集してみましょう!

      

      

まずやってみましょう!やり方は簡単です!

     

     

blog-g1.jpg

     

     

「デザインの変更」を選ぶと「CSSの編集」を行える場所があります。

     

まずはここをクリック。

     

     

blog-g2.jpg

     

     

このように、青い枠で囲まれた編集コードがありますのでその一番下までいき、

以下のソースコードをコピーして、図のように「その他、拡張があれば記述」の下にぺたりと貼るだけ!

 

     

.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と決まっているので、幅を狭くしてしまうと、広告がかけてしまうのです。

つまり視認性が悪くなり、これは規約違反になってしまうことになります。

 

広告非表示にしている方は、是非試してみましょう♪

 



TOPへ