mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

【はてなブログ】シンプルな見出しに説明文を付ける


※使う使わないは別として。

シンプルな見出しに何か一つ加えたい

少し前に記事別に見出しのデザインを変える。なんて記事を書きましたが、それでも物足りないと!なんか他に無いの?と言われたわけです。

僕はプロじゃないので、そう簡単には出てはきませんよ…

あ、あるわ。

見出しの下に説明文があったら良いんじゃないかな

公式ページでも使われているコレ

見出しへの説明、概要、などなど一言そえる感じで良いと思われ。

見出し<h></h>を罫線が引かれる設定の<div></div>で囲んで更に見出しを含んだ文章ごと上下余白設定を入れた<div></div>で囲む。

<div class="blogsection"><div class="Top-header"><h3>見出しの下に説明文があったら良いんじゃないかな</h3>
<p>公式ページでも使われているコレ</p>
</div>
<p>見出しへの説明、概要、などなど一言そえる感じで良いと思われ。</p>
<p>見出し&lt;h&gt;&lt;/h&gt;<span style="color: #1464b3">罫線が引かれる設定の&lt;div&gt;&lt;/div&gt;</span>で囲んで更に見出しを含んだ文章ごと上下余白設定を入れた&lt;div&gt;&lt;/div&gt;で囲む。</p>
</div>

上記はhtmlの内容。下記のCSSコードは記事内に貼り付けたもの。


<style>
/* 見出しリセット */
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
 content: none;
 background: none;
 background-color: none;
 border: none;
 border-radius: 0;
 }
/* セクションの上下余白 */
.blogsection {
margin: 4em 0;
 }
/* 囲んだ下に罫線 */
.Top-header {
 border-bottom: 1px solid #bfced3;
 padding-bottom: .5em;
 margin: 1em auto;
 }
/* 見出しデザイン */
.entry-content h3 {
 margin: 0;
 padding: 0;
 font-size: 120%;
 }
/* 見出しの下に使う説明文<p>段落の設定 */
.blogsection .Top-header p {
 margin: 0;
 padding: 0;
 font-size: 80%;
 color: #ff0000;
 }
</style>

例えとして<h3>やentry-content h3を使っているだけで、それらは絶対ではない。2でも4でも良い。


新発売!〇〇〇〇〇〇

発売日:〇月〇〇日、税込500円

ライン下からレビュー入るとかね?

秋季限定 話題沸騰のスイーツ

いま話題のスイーツTOP5を発表します!

  • ここからリストを入れてもいいのでは?
  • こんな感じに
  • 色々と
  • 使い勝手は
  • あると思います

シンプルな見出しに少しの工夫で差をつけろ!

なんて事を自分に言い聞かせてやってるのですが、例えば何の装飾のない見出しの下に文章一言書いて罫線引けば同じ様な感じにはなるわけです。

ただ手段の一つとして予め上記のHTMLやCSSをメモ帳にコピーしておいて、記事別に表現したい時に記事内に貼り付けたら普段の雰囲気とは変わり、モチベーションの変化にも繋がるかもしれません。

一工夫の幅を増やしてみてはいかがでしょうか。