当ブログでは解説していませんでしたが、Bloggerでも以下のようなタイトル付きの囲み枠を使用することが可能です。
これには<fieldset>タグを使っているのですが、JetThemeではデザインが乱れてしまうことが判明しました。
本記事では<fieldset>タグを使わないタイトル付き囲み枠を紹介します！
<fieldset>タグ使用のタイトル付き囲み枠
<fieldset>タグを使用したタイトル付き囲み枠のデザインは、以下のブログが参考になります。
参考ブログ様
例えば最初に載せたタイトル付き囲み枠であれば……
以下のようなHTMLを使用しています。
JetThemeでの<fieldset>タグ
<fieldset>タグを使用すると……
別ブログでテーマをQooQからJetThemeに変更した際、タイトル付き囲み枠のデザインが乱れてしまいました。
 |
| QooQ |
 |
| JetTheme |
タイトルが囲み枠の中に入ってしまい、文字も大きくなっています。
読めない程ではありませんが、修正したいところですよね。
Bootstrap 5の影響？
JetThemeではBootstrap 5を採用しています。
そのBootstrap 5の影響なのか、<fieldset>タグのスタイルが無効化されてしまうようです。
なんとかJetThemeでも<fieldset>タグが使用できないか、<fieldset>や<legend>のスタイルの指定を試みたのですが、自分のやり方が悪いのかどうしてもタイトルが囲み枠の中に入ってしまいました。
<fieldset>タグの使用を断念
<fieldset>タグを使用した過去の記事を書き直すのが手間なのでそのまま使いたかったのですが、<fieldset>タグを諦めてdiv要素で代用することにしました。
div要素で代用しておけば、使用テーマに関わらずタイトル付き囲み枠が使用できます。
JetTheme以外でも有用でしょう。
<fieldset>タグを使わないタイトル付き囲み枠
<fieldset>タグを使わないタイトル付き囲み枠のHTMLは以下の通りです。
これで以下のようなタイトル付き囲み枠が作成できます。
ポイントはタイトルのbackgroundにブログの背景色を使っている事です。これによりタイトルを枠線の上に表示するデザインになります。
別ブログでは以下のHTMLを使用しています。
JetThemeに合わせて単位はremにしています。
別ブログの背景色はrgb(255, 250, 250)なので、background: rgb(255, 250, 250)と指定しています。
 |
| JetThemeで<fieldset>タグ未使用 |
以下、それぞれの指定を軽く解説しておきます。
border-radius: 5px; ➡ 角を丸くする
border: ●px solid カラーコード; ➡ 枠線の太さ・種類・色
margin-top: ●px; ➡ タイトル上のスペース
padding: ●px; ➡ 枠内の余白
width: fit-content; ➡ 文字の幅に合わせる
background: カラーコード; ➡ タイトルの背景色（ブログ背景色にする）
font-weight: bold; ➡ タイトル太字
top: -●px; left: ●px; ➡ タイトルの位置
padding: 0 ●px; ➡ タイトル背景の余白（枠線との隙間になります）
タイトル付き囲み枠比較
<fieldset>タグを使ったものと使っていないものとを見比べてみましょう。
細かく数値をいじれば更に近付けられ、ほとんど同じように使用できると思います。
どんなテーマでも使えるタイトル付き囲み枠
<fieldset>タグを使った方が短く簡単なので、使えるテーマであれば<fieldset>タグを使っても良いかと思います。
ただテーマによっては使えなくなることもあるので、ちょっと覚えておくと良いかもしれません。
