お金プログラム ~だれでもノマド~

ノマド的な稼ぎ方、投資、IT系(プログラミング)に関するブログです。

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

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

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

 

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

 

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

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

f:id:toyo--104:20180522232649p:plain

 

次に、スパナのマーク(カスタマイズ)から、デザインCSSをクリックして下さい。

f:id:toyo--104:20180522233056p:plain

 

デザインCSSに、カスタマイズコードを入力しましょう

デザインCSSのボックスには、最初から、いろんな文言が入っていると思います。

これは特に触らずに、その下にコードを追記していきましょう。

 

サンプルコードをこの後、紹介しますね。

 

ブログ全体の文字を大きくする

以下のコードを追記してみて下さい。

 

コードを解説すると、bodyタグ(=ホームページ全体を表すタグ)に、フォントサイズをラージにしなさい、という意味です。

 

body{
  font-size: large; 
}

 

こんな感じで追記して下さい。

f:id:toyo--104:20180522233944p:plain

 

どうなるでしょうか?

Before

f:id:toyo--104:20180522234250p:plain

After

f:id:toyo--104:20180522234132p:plain

 

じゃん! う~ん、分かりくい。。

ただ、これオススメなんです。実際やってみてもらえると分かるんですが、少し全体的に字が大きくなるので、見やすく・分かりやすくなります。

 

背景が灰色のBoxを設置する

灰色背景のBOXを設置しましょう。

こんな感じで設置するとわかりやすくなりますね。

f:id:toyo--104:20180522235419p:plain

 

コードはこちら。

.gray_box {
 margin: 5px;
 padding: 10px;
 border: dotted 1px #000;
 background: #ddd;
}

 

デザインCSSに、こんな感じで貼って下さい。

f:id:toyo--104:20180522235606p:plain

ここでのポイントは、「.gray_box」の最初の「.」(ドット)です。

class(クラス)を表します。

すぐ後に出てくるので、覚えておいて下さい。

 

今回は、ブログ記事側でも編集が必要です。

記事編集画面を「HTML」モードで開いて、以下のコードを貼って下さい。

<div class="gray_box">
てすとてすとてすとてすと
</div>

ありますね、class(クラス)。

さきほどの「gray_box」という名前がイコールになっています。

 

このように、デザインCSSでは「.」(ドット)でクラスを定義して、記事編集画面では、class="クラス名" で呼び出してあげるのがポイントです。

 

ブログ記事編集画面では、こんな感じですね。

f:id:toyo--104:20180522235842p:plain

さて、プレビューしてみると、以下のようになったと思います。

f:id:toyo--104:20180522235419p:plain

 

もっと他の色にBOXを変更したい、という方は、「CSS」でググってもらえば、沢山カスタマイズ方法が出てきますよ

 

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

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

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

 

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