いろいろな応用が利く!見出し付の囲み線の作り方

公開日: 更新日: ホームページ作成
Knowledge Base Wordpress パソコン カスタマイズ 設定




【この記事の目次】- 必要な部分だけ見たいときにどうぞ - [表示する]

ブログやホームページの本文の中で、「注釈」や「注意事項」などを表示するときに、普通に書いたのでは目立たないですね。そんなとき1つパターンを覚えておくだけでいろいろとカスタマイズできる【見出し付の囲み線】の作り方を紹介します。

例えば外部のサイトの内容を参考にしたとき、

コードはこちらのページを参考にさせていただきました

と、何気ないリンクで書くよりも、

💡💡 参考にさせていただいたページ 💡💡
コードはこちらのページを参考にさせていただきました

と表示したほうがより分かりやすくなりますよね?今回は下のような見出しのついた囲み線の表示方法です。

WordPressの場合はテキストエディタで行うとコピペで同じものが作れます。

ちなみに上のパターンは

<div style="height:15px;"><span style="margin-left:8px; padding:6px 10px; background:#2d2d2d; color:#ffffff; font-weight:normal;border-radius:8px;border:2px solid #CC9900;">ここに見出しになる文字列</span></div><div style="border:2px solid #CC9900; padding:25px 12px 10px; font-size:1em;border-radius:5px;background:#ffffff;">ここに本文になる部分</div>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

です。

ただ、コピペで作っているといつまでたってもコピペ頼りになってしまいますし、オリジナルなものはいつまでたっても作れないということになりますから、この際どうやって表示しているかを勉強してしまいましょう。

見出し付囲み線のコードの中身

さて、早速ですが、この長いコードの中身についてできるだけ簡単かつ分かりやすく解説しますね。

このコードは【見出し】になる部分と【文章】になる部分のdiv要素を組み合わせて表示するようにしています。

せっかくだからこのコードを使って表示すると

前半/見出しになる部分
<div style=”height:15px;”><span style=”margin-left:8px; padding:6px 10px; background:#2d2d2d; color:#ffffff; font-weight:normal;border-radius:8px;border:2px solid #CC9900;”>💡💡 参考にさせていただいたページ 💡💡</span></div>

後半/本体の文章部分
<div style=”border:2px solid #CC9900; padding:25px 12px 10px; font-size:1em;border-radius:5px;background:#ffffff;”>コードはこちらのページを参考にさせていただきました</div>

という風に分解できます。

【見出し】部分のデザイン

span要素(囲んだ部分を装飾する)をdiv要素(固まり)で囲んで表示しています。

span要素の部分は

  1. margin-left:8px; ・・・左から8ピクセル分右にずらして表示しなさい
  2. padding:6px 10px;・・・装飾した部分の内側に上下6ピクセル、左右10ピクセルの隙間を作りなさい
  3. background:#2d2d2d; ・・・背景の色は#2d2d2dというカラーコードの色にしなさい
  4. color:#ffffff;・・・文字の色は#ffffffというカラーコードの色にしなさい
  5. font-weight:normal;・・・文字の太さは普通(normal)で
  6. border-radius:8px;・・・囲む線を8ピクセルの丸みを帯びたものにしなさい
  7. border:2px solid #CC9900;・・・太さ2ピクセル、実線で#CC9900という色の線で周りを囲みなさい

という風にデザインされています。そしてspan要素はこのタグで囲まれた部分だけが装飾されるので、中に入力した文字分だけに適用されます。

そしてspan要素で囲まれた部分をdiv要素(固まり)で挟んで1つの部品にしています。
div要素には

  1. style=”height:15px;・・・高さを15ピクセルにしなさい

という指示だけ出して、見出しの高さを決定しています。

本文部分のデザイン

こちらはページ本体の幅いっぱいの枠の中に文字を入れないと、文章が短かったときに不格好になりますので、単純にdiv要素だけで囲んで表示させます

  1. border:2px solid #CC9900;・・・太さ2ピクセルの実線で#CC9900の色の線で回りを囲みなさい
  2. padding:25px 12px 10px;・・・上25ピクセル、下12ピクセル、左右10ピクセル分内側に隙間を作りなさい
  3. font-size:1em;・・・文字の大きさはサイト中の他の文字と同じ大きさにしなさい
  4. border-radius:5px;・・・囲む線を5ピクセルの丸みを帯びたものにしなさい
  5. background:#ffffff;・・・背景色は#ffffffにしなさい

という風にデザインされています。

div要素はブロック要素なので、連続すると重なって表示されるという特性を利用して【本文】の上に幅が可変する別の【見出し】をのっけてるというイメージになるんですね。

逆にいうと、この【見出し付の囲み線】の下には<p>タグなどで段落を付けたり</br>タグで強制的に改行したりしないといつまでも連続してしまいますので、例えば上のように連続してこのデザインを使うときにはこれらのタグを間に挟むようにしなければなりません。

構造が分かってくると、どこをどうカスタマイズすればいいかも見えてくるのでサイト作りが楽しくなりますね。

【スポンサーリンク】