ブログデザイン変更の記録 [blog]
◇
サイドバーの幅を広げたりして、このブログのレイアウトを改良したことを、先日の記事で報告した
そこで、これまでのブログデザインを変更してきた経過を、忘れない内に自分の覚え書きとして、記録しておこうと思う
まず、ブログ開設時のオリジナルテンプレートは、これ
「saia's blog」はここから始まった
１．ブログタイトルの文字を大きくする（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;
}
その結果、こうなった
２．訪問済みのリンクの色が変わるよう変更（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; }
３．テンプレート背景とブログタイトルの色を変更①（2015年12月）
テンプレート背景の色がグレーであまりにも寂しそうだったので、クリスマスヴァージョンに変えてみた
・１と同じ手順でCSSを編集
body {
background:#666666;
}
～ ～ ～
#banner h1 a{
color:#ffffff;
}
（これ ↑ の青い部分を、これ ↓ の赤に）
body {
background:#980000;
}
～ ～ ～
#banner h1 a{
color:#FF3232;
}
ヘッダーの色を「赤」に変更
その結果、こうなった
４．テンプレート背景とブログタイトルの色を変更②（2016年1月）
一度変更しているので、今度は簡単に変えられた（新春ヴァージョン）
・１と同じ手順で、CSSを編集する
body {
background:#980000;
}
～ ～ ～
#banner h1 a{
color:#FF3232;
}
（これ ↑ の青い部分を、これ ↓ の赤に）
body {
background:#FF9800;
}
～ ～ ～
#banner h1 a{
color:#FF9800;
}
ヘッダーの色を「オレンジ」に変更
その結果、こうなった
さて、次はいよいよサイドバーの幅を広げる
（次回に続きます）
そこまでHTMLいじる知識と勇気があるなら、
ワードプレスは、、思っているよりスゴイ簡単だったり
しますよ( ´∀｀)
by タケサバス (2016-01-24 00:17)
ふぅ～ん・・・
saiaさんてすごぉ～い・・・
と感心してしまいました。
by まりりん (2016-01-24 00:37)
＞タケサバスさん
うーむ、私にもタケサバスさんの新ブログのようなカッコイイブログが作れるでしょうか？Σ(￣。￣ﾉ)ﾉ
でも、もし作れたとしても、、、書く中身がありませ〜ん！笑
by saia (2016-01-24 08:06)
＞まりりんさん
そんなことないですよお〜σ(^_^;)
単に好奇心旺盛で、「いつでもとにかくやってみる」、なんです。
こんなことに時間かけるなら、記事の更新もっとマメにやれ！ですよね！笑
by saia (2016-01-24 08:11)
たいしたもんですねえ。ぼくなんか頭が痛くなっちゃうよ。
by 暁烏 英（あけがらす ひで） (2016-01-24 17:03)
＞暁烏 英（あけがらす ひで）さん
お褒めいただきありがとうございます。
見よう見まねでやってみたらできちゃった程度のことなんですが、自分用の記録として残しておこうと思い、載せてみました。
やってみると結構楽しかったりします( *´艸｀)
by saia (2016-01-24 18:28)
凄いですね。こんなにブログのデザインを変えられるなんて。だんだん読みやすくカッコよくなっているし。
自分も参考にしてタイトルの色を変えてみました。ちゃんと変わりましたよ。分かりやすい説明をありがとうございます！
by ok-rock (2016-01-24 19:53)
＞ok-rockさん
わ～～～い！ 嬉しい(≧▽≦)
参考にしていただけて光栄です！
今さっそくok-rockさんのブログを見に行ってきました。
ベースの青系色とマッチして、とても引き立ついい色ですね！
ちょっと別のことで落ち込んでいたのですが、このコメントを見て一気に立ち直りました！
こちらこそありがとうございました(*´▽｀*)
by saia (2016-01-24 20:59)
参考になります
私もcssいじってみようと思います
by いっぷく (2016-01-25 01:35)
＞いっぷくさん
コメントをありがとうございます！
参考になるとのお言葉、とても嬉しいです(≧∇≦)
是非CSSいじってみてください！
いっぷくさんのブログが改良されるのを楽しみにしています。
by saia (2016-01-25 07:20)