2012年8月16日木曜日

アメブロの横幅を変えてみる

��SS編集用デザインを採用しているという前提でお話を進めていきます。

デフォルトの設定(初期設定)ですと、横幅が980pxです。デスクトップパソコンのワイドモニターからですと、横幅は1000pxの方が見やすいです。一方、モバイル端末やノートパソコンからご覧いただく場合には860pxほどが見やすいです。

アクセス解析から、モバイル端末からの閲覧数がわかりますのでぜひご覧ください。

��SSの最後に記述を加えれば変更できるのですが、編集する前に今のCSSをメモ帳にコピーして保存しときましょう。変更を元に戻したい時のため、やっておいた方が無難です。

��横幅を1000pxにする>
.skinHeaderArea,
.skinContentsArea{
width:1000px;
}
.columnA .skinMainArea,
.columnB .skinMainArea{
width:685px;
}
.columnC .layoutContentsA,
.columnD .layoutContentsA{
width:805px;
}
.columnC .skinMainArea,
.columnD .skinMainArea,
.columnE .skinMainArea{
width:490px;
}

��横幅を860pxにする>
.skinHeaderArea,
.skinContentsArea{
width:860px;
}
.columnA .skinMainArea,
.columnB .skinMainArea{
width:545px;
}
.columnC .layoutContentsA,
.columnD .layoutContentsA{
width:655px;
}
.columnC .skinMainArea,
.columnD .skinMainArea,
.columnE .skinMainArea{
width:470px;
}

以上をCSSの最後に追加してください。
「ブログを確認したけど、変わってないよ」という方は、ブラウザの更新ボタンを押してみてください。
私が横幅を860pxに変更したところ、3カラムだと右側のカラムが下に下がってしまいました。2カラムにデザインを変更させた方がいいみたいです。

0 件のコメント:

コメントを投稿