今日は、小見出しをわかりやすくカスタマイズします。
文章が長いと、基本的に読者はちゃんと読んでくれません。
知りたい情報はどこだ??と、ざざーーっと下まで目を走らせるだけなんです。

なので、流し読みしてもだいたい何が書かれてるのかわかるように、小見出しは絶対つけたほうがいいです。
小見出しをつけるときは、

<h2></h2>

<h3></h3>

<h4></h4>

このタグを使います。

スポンサーリンク

Tiny MCE Advanced というプラグインを入れてる人は、文字とか文章とかの装飾をするためのツールバーの中に【段落】っていうのがあると思うんですが、そこから簡単にこのタグを出すことができます。

デフォルトの小見出しはこれなんですね。

小見出し2

地味ですよね~

 

カスタマイズするときはcss編集を使おう

で、今までのカスタマイズの説明で、私、ちょっと間違ってたというか非効率的なことをしてました。

xeoryは、カスタマイズしやすいように、はじめから【外観】に【css編集】っていうのがあるんですよね。
これにカスタマイズするとこだけ記述していけば、上書きされてブログに反映されるんです。

だから、cssを編集するだけならこの【css編集】に書いて保存しましょう。

しかも、このcss編集には、よく使うコードの説明が書いてあるんです。

だから、どのコードの値を書き換えたら変更できるってのが分かると思います。

カラーコードとか、マージンとか太さとか、自分なりにアレンジしてみてください!

 

このコードを書き込もう

では、今日書き込むのは以下のコード。

 

.single .post-content h2 {
font-size: 26px;
font-weight: bold;
background-color: #F8F6F2;
padding: 20px;
margin-bottom: 32px;
border-top: solid 1px #F4F3F0;
border-left: solid 6px #1cbec7;
border-right: solid 1px #F4F3F0;
border-bottom: solid 1px #F4F3F0;
}

.single .post-content h3 {
font-size: 22px;
font-weight: bold;
padding: 0 0 18px;
margin-bottom: 32px;
border-left: none;
border-bottom: solid 2px #1cbec7;
}

.single .post-content h4 {
font-size: 18px;
font-weight: bold;
padding-left: 14px;
border-left: solid 4px #1cbec7;
}

これでこのように変更されます。

小見出し1

見出しは目立ってナンボですからね。でも、あまり派手すぎるのも好きじゃないので、この程度にしておきました。

いろんなアレンジを楽しんでみてください。

もし変な風になっても、css編集を消せばデフォルトに戻るので安心ですw