ドツボにはまりました。
なんか春が来るたびに繰り返しています。
最後は適当にごまかしてしまうので進歩がないのですね。
でも今回は昨年変更になった新デザインを使っていますので、だいぶ今までとは違います。
簡単になったと思いきや、ますます複雑になったように見えます。
わかれば大したことはないのですが、わかるまでが時間がかかります。
今回はじっくり行きます。
電卓とメモ帳が必要です。電卓はスマホでいいでしょう。
参考にしたのは
アメブロカスタマイズで成功するブログを作ろう
まずは
[昨日までの作業]
Ameblo新デザインのことを今頃になり知ってしまった｜蛙の目
ブログタイトルの下の画像の設定が終わったところまででした。
そして本日の作業はいよいよ横幅を縮めます。
1）縮める前は、横幅が980pxあり、さらに右サイドバーが300pxという変な仕様がameblo新デザインのCSS編集用のデフォルト。
300pxとはameblo運営者側の広告を表示するために広く取ってあるのですが、いかにも邪魔。
２）そこで月額980円も払って広告非表示にしました。（これは1月に完了）
３）横幅を900px 右サイドバーを200px 左サイドバーを180px
これが目標です。この数字がいろいろなところに連動するので厄介なのです。
そこで上記のアメブロカスタマイズで成功するブログを作ろうを参考にしました。
具体的にはブログ全体・各カラムの横幅を変更・調整する方法｜アメブロカスタマイズで成功するブログを作ろうという記事です。
/*************************************************
ブログ全体・各カラムの横幅調整
by わざめーば http://ameblo.jp/wazameba/
*************************************************/
.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を囲う領域 */
}
というサンプルがあり、さらに⑤と⑥を求める式が書いてありました。
＞■変更ルール(カッコ内は初期状態の場合の数値)
⑥(785)＝②(300)＋④(470)＋15
①(980)＝②(300)＋⑤(665)＋15
①(980)＝③(180)＋⑥(785)＋15
これに従えば
私の目標は①が900 ②が200 ③が180です。④はメインに記事部分の横幅ですので
仮に500pxにしてみます。最大の横幅から左右のサイドバーの幅の合計を引き算すると
900-380＝520ですので20pxの余裕をみて500pxにしました。
そうすると⑤は685px⑥は715pxとそれぞれも止まりますので、
上記のcssサンプルを書き換えてみます。
/*************************************************
ブログ全体・各カラムの横幅調整
by わざめーば http://ameblo.jp/wazameba/
*************************************************/
.skinHeaderArea,.skinContentsArea{
width: 900px; /* ①全体の幅 */
}
.columnA .skinSubA,.columnB .skinSubA,
.columnC .skinSubA,.columnD .skinSubA,
.columnE .skinSubA{
width: 200px; /* ②(太い)サイドバーAの横幅 */
}
.columnC .skinSubB,.columnD .skinSubB,
.columnE .skinSubB{
width: 180px; /* ③(細い)サイドバーBの横幅 */
}
.columnC .skinMainArea,.columnD .skinMainArea,
.columnE .skinMainArea{
width: 500px; /* ④3カラム時のメインカラムの横幅 */
}
.columnA .skinMainArea,.columnB .skinMainArea{
width: 685px; /* ⑤2カラム時のメインカラムの横幅 */
}
.columnC .layoutContentsA,.columnD .layoutContentsA {
width: 715px; /* ⑥メイン＆サイドAを囲う領域 */
}
となります。
さて、このcssサンプルを貼る位置ですが、
（３）エリアのスタイルのすぐ下がいいと思い、貼ってみました。
/*（３-1）ボディ）（全体）--------------*/
の下でしょうか。
--------
うまくいきました！
6個の数字をうまく導き出すことがコツですね。
【カスタマイズ本はこちら】
アメブロをカスタマイズ 魅せるブログデザインを作ろう！改訂版
posted with amazlet at 13.03.17
本岡 毬穂 中嶋 茂夫
ソシム
売り上げランキング: 91,576
ソシム
売り上げランキング: 91,576
![アメブロデザイン・カスタマイズブック ~[Facebook][Twitter][mixi][Google+]と繋がる!](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fecx.images-amazon.com%2Fimages%2FI%2F51sqYVxaADL._SL160_.jpg)
アメブロデザイン・カスタマイズブック ~[Facebook][Twitter][mixi][Google+]と繋がる!
posted with amazlet at 13.03.17
山田直樹 山田華月 田口和裕
エムディエヌコーポレーション
売り上げランキング: 43,984
エムディエヌコーポレーション
売り上げランキング: 43,984
