https://daisuke20240310.hatenablog.com/entry/2024/04/07/030248

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

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

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

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

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

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

参考文献

作者:JOE AOTO
ソーテック社

作者:相澤裕介
カットシステム

はじめに

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

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

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

準備編：はてなブログの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;/* マージンが無かったので追加 */
}