ブログデザイン変更の記録 その２ [blog]
◇
さっそく前回の記事の続き
今回は、いよいよサイドバーの幅を広げる
「So-netブログ サイドバー 幅 広げる」でググってヒットしたys_ootaさんのブログ記事を参考にしながら・・・
ちなみにカラーを新春ヴァージョンに変更した後のテンプレートは、これ（再掲）
５．サイト全体の幅を広げる
まずは、サイドバーの幅を広げる前段階としてサイト全体の幅を広げる
①広げたいサイドバーの幅の分＋αを計算しておく
（メインカラムの左余白とサイドバーとの間隔も広げたかったので100px広げることにした）
②前回同様、So-netブログ 使い方マニュアルの「CSSの基礎知識」と「CSS編集」、「CSSセレクタ(タグ)一覧」を参照しながら・・・
③管理ページの「デザイン」のタブをクリック → 「テンプレート管理」 → 現在使用中のテンプレートを選択して［編集］をクリック
④「スタイルシート編集」の画面からCSSを編集する
#container {
width :770px;
margin:0 auto;
background:#ffffcc url("/_common/skins/101/images/banner-bg.jpg") no-repeat center top;
line-height:1.4;
text-align:left;
（これ ↑ の青い部分を、これ ↓ の赤に）
#container {
width :870px;
margin:0 auto;
background:#ffffcc url("/_common/skins/101/images/banner-bg.jpg") no-repeat center top;
line-height:1.4;
text-align:left;
その結果、こうなった
６．サイドバーの幅を広げる
どのくらい広げればバランスが良いかは、一度ざっくりやってみて後は微調整
・上記と同じ手順でCSSを編集
/*-----Side-----*/
#side-a, #side-b {
width:202px;
overflow:hidden;
}
.sidebar {
width:202px;
overflow:hidden;
}
（これ ↑ の青い部分を、これ ↓ の赤に）
/*-----Side-----*/
#side-a, #side-b {
width:270px;
overflow:hidden;
}
.sidebar {
width:270px;
overflow:hidden;
}
その結果、こうなった
７．メインカラム（記事部分）の左端の余白を広げる
前々から、本文を読みやすいよう左端の余白を多く取りたかったので（見た目上のバランスも考えて）余白を広げてみる
・５と同じ手順でCSSを編集
/* Articles */
#main {
width:540px;
/*padding-right: 12px;*/
padding-right: 0;
padding-left: 12px;
float:left;
}
.articles {
width:540px;
overflow:hidden;
}
（これ ↑ の青い部分を、これ ↓ の赤に）
/* Articles */
#main {
width:530px;
/*padding-right: 12px;*/
padding-right: 0px;
padding-left: 30px;
float:left;
}
.articles {
width:530px;
overflow:hidden;
}
その結果、こうなった
８．タイトル文字とブログ説明文の位置を調整
思いっきり左にずれてしまったので調整をする
・５と同じ手順でCSSを編集
#banner h1{
margin:0;
padding:80px 0 0 14px;
font-size:42px;
font-family: Helvetica,Arial,sans-serif;
}
#banner h1 a{
color:#FF9800;
}
#lead{
padding:0 14px;
color:#ffffff;
}
（これ ↑ の青い部分を、これ ↓ の赤に）
#banner h1{
margin:0;
padding:70px 0 0 70px;
font-size:42px;
font-family: Helvetica,Arial,sans-serif;
}
#banner h1 a{
color:#FF9800;
}
#lead{
padding:0 70px;
color:#ffffff;
}
その結果、こうなった
本当はタイトル部分の葉っぱの画像も、サイト全体の横幅に合わせたかったけれど、疲れたのでここまでにした
さて次はカレンダーを大きくし、最終的に文字を全体的に大きくして読みやすくする
（次回に続きます）
saiaさん こんばんは
私もやってみたいとは思ったことがありますが、いまだに実現していません。すばらしいです。
by SORI (2016-01-25 21:24)
＞SORIさん
褒めていただきありがとうございます！
初めはこわごわだったのですが、上手くいった時とても嬉しくて、いつの間にか楽しくなっていました。
好奇心旺盛なのが幸いしたようです(*'▽')
by saia (2016-01-25 22:25)
私もサイドバーを広げたいと思ってました。
ありがとうございました＾＾
by ぽちの輔 (2016-01-26 07:06)
お早うございます、カニ食べに行こうにコメントを有難うございました。
いろいろ技術が有るんですね。
自由に変更が出来たら楽しそうですね、
今は、記事を作るのが精一杯です。
by tarou (2016-01-26 07:58)
＞ぽちの輔さん
ぽちの輔さんのブログは３カラムのデザインで左右両サイドにサイドバーがあるので、やりがいがありそうですね！
この記事がお役に立てたら嬉しいです(o^^o)
こちらこそありがとうございました！
by saia (2016-01-26 08:21)
＞tarouさん
とんでもないです。 見よう見まねでやってみたら出来ちゃったって感じですσ(^_^;)
でも楽しいです！
私も記事を書くことの方に注力せねばと思っています。。。
by saia (2016-01-26 08:27)
すごーい！
今日は仕事が終わってから
ゆっくりじっくり読ませていただきます！
by あとりえＳＡＫＡＮＡ (2016-01-26 12:22)
＞あとりえSAKANAさん
うふっ(o^^o)♪ 是非ゆっくりご覧ください！
そんな風に言っていただいてとっても嬉しいです♡
by saia (2016-01-26 12:58)
思い入れのあるデザインだとブログも一段と楽しくなりやすね！
by ぼんぼちぼちぼち (2016-01-26 16:50)
＞ぼんぼちぼちぼちさん
はい！ でも、、、iphone（スマホ）で見ると、なーんにも変わってないのです(T_T)
とってもショックです・・・
So-netブログの限界ですね(>_<)
by saia (2016-01-26 17:09)
こんばんは。
訪問＆nice＆コメント有難うございます。
幅の広いブログは、私もどうやるのか気になってました。
今度時間のある時に、挑戦してみたいと思います。
by SHIGE (2016-01-27 00:47)
＞SHIGEさん
こちらこそ早々にご訪問いただきありがとうございました！
一番最初にテンプレートを選ぶ段階で、「ワイド」と表示されているデザインを選べばかなり横幅が広いものになるようです。
でも私はこれを選んで始めてしまったので、愛着があってσ(^_^;)
SHIGEさんも是非、挑戦されてみてください！
by saia (2016-01-27 07:57)
こんばんは( *´艸｀)今日もいろいろありがとうございました(;´Д｀)
誤字の指摘など助かりました(*´ω｀*)
by タケサバス (2016-01-28 19:44)
＞タケサバスさん
とんでもないです〜！
さしでがましいこととは思いつつ、ついお伝えしてしまいました！
またいろいろ教えてくださいねヾ(＠⌒ー⌒＠)ノ
by saia (2016-01-28 21:01)