記事に小見出しをつけて記事にメリハリをつけましょう☆


↑上記のように記事タイトルとは違った記事内につけるタイトルを『小見出し』と言います。

記事の内容を目立たせたい時や、話題が変わるときなど、

文章がダラダラと続くよりはこういったタイトルがある方が

見栄えもいいし、どういった内容の文章が書いてあるのかも一目瞭然ですよね☆

私が行っているやり方は2種類あります。

・記事に直接毎回タグを貼り付ける方法

・CSS(スタイルシート)でタグ指定する方法


前回は簡単な『直接タグを貼る方法』をご紹介しましたが

今回は『CSS(スタイルシート)でタグ指定する方法』をご紹介しますね☆


スタイルシートで設定して小見出しを記事に表示させる方法


前回紹介した「直接タグを貼る方法」は毎回記事を書くたびに

タグをコピペしなければなりません。

たまにしか使わないならそれでもいいですが、私のように頻繁に使うなら面倒なんです(´ε` )

「小見出し」は記事を書く上で、見栄えもいいしSEO対策としても使用した方がいいと思いますので

スタイルシートで設定して使ってみて下さい☆


テンプレートのスタイルシートの方で設定をします。当ブログの「FC2ブログ」での解説になります。

管理画面の「環境設定」→「テンプレートの設定」→「スタイルシート編集」で設定します。

テンプレートを触るので、万が一の時のため、念の為に、

テンプレートの複製(コピー)をしておいて下さいね。


と言ってもそんなに難しいことはありません。

以下のタグをスタイルシートの末尾にコピペして下さい。

貼り付ける場合は、一番下で一回改行してからそのあとに貼り付けて下さい。


当ブログと同じ大きさの小見出し

 ↓ ↓ ↓ (枠線、文字の色は「黒」、背景は「白」にしています。)

h3{
font-size:12pt; color:#000000;
background-color:#ffffff;
border-bottom:1px solid #000000;
border-right:0px solid #000000;
border-left:8px solid #000000;
padding:8px;
}


基本はこのタグ↓ いらない枠線は削除するといいですよ。

h●{  ←●に数値を入れる
font-size:文字の大きさpt;
background-color:#ffffff;  ←背景の色
border-top:    1px solid #000000;  ←上の枠線
border-bottom: 1px solid #000000;  ←下の枠線
border-right: 1px solid #000000;  ←右の枠線
border-left: 8px solid #000000;  ←左の枠線
padding: 余白の大きさpx;
}


ブログのタイトルが「h1」、記事のタイトルが「h2」の設定になっていると思います。

なので、記事内に付けるタイトル(見出し)は「h3」からはじめるといいでしょう。

枠線、文字の色は「黒」、背景は「白」にしています。

色の見本はこちら>>『色colors table』<<を参考にしています。


スタイルシートにタグを貼り付けて設定したら、

あとは記事内で<h3>~</h3>の間にタイトルを入れるだけです。

記事内で <h3>書きたいタイトル</h3> と書き込めば

実際の記事にはちゃんと見出しが出来ています。


当ブログでは、見出しは4種類設定しています。

こんな感じ <h3>~</h3>


こんな感じ <h4>~</h4>


こんな感じ <h5>~</h5>

こんな感じ <h6>~</h6>

見出しの大きさは「font-size:12pt」の数値で変わります。

あとは、基本のタグから枠線を実線から点線に変えたり、色を変えたり

色々とご自分のサイトに合わせて変えてみて下さい。

枠線の種類 solid(実線)、dotted(点線)、dashed(破線)、double(二重線)などがあります。


スタイルシートに設定するのは、面倒かもしれませんが

一度設定してしまえば、あとは記事内で書きたいタイトルを<h3>~</h3>の中に

書き込めばいいだけなので、あとは楽になりますよ♪

先に紹介した『直接記事内にタグを貼る方法』か、今回の『スタイルシート設定』か

どちらかお好きな方法で見出しを作ってみて下さいね☆


>>小見出しのタグを直接記事内に貼る方法はこちら<<


記事にタグを入れる場合のブログの設定

簡易モードを「OFF」にする

FC2-12.jpg

 ↓ 

下の方にある「記事の設定」の「改行の扱い」を「HTMLタグのみ」にしておく

FC2-102.jpg

ちゃんと表示させるためにもタグを入れる場合は忘れずに設定しておいて下さいね☆

 タグ
None