ブログデザイン変更の記録 その2 [blog]
◇
さっそく前回の記事の続き
今回は、いよいよサイドバーの幅を広げる
「So-netブログ サイドバー 幅 広げる」でググってヒットしたys_ootaさんのブログ記事を参考にしながら・・・
ちなみにカラーを新春ヴァージョンに変更した後のテンプレートは、これ(再掲)
5.サイト全体の幅を広げる
まずは、サイドバーの幅を広げる前段階としてサイト全体の幅を広げる
①広げたいサイドバーの幅の分+αを計算しておく
(メインカラムの左余白とサイドバーとの間隔も広げたかったので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;
その結果、こうなった
6.サイドバーの幅を広げる
どのくらい広げればバランスが良いかは、一度ざっくりやってみて後は微調整
・上記と同じ手順で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;
}
その結果、こうなった
7.メインカラム(記事部分)の左端の余白を広げる
前々から、本文を読みやすいよう左端の余白を多く取りたかったので(見た目上のバランスも考えて)余白を広げてみる
・5と同じ手順で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;
}
その結果、こうなった
8.タイトル文字とブログ説明文の位置を調整
思いっきり左にずれてしまったので調整をする
・5と同じ手順で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;
}
その結果、こうなった
本当はタイトル部分の葉っぱの画像も、サイト全体の横幅に合わせたかったけれど、疲れたのでここまでにした
さて次はカレンダーを大きくし、最終的に文字を全体的に大きくして読みやすくする
(次回に続きます)
ブログデザイン変更の記録 [blog]
◇
サイドバーの幅を広げたりして、このブログのレイアウトを改良したことを、先日の記事で報告した
そこで、これまでのブログデザインを変更してきた経過を、忘れない内に自分の覚え書きとして、記録しておこうと思う
まず、ブログ開設時のオリジナルテンプレートは、これ
「saia's blog」はここから始まった
1.ブログタイトルの文字を大きくする(2015年10月)
まずは、タイトルがあまりにも小さかったので、なんとか大きくしたかった
①So-netブログ 使い方マニュアルの「CSSの基礎知識」と「CSS編集」、「CSSセレクタ(タグ)一覧」を参照しながら・・・
②管理ページの「デザイン」のタブをクリック → 「テンプレート管理」 → 現在使用中のテンプレートを選択して[編集]をクリック
③「スタイルシート編集」の画面からCSSを編集する
#banner h1{
margin:0;
padding:80px 0 0 14px;
font-size:16px;
font-family: Helvetica,Arial,sans-serif;
}
(これ ↑ の青い部分を、これ ↓ の赤に)
#banner h1{
margin:0;
padding:80px 0 0 14px;
font-size:42px;
font-family: Helvetica,Arial,sans-serif;
}
その結果、こうなった
2.訪問済みのリンクの色が変わるよう変更(2015年11月)
次に、訪問済みのリンク文字が、通常の緑(#007f00)から青緑色(#006598)に変わるようにしてみた
・上記と同じ手順でCSSを編集
/*-----Common-----*/
a:link{ text-decoration: none; color:#007f00; }
a:visited{ text-decoration: none; color:#007f00; }
a:active{ text-decoration: none; color:#007f00; }
a:hover{ text-decoration: underline; color:#007f00; }
(これ ↑ の青い部分を、これ ↓ の赤に)
/*-----Common-----*/
a:link{ text-decoration: none; color:#007f00; }
a:visited{ text-decoration: none; color:#006598; }
a:active{ text-decoration: none; color:#007f00; }
a:hover{ text-decoration: underline; color:#007f00; }
3.テンプレート背景とブログタイトルの色を変更①(2015年12月)
テンプレート背景の色がグレーであまりにも寂しそうだったので、クリスマスヴァージョンに変えてみた
・1と同じ手順でCSSを編集
body {
background:#666666;
}
~ ~ ~
#banner h1 a{
color:#ffffff;
}
(これ ↑ の青い部分を、これ ↓ の赤に)
body {
background:#980000;
}
~ ~ ~
#banner h1 a{
color:#FF3232;
}
ヘッダーの色を「赤」に変更
その結果、こうなった
4.テンプレート背景とブログタイトルの色を変更②(2016年1月)
一度変更しているので、今度は簡単に変えられた(新春ヴァージョン)
・1と同じ手順で、CSSを編集する
body {
background:#980000;
}
~ ~ ~
#banner h1 a{
color:#FF3232;
}
(これ ↑ の青い部分を、これ ↓ の赤に)
body {
background:#FF9800;
}
~ ~ ~
#banner h1 a{
color:#FF9800;
}
ヘッダーの色を「オレンジ」に変更
その結果、こうなった
さて、次はいよいよサイドバーの幅を広げる
(次回に続きます)