どうも横幅が広くなったなあと思い
時間がある時にでも
いじればいいやと適当なテンプレートを選んで
この間まで
放置してました。
先週の日曜日、時間ができたので
どれっ！
と取りかかったのです。
ブログの横幅を可変にしてみます→amebloの新デザインは大きく変わっていた｜蛙の目
はい、そこで新デザインに変わっていたことを知りました。そのことは上記のエントリーの後半に書いた通りです。
---------
それで今日、もう一度チャレンジと相成りました。
目標：TOP画像をオリジナルのものにし、横幅を少し狭くします。
カスタマイズできるテンプレートは多いのですが、
横幅を変えるためにCSSを変更できるのはただ一つ。
CSS編集用デザインだけです。
デザインの変更→カスタム可能→CSS編集用デザインを選んでください。
「CSSの編集」と「レイアウトの変更」ができるようになりますので、
まずはレイアウトを選びます。私は3カラムが好きなので3カラムにしました。
まずは画像を貼り付けます。
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:179px;
background: url(http://stat.blogskin.ameba.jp/blogskin_images/20130316/16/0e/de/j/o09790181blc1363418634514.jpg) no-repeat 50% 50% ;
width:980px;}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
text-align: right;
}
↑こんな感じ。
次に横幅です。
------------
.skinHeaderArea,.skinContentsArea{
width: 980px; /* ①全体の幅 */
}
.columnA .skinSubA,.columnB .skinSubA,
.columnC .skinSubA,.columnD .skinSubA,
.columnE .skinSubA{
width: 300px; /* ②(太い)サイドバーAの横幅 */
}
.columnC .skinSubB,.columnD .skinSubB,
.columnE .skinSubB{
width: 180px; /* ③(細い)サイドバーBの横幅 */
}
.columnC .skinMainArea,.columnD .skinMainArea,
.columnE .skinMainArea{
width: 470px; /* ④3カラム時のメインカラムの横幅 */
}
.columnA .skinMainArea,.columnB .skinMainArea{
width: 665px; /* ⑤2カラム時のメインカラムの横幅 */
}
.columnC .layoutContentsA,.columnD .layoutContentsA {
width: 785px; /* ⑥メイン＆サイドAを囲う領域 */
}
これを全体の幅を800px サイドバーAを170px mainを420px サイドバーBを170pxに変更してみます。
今日はここまで。