はてなブログのデザインを簡単にカスタマイズする方法

はてなブログのデザインを変えるのって難しいと思ってませんか？

案外、簡単にカスタマイズ出来るんですよ！

やり方をお伝えしますね。

デザイン編集画面で変更しましょう

ブログのトップ画面から、「デザイン」ボタンを押して、デザインの編集画面に移動しましょう。

次に、スパナのマーク（カスタマイズ）から、デザイン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」でググってもらえば、沢山カスタマイズ方法が出てきますよ。

まとめ：コードコピペでカスタマイズできるよ

どうだったでしょうか？簡単にデザインが変更できるのがわかったと思います。

まずは、この記事のコピペからはじめて、どんどんマスターしていけばいいでしょう。

それでは、みなさんの快適なブログライフを陰ながら応援しております。