ブログデザイン変更の記録 その３ [blog]
◇
これまでのブログデザイン変更の経過を、自分の覚え書きとして記録してきたが、今回がとりあえず最後
さっそく前回の記事の続きを
ちなみに、サイト全体の幅とサイドバーの幅を広げた直後のテンプレートは、これ（再掲）
サイドバーの幅を広げたらカレンダーが小さくてバランスが悪く感じたので、前回と同じくys_ootaさんのブログ記事を参考にしながら、大きくすることにした
９．カレンダーを大きくする
枠を広げ、日付も大きくする
①前回同様、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ブログ 文字 大きくする」でググってヒットした「トレンドニュースのミックス」さんのブログ記事を参考にしながら・・・
１０．ブログ全体の文字を大きくする
①メインカラムの文字その他を一括で大きくする
・９と同じ手順で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;
}
１１．記事タイトルの大きさの調整と、マウスオーバー時の色の変更
最後に記事タイトル文字を大きくし、マウスオーバーした時に薄黄色（#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; }
以上！ 一応これで完成！
最後にもう一度、ブログ開設当初のテンプレートと変更後（今現在）とを並べて比べてみると
という結果に
さてしばらくは、これで落ち着いて記事の更新に専念できる！ かな？！
尚、１０．ブログ全体の文字を大きくするのに当たって、「トレンドニュースのミックス」さんのブログ記事を参考にさせていただきました
改めて、「トレンドニュースのミックス」さん、ありがとうございました！
