ブログを書いているときに、箇条書きなどの要点を囲み枠でハイライトしたい時がある。囲み枠の入れ方については、多くの方が解説記事を書いていて、枠線の色、太さ、形状など色々なパターンのHTMLコードをコピペできるように紹介している
この記事は、四隅の角に丸みをつけた囲い枠を作成する場合を例にとり、枠で囲った文章の作成方法をまとめた備忘録
角丸囲い枠を生成するHTMLコード
一般的に紹介されているコード例
色んな記事で紹介されているHTMLコードのほとんどは、以下の例のように「ここに文章を挿入」というような１行の例文を角丸の枠で囲ったものだ。黄色のマーカー部分が角丸を作るためのコード。10pxの数字を大きくすれば、角丸が大きくなる
ピンク色の部分は枠線の仕様を表し、2pxは太さで数字を大きくすれば太くなる。solidは実線を意味し、この部分を変更すれば破線や二重線などに変更できる。#0000ffは色コードで青色のコード。ここを変えれば枠線の色を変更できる
<div style="border: 2px solid #0000ff; border-radius: 10px; padding: 15px;"> <p style="margin: 0;">ここに文章を挿入</p></div>
表示された結果
このコードをブロックメニューの「カスタムHTML」で実際に貼り付けると、以下のような角丸の囲い枠ができて感動する
ここに文章を挿入
早速、自分の記事で３項目の箇条書きに応用してみたのが下の例：
１行目の文章
２行目の文章
３行目の文章
素人の私は、「おぉー」と思わず歓喜の声
自分好みに囲い枠の仕様変更
変更したコードの例
そして欲が出て、角丸を大きくして囲い枠の背景色をシアンにするべく変更したのが以下のHTMLコード：
角丸を大きくしたのが黄色のマーカー部分：10pxを40pxに変更
背景色をcyanにしたのがピンクのマーカー部分：#00ffff
文章を３つに増やしたのが青色の下線部分：行を繰り返せば増やせる
<div style="border: 1px solid #0000ff; background: #00ffff; border-radius: 40px; padding: 15px;">
<p style="margin: 0;">１行目の文章</p>
<p style="margin: 0;">２行目の文章</p>
<p style="margin: 0;">３行目の文章</p></div>
表示された結果
すると、以下のように変更できてさらに感動
１行目の文章
２行目の文章
３行目の文章
実際の使用例
実際の投稿記事で作成したのがこちらの例。これまではパワポで以下を作成し、画像保存したものを記事本文に貼り付けていた。この方法だと、スマホ表示の場合に画像の大きさが自動縮小されて文字が小さくなってしまっていた。今回の方法で囲み枠を作成すると、スマホ表示でも文字の大きさは本文の文字の大きさと変わらない
深田久弥の選定基準：
＜山の品格＞
人には人格があるように、山には『山格』のようなものがあるとし、誰が見ても立派な山だと感嘆する山であることを、第一の基準とした
＜山の歴史＞
昔から人間との関わりが深く、崇拝され山頂に祠が祀られている山であるというような山の歴史を尊重し、第二の基準とした
＜個性のある山＞
芸術作品と同様に、山容・現象・伝統など他には無いような顕著な個性をもっていることを、第三の基準とした
補足
枠線の色や背景色については、以下のサイトなどからネットで簡単に確認でき、該当コードに置き換えることで簡単に変更できる