はてなブログのデザインを変えるのって難しいと思ってませんか？
案外、簡単にカスタマイズ出来るんですよ！
やり方をお伝えしますね。
デザイン編集画面で変更しましょう
ブログのトップ画面から、「デザイン」ボタンを押して、デザインの編集画面に移動しましょう。
次に、スパナのマーク（カスタマイズ）から、デザインCSSをクリックして下さい。
デザインCSSに、カスタマイズコードを入力しましょう
デザインCSSのボックスには、最初から、いろんな文言が入っていると思います。
これは特に触らずに、その下にコードを追記していきましょう。
サンプルコードをこの後、紹介しますね。
ブログ全体の文字を大きくする
以下のコードを追記してみて下さい。
コードを解説すると、bodyタグ（＝ホームページ全体を表すタグ）に、フォントサイズをラージにしなさい、という意味です。
body{ font-size: large; }
こんな感じで追記して下さい。
どうなるでしょうか？
Before
After
じゃん！ う～ん、分かりくい。。
ただ、これオススメなんです。実際やってみてもらえると分かるんですが、少し全体的に字が大きくなるので、見やすく・分かりやすくなります。
背景が灰色のBoxを設置する
灰色背景のBOXを設置しましょう。
こんな感じで設置するとわかりやすくなりますね。
コードはこちら。
.gray_box { margin: 5px; padding: 10px; border: dotted 1px #000; background: #ddd; }
デザインCSSに、こんな感じで貼って下さい。
ここでのポイントは、「.gray_box」の最初の「.」（ドット）です。
class（クラス）を表します。
すぐ後に出てくるので、覚えておいて下さい。
今回は、ブログ記事側でも編集が必要です。
記事編集画面を「HTML」モードで開いて、以下のコードを貼って下さい。
<div class="gray_box"> てすとてすとてすとてすと </div>
ありますね、class（クラス）。
さきほどの「gray_box」という名前がイコールになっています。
このように、デザインCSSでは「.」（ドット）でクラスを定義して、記事編集画面では、class="クラス名" で呼び出してあげるのがポイントです。
ブログ記事編集画面では、こんな感じですね。
さて、プレビューしてみると、以下のようになったと思います。
もっと他の色にBOXを変更したい、という方は、「CSS」でググってもらえば、沢山カスタマイズ方法が出てきますよ。
まとめ：コードコピペでカスタマイズできるよ
どうだったでしょうか？簡単にデザインが変更できるのがわかったと思います。
まずは、この記事のコピペからはじめて、どんどんマスターしていけばいいでしょう。
それでは、みなさんの快適なブログライフを陰ながら応援しております。