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