daisukeの技術ブログ

AI、機械学習、最適化、Pythonなどについて、技術調査、技術書の理解した内容、ソフトウェア/ツール作成について書いていきます

【解説】ブログカスタマイズ:CSS対応のタイトル付きの囲み枠を使う方法(定型文に登録)

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

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

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

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

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

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

参考文献

はじめに

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

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

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

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

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

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

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

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の説明
タイトル付き囲み枠を実現しているCSSの説明

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

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

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

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

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

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

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

おわりに

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

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

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

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