【解説】ブログカスタマイズ：CSSå¯¾å¿œã®ã‚¿ã‚¤ãƒˆãƒ«ä»˜ãã®å›²ã¿æž ã‚’ä½¿ã†æ–¹æ³•ï¼ˆå®šåž‹æ–‡ã«ç™»éŒ²ï¼‰

ブログカスタマイズの第8回目です！

今回は、ブログ記事でよく見かける「タイトル付きの囲み枠」の作り方を紹介します。

「タイトル付きの囲み枠」は、簡単にコピペで作れるとよく紹介されていますが、CSSを使わずにstyleプロパティを直接指定して作成する方法が一般的です。

しかし、この方法では、後でスタイルを変更したい場合に、一つずつ「タイトル付きの囲み枠」を変更する必要があります。

そこで、ここではCSSを使った「タイトル付きの囲み枠」の作り方と、本文の枠にタイトルの枠をどのように重ねているかを解説します。

それでは、早速やっていきましょう！

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

はじめに

これまでのブログカスタマイズです。良かったら参考にしてください。

今回のタイトル付きの囲み枠を使ってみました。

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1）
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録） ← 今回
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
発展編：自作のデザインテーマを作る

タイトル付きの囲み枠を使う方法

参考にさせてもらったサイトのタイトル付きの囲み枠

タイトル付きの囲み枠については、以下のページを参考にさせて頂きました。ありがとうございます。

はてなブログの機能の「定型文貼り付け」を活用した方法も書かれてますので、ぜひ、そちらも参考にしてください。

poyaran.com

タイトル付きの囲み枠

■タイトル■

ここに本文

　

タイトル付きの囲み枠のコピペで使えるコード

<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background:#a0d8ef ; color: #ffffff; font-weight: bold; border-radius: 5px;">■タイトル■</span></div>
<div style="border: 2px solid#a0d8ef ; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">ここに本文</div>

タイトル付きの囲み枠のカスタマイズ

では、今回の「タイトル付きの囲み枠」のカスタマイズをやっていきます。

まず、コピペで使えるコードから、スタイル部分をCSSに移動させます。

適当なクラス名を付けて、styleで指定してるプロパティをCSSに移動するだけです。

変更後のHTML

<div class="box-border-title1"><span>■タイトル■</span></div>
<div class="box-border1">ここに本文</div>

デザインCSSに追記する内容

.box-border-title1 {
  height: 12px;
}
.box-border-title1 span {
  margin-left: 8px;
  padding: 6px 10px;
  background: #a0d8ef;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px;
}
.box-border1 {
  border: 2px solid #a0d8ef;
  padding: 25px 12px 10px;
  font-size: 1em;
  border-radius: 5px;
}

変更後のタイトル付きの囲み枠

■タイトル■

ここに本文

見た目は変わらずに、メンテナンスしやすいタイトル付きの囲み枠になりました！

最後に、カスタマイズしたタイトル付きの囲み枠は、以下になります。

変更後のHTML

<div class="box-border-title2"><span>■タイトル■</span></div>
<div class="box-border2">ここに本文</div>

カスタマイズ後のデザインCSSに追記する内容

.box-border-title2 {
  height: 12px;
}
.box-border-title2 span {
  margin-left: 15px;/* 左のマージンを増やす */
  padding: 8px 12px;/* 上下と左右のパディングを増やす */
  background: #404040;/* 背景色を変更 */
  color: #FFFFFF;
  font-weight: bold;
  border-radius: 5px;
}
.box-border2 {
  border: 1px solid #000000;/* 枠線は1pxにして黒色に変更 */
  padding: 27px 15px 4px;/* パディングの量を調整 */
  font-size: 1em;
  border-radius: 5px;
  background: #f8f8f8;/* 背景色の指定を追加 */
  margin: 0 0 1em;/* マージンが無かったので追加 */
}

カスタマイズ後のタイトル付きの囲み枠

■タイトル■

ここに本文

いい感じになりました！

CSSの解説

「タイトル付き囲み枠」が、本文の枠に、タイトルの枠を、どのように重ねているかを解説します。

以下は、デベロッパーツールで、タイトルの要素を検査した図になります。

タイトル付き囲み枠を実現しているCSSの説明

詳しく説明させて頂きます。

タイトルの要素は、本来は30pxぐらいあるはずですが、そこをheight: 12px;と指定することで、下の要素にはみ出させて「タイトル付きの囲み枠」を実現しています。

参考に、height: 0px;と変更した場合が以下になります。

heightプロパティに0pxを指定した場合

この方法を考えついた人は、すごいと思いました。

よく紹介されている「タイトル付きの囲み枠」は、たくさんのプロパティを指定して、タイトルを移動させることで実現していますが、ここで紹介させてもらった「タイトル付き囲み枠」は、とてもエレガントな方法で実現しています。

今回は、どうしても、この実現方法を知ってほしくて、説明させてもらいました！

おわりに

今回は、冒頭の「ブログカスタマイズのまとめ」でも使用した「タイトル付きの囲み枠」について説明させて頂きました。

文章だけで構成されたブログは、なかなか退屈になってしまいがちですが、今回のような囲み枠があると、とても文章が読みやすくなると思います。

今回の内容が、どなたかの参考になれば嬉しいです。

それでは、よいブログライフを！