So-net無料ブログ作成
検索選択

ブログデザイン変更の記録 その3 [blog]


これまでのブログデザイン変更の経過を、自分の覚え書きとして記録してきたが、今回がとりあえず最後

さっそく前回の記事の続きを

ちなみに、サイト全体の幅とサイドバーの幅を広げた直後のテンプレートは、これ(再掲)

タイトルと記事説明文の位置調整



サイドバーの幅を広げたらカレンダーが小さくてバランスが悪く感じたので、前回と同じくys_ootaさんのブログ記事を参考にしながら、大きくすることにした


9.カレンダーを大きくする

 枠を広げ、日付も大きくする

 ①前回同様、So-netブログ 使い方マニュアルの「CSSの基礎知識」と「CSS編集」、「CSSセレクタ(タグ)一覧」を参照しながら・・・

 ②管理ページの「デザイン」のタブをクリック → 「テンプレート管理」 → 現在使用中のテンプレートを選択して[編集]をクリック

 ③「スタイルシート編集」の画面からCSSを編集する

/*--Calendar--*/

 ~ ~ ~

#calendar td{
height:20px;
width:20px;
font-size:10px;
background:#cccc99;
}

(これい部分を、これに)


/*--Calendar--*/

 ~ ~ ~

#calendar td{
height:24px;
width:26px;
font-size:14px;
background:#cccc99;
}


その結果、こうなった

カレンダーを大きくする



次に、全体的に文字を大きくして読みやすくするため、「So-netブログ 文字 大きくする」でググってヒットした「トレンドニュースのミックス」さんのブログ記事を参考にしながら・・・


10.ブログ全体の文字を大きくする

 ①メインカラムの文字その他を一括で大きくする

 ・と同じ手順でCSSを編集

/*-----Common-----*/

 ~ ~ ~

body {
background:#666666;
}

(これに、これの部分を挿入)

/*-----Common-----*/

 ~ ~ ~

body {
font-size: medium;  ←← 一行挿入
background:#FF9800;
}


その結果、こうなった

文字を一括で大きくする



 ②次にサイドバーの文字を大きくする

 ・と同じ手順でCSSを編集

/*-----Side-----*/

 ~ ~ ~

.sidebar-title {
margin:0;
padding: 2px 6px 2px 12px;
background: #9bd560;
font-size:x-small;
font-weight:normal;
color:#212121;
}

.sidebar-body {
padding:6px 12px 3px 12px;
}

(これい部分を、これに)

/*-----Side-----*/

 ~ ~ ~

.sidebar-title {
margin:0;
padding: 2px 6px 2px 12px;
background: #9bd560;
font-size:small;
font-weight:normal;
color:#212121;
}

.sidebar-body {
font-size:small;  ←← 一行挿入
padding:6px 12px 3px 12px;
}


その結果、こうなった

文字を一括で大きくする



 ③上記①の一括をやっても、記事下の日付などの文字が大きくならなかったので・・・

 ・と同じ手順でCSSを編集

/* Articles */

  ~ ~ 中 略 ~ ~

.posted{
padding:3px 0 20px 0;
border-top: #cecece dotted 1px;
font-size:x-small;
color:#212121;
}

(これい部分を、これに)

.posted{
padding:3px 0 20px 0;
border-top: #cecece dotted 1px;
font-size:small;
color:#212121;
}



11.記事タイトルの大きさの調整と、マウスオーバー時の色の変更

 最後に記事タイトル文字を大きくし、マウスオーバーした時に薄黄色(#FFFF98)に色が変わるようにした

 ・と同じ手順でCSSを編集

/* Articles */

 ~ ~ ~

.articles-title {
margin:0;
margin-bottom:15px;
padding: 3px 0 3px 12px;
background:#007f00;
color:#ffffff;
font-size:small;
}

.articles-title a:link{ text-decoration: none; color:#ffffff; }
.articles-title a:visited{ text-decoration: none; color:#ffffff; }
.articles-title a:active{ text-decoration: none; color:#ffffff; }
.articles-title a:hover{ text-decoration: underline; color:#ffffff; }

(これい部分を、これに)

.articles-title {
margin:0;
margin-bottom:15px;
padding: 3px 0 3px 12px;
background:#007f00;
color:#ffffff;
font-size:18px;
}

.articles-title a:link{ text-decoration: none; color:#ffffff; }
.articles-title a:visited{ text-decoration: none; color:#ffffff; }
.articles-title a:active{ text-decoration: none; color:#ffffff; }
.articles-title a:hover{ text-decoration: underline; color:#FFFF98; }


以上! 一応これで完成!


最後にもう一度、ブログ開設当初のテンプレートと変更後(今現在)とを並べて比べてみると

オリジナルのテンプレート

記事タイトルの文字を大きくする


という結果に


さてしばらくは、これで落ち着いて記事の更新に専念できる! かな?!



尚、10.ブログ全体の文字を大きくするのに当たって、「トレンドニュースのミックス」さんのブログ記事を参考にさせていただきました

改めて、「トレンドニュースのミックス」さん、ありがとうございました!



Sponsored Links



ブログデザイン変更の記録 その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.メインカラム(記事部分)の左端の余白を広げる

 前々から、本文を読みやすいよう左端の余白を多く取りたかったので(見た目上のバランスも考えて)余白を広げてみる

 ・と同じ手順で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.タイトル文字とブログ説明文の位置を調整

 思いっきり左にずれてしまったので調整をする

 ・と同じ手順で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;
}


その結果、こうなった

タイトルと記事説明文の位置調整



本当はタイトル部分の葉っぱの画像も、サイト全体の横幅に合わせたかったけれど、疲れたのでここまでにした


さて次はカレンダーを大きくし、最終的に文字を全体的に大きくして読みやすくする


(次回に続きます)



Sponsored Links



ブログデザイン変更の記録 [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月)

 テンプレート背景の色がグレーであまりにも寂しそうだったので、クリスマスヴァージョンに変えてみた

 ・と同じ手順でCSSを編集

body {
background:#666666;
}
 ~ ~ ~

#banner h1 a{
color:#ffffff;
}

(これい部分を、これに)

body {
background:#980000;
}
 ~ ~ ~

#banner h1 a{
color:#FF3232;
}

ヘッダーの色を「赤」に変更


その結果、こうなった

クリスマスヴァージョン



4.テンプレート背景とブログタイトルの色を変更②(2016年1月)

 一度変更しているので、今度は簡単に変えられた(新春ヴァージョン)

 ・と同じ手順で、CSSを編集する

body {
background:#980000;
}
 ~ ~ ~

#banner h1 a{
color:#FF3232;
}


(これい部分を、これに)

body {
background:#FF9800;
}
 ~ ~ ~

#banner h1 a{
color:#FF9800;
}

ヘッダーの色を「オレンジ」に変更


その結果、こうなった

新春ヴァージョン



さて、次はいよいよサイドバーの幅を広げる


(次回に続きます)



Sponsored Links