記事内にサブタイトル(記事内見出し)を表示する方法

記事内にサブタイトル(記事内見出し)を表示する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

本ブログでは記事内の所々にサブタイトルを表示しています。

このようなサブタイトルは、あらかじめCSSでスタイルを設定しておけば、記事で簡単なHTMLタグを使うことによって表示できます。

今回は、この方法についてご紹介したいと思います。

サブタイトルに使うタグを決める

まずは、記事内のサブタイトルに使うHTMLタグを決めなければいけません。

タイトル、つまり見出しですから、見出しタグ(h1、h2、h3、h4、h5、h6)の中から選択するといいと思います。

ちなみに、僕はh4タグが最も使いやすそうだと思ったので、本ブログではh4タグを記事内サブタイトル用に使っています。

ですので、以降は、仮にh4タグを使うものとして書かせてもらいますね。

もし別のタグを利用する場合は、そのタグに読み替えて下さい。

CSSにスタイルを定義

では、次に、ユーザーCSSに記事内サブタイトルh4のスタイルを定義しておきましょう。

これももちろんご自身のブログに合わせて設定すればいいのですが、ご参考までに、本ブログの設定をご紹介しておきます。

もし同じ設定にしたい場合は、以下のコードをユーザーCSSの末尾に追加しておいてください。

/* 記事内サブタイトル */
.entry .contents h4, .articleText h4 {
  margin: 10px 0 0 0; /* 枠線の外側余白設定 上右下左の順 */
  padding: 6px 10px 5px 10px; /* 枠線の内側余白設定 上右下左の順 */
  font-size: 120%; /* 文字サイズ */
  border-left: 3px solid #ee7800; /* 左側枠線 */
  border-bottom: 1px solid #ee7800; /* 下側枠線 */
  text-shadow: 1px 1px 0px #ffffff,  2px 2px 0px #cccccc; /* 影 */
}

色などを変更したい場合は、コード内の注釈(コメント)を参考にして変更してみて下さいね。

記事内でサブタイトル用のタグを使う

CSSにスタイルを設定したら、早速記事内でサブタイトル用のタグを使ってみて下さい。

使い方は簡単で、サブタイトルの内容を、上で決めた見出しタグ(仮にh4)と、その閉じタグで挟み込んで書くだけです。

↓こんな感じになります。

<h4>サブタイトルサブタイトルサブタイトル</h4>

前は<h4>、後は</h4>(『/』を忘れないようご注意)です。

なお、HTMLタグでの入力なので、新エディタを使っている場合は『HTML表示』、標準エディタを使っている場合は『HTMLタグを表示』をクリックしてHTMLタグを入力できる状態で書いて下さい(タグ編集エディタはそのままでOK)。

新エディタ HTML表示

標準エディタ HTMLタグを表示

以上、アメブロの記事内にサブタイトル(小見出し)を表示する方法をご紹介しました。

よかったら参考にして下さいね。

2014/03/01 新デザイン・旧デザイン両対応化
2011/06/22 記事公開

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ