Seesaaブログの見出しタグの装飾【新システム】

通常ブログにはブログのタイトルや記事タイトルというのがあります。さらに記事本文中でも見出しを付ける事ができ、「h1」から「h6」というタグで見出しを使う事ができます。「h1」や「h2」等数字が小さい物ほど重要という事を検索エンジンにも使える事ができます。こんなやつです。

基本的に記事の途中で見出しを入れながら記事を書くとまとまりが出てきますし、見た目にも分かりやすいです。さらに見出しは検索エンジンにに重要な部分を使える事ができるので、基本的な部分も含めて紹介していきますね。

著作情報

この記事を書いた人

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

見出しの使い方

使い方はまた別記事で紹介するとして、通常のSeesaaブログで多いのは「h1」にブログタイトル、「h2」に記事のタイトルが設定されていて、記事内の見出しには「h3」以降のタグを使う場合が多いです。

簡単に説明するとSeesaaブログの新デザインシステムの場合はこのようなイメージです。

• ブログタイトル：h1　超重要
• 記事タイトル：h2　まあ重要
• 記事内見出し：h3～h6　普通

という感じで使う事が多いです。ブログタイトルや記事タイトルは自動でタグが入るので問題ないのですが、記事中で使う見出しタグは記事中で自分で挿入していく必要があります。記事中に見出しを入れるにはタグ編集エディタで次のように書けば見出しになります（h3を使う場合）。

<h3>ここに見出し</h3>

Seesaaブログの新システムの場合は記事内の見出しタグは「h3」以下を使って作成します。この場合は「h3」以下は何度も使ってもOKなので、「h3」と「h4」などを多用する感じになります。

ちなみにWordPressでは記事タイトルに「h1」が使われているテンプレートが多いですが、無料ブログの場合大体は上記で説明した見出しタグが設定されているはずです。

ただ、見出しタグを挿入して見出しを作ってもスタイルシートで装飾しないと目立たないので先にスタイルシートで見出しタグの装飾をしておきましょう。

見出しの装飾の方法

見出しの装飾方法スタイルシート（CSS）で自由に変更できますが、次の項目を覚えると非常に簡単。次の4つで見出しの装飾が可能です。

• 「border-top」上に線を入れる。
• 「border-bottom」下に線を入れる。
• 「border-left」左側に線を入れる。
• 「border-right」右側に線を入れる。

書き方としてはこんな感じですが、まだ変更はしないで下さい。サンプルなので。

.article__content h3 {
border-top:1px solid #000000;  
border-right:1px solid #000000;  
border-left:1px solid #000000;  
border-bottom:1px solid #000000;}

それぞれ「px」の部分が線の太さ、「#」の部分でカラーを指定。この２つの要素を変更する事で色々な装飾が自分できるようになります。後は見出しタイトルの位置を調整するという流れです。実際にこのブログの場合の見出しを例に解説してみます。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。

このブログで使っている見出しの装飾は見出しの左側の線だけ使っているので、「border-left」だけを使っている訳です。こんな感じの見出しにしています。

この場合はスタイルシートにこの記述を追加。

/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
  border-left: 5px solid #1F5E73;  
  padding: 0 0 0 15px ;
  line-height: 2;
  font-size: 18px;
  background-color: #fff;
  margin:25px 0 25px 0;
}
 
/* トップページ用 */
.article.article--entry h3 {
  border-left: 5px solid #1F5E73;  
  padding: 0 0 0 15px ;
  line-height: 2;
  font-size: 18px;
  background-color: #fff;
  margin:25px 0 25px 0;
}

• 「border-left」で5pxの太さの線を左にして色指定。
• 「padding」で見出し内の文字の余白調整「上、右、下、左」の順番。
• 「line-height」で見出し部分の高さを指定。
• 「font-size」で文字の大きさを調整。
• 「background-color」で背景色を指定。
• 「margin」で見出しの上下に余白「上、右、下、左」の順番。

えっと、これは「h3」の装飾ですが、「h3」の部分を「h4」に書き換えると「h4」の装飾になります。それから見出しのタイトルが元々左はしにくるようになっているので、「padding」で見出しのタイトルの位置を調整できます。

「padding」の部分に数字を入れる事で「上、右、下、左」の余白、つまり間隔を空けることができます。今回の場合は左から15px余白を指定したので、見出しタイトルが右に15px移動するという訳です。

「padding」は時計周りに余白を決める事ができるので、「上、右、下、左」の順番になっている事だけ覚えておけばOK。それと変更する場合は「px」を書き忘れない事。

現在使っている見出し

現在はこんな見出しも使ってます。

/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
  font-size: 1.25em;
  position: relative;
  padding:1em 1.1em;
  background: #1f5e73;;
  color:#fff;
	margin: 40px 0;
}

.article__content h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 9px solid transparent;
border-top: 15px solid #1f5e73;
width: 0;
height: 0;
}

/* トップページ用 */
.article.article--entry h3 {
  font-size: 1.25em;
  position: relative;
  padding:1em 1.1em;
  background: #1f5e73;;
  color:#fff;
	margin: 40px 0;
}

.article.article--entry h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 9px solid transparent;
border-top: 15px solid #1f5e73;
width: 0;
height: 0;
}

スマホページ用の見出しも装飾しておく

上記のスタイルシートはPCページ用なのでスマートフォンページも同じように見出しの装飾をしていきます。

管理画面から「デザイン」⇒「スマートフォン」⇒「CSS/HTML編集」と進みます。

それで適応中のデザインを選択するとスマートフォン版のスタイルシート（CSS）編集画面になるので、そこの一番下に先ほどと同じように次のコードを追加。

/* スマートフォン用のCSSに追加 */
.article-body h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;
margin:25px 0 25px 0;
}

私の使っているサンプルのように左側だけに線を入れる事もできますし、上下に線を配置することもできます。先ほど紹介した「border-top」「border-right」「border-left」「border-bottom」の４つを上手く使って線の太さやカラーを装飾してみて下さい。

それから「solid」の部分を「dotted」に変更すると「実線」ではなく「点線」で表示する事も可能です。

以上見出しの装飾でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

• ⇒WordPressを始めるのに必要な物や料金
• ⇒WordPressブログの始め方と使い方まとめ！【初心者向け】
• ⇒Seesaaブログカスタマイズまとめ【新システム版】