【囲み枠】の作り方。 基本のきほんから の CSSとHTML
記事作成に欠かせない 装飾のひとつが 囲み枠です。
文章を囲むことで 大事なポイントや 注意点を 分かりやすく表示させることができます。
色やデザインなど、用途に合わせて使い分けるための スタイルシートの書き方を 解説していきます。
囲み枠の作成と表示の手順
囲み枠は CSSコードで BOX と言います。
基本的な BOXは normal-box タイトル付きの BOXは title-box といった感じです。
スタイルシートで作成したBOXを呼び出すには 投稿記事の作成画面でコードを記述します。
BOXの作成 – CSS style –
まず、初めに CSS(スタイルシート)に 線種・線の幅・色などを 指定したものを作成します。

基本的なコードはこんな感じです。
BOXを呼び出す – 投稿作成 HTML –
次に、投稿画面で 囲みたい文字列を HTML コードで囲みます。

<div> と </div> の間に文字列を入れる といった感じです。
スタイルの カスタマイズ
まずは、作成したBOXがないと カスタマイズのしようがないので
とりあえずでいいので 外観カスタマイズの 追加CSS から
スタイルシートを記述し 投稿画面で コードを書いてみましょう。
ダッシュボード→ 外観 → カスタマイズ→ 追加CSS
ダッシュボード→ Luxeritas → カスタマイズ(外観)から移動できます。
囲み枠の種類と CSSコード
囲み枠は最低でも3種類、基本の枠・タイトル付きの枠 そして 注意喚起などの枠 が欲しいですね。
それ以外にも Box ごとに 名前を付けることで 何種類にでも枠を使い分けることができます。
基本の囲み枠 ー normal – box ー
まずは 基本的な 囲み枠から。
先ほどのコードに margin や padding といった 余白の調整のコードも一緒に記述していきます。
余白に関する記事はこちら →コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*基本枠-CSS*/ .normal-box1{ border: 4px solid #a7d28d; display:inline-block; margin: 1em 0; padding: 1em; } .normal-box1 p{ margin: 0; line-height:3em; } |
/*基本枠-CSS*/ というのは コードに関係する部分ではなく このCSSコードの
カスタマイズの内容を 自分自身が把握しておくための 名称のようなものですので
分かりやすいように名前を付けておくといいです。
この box1 の数字部分を書き換えていくことで 何パターンにも
囲み枠のスタイルを作成することができます。
タイトル付きの囲み枠 ー title-box ー
囲み枠に タイトルを付けたい時には このコードを使用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*タイトル付きの枠-CSS*/ .title-box1{ border: 5px solid #a3d6cc; display:inline-block; position: relative; margin: 1.5em 0.5em; padding: 1.5em; } .title-box1-title{ position: absolute; top: -0.8em; left: 20px; padding: 0 1em; color: #003366; font-size: 1.2em; font-weight: bold; background: #fff; } .title-box1 p{ margin-bottom: -0.5em; padding: 0; line-height:2; } |
注意喚起の囲み枠 ー cautionbox ー
注意喚起は 文字通り、注意を引くようなイメージで作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*注意喚起ボックス-CSS*/ .cautionbox{ background-color: #fff5ee; display:inline-block; margin: 1em 0; padding: 1em;} .cautionbox-title{ color: #ff6347; font-size: 23px; font-weight: bold; margin-top:-0.5em; } .cautionbox-title:before{ font-family: FontAwesome; content: "\f06a"; font-size:25px; margin-right:0.5em; } .cautionbox p{ margin: 0; padding: 0; line-height:1.8em; } |
こちらは注意喚起のマークとして FontAwesome(フォントオーサム)の アイコンを使用しています。
FontAwesome は使用するアイコンによって プラグインのインストールや
FontAwesomeのダウンロードが必要になります。
詳しい内容はこちら ➡ プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法
文字の長さに合わせて Boxの幅を変動させるコード
コードの中に display:inline-block; というコードがあります。
こちらのコードは囲み枠や見出しなどのラインの長さを
文章の長さに合わせてサイズを自動的に変動してくれるコードです。
私的には サイトの幅のままで 短い文章の時などは
バランスが悪くなってしまうと感じるのでこちらのコードを使用しています。
HTMLコードの記述のしかた
投稿記事の作成画面で 記述する HTMLのコードですが
枠の種類と 作成したナンバーごとで コードが少しずつ変わります。
覚えるのが大変なので 定型文登録しておくことをお勧めします。
定型文登録についての詳しい記事はこちら↓
定型文登録をフル活用!!文字登録で効率よく記事を作成できる機能
基本の囲み枠 ー normal-box1 ー
基本枠-HTML
1 2 3 4 5 |
/*HTMLの記述のしかた - 基本枠 -*/ <div class="normal-box1"> <p>ここにテキスト</p> </div> |
<p>ここにテキスト</p> の部分に囲み枠で表示したい文章を書き込みます。
タイトル付きの囲み枠 ー title-box ー
1 2 3 4 5 6 |
/*タイトル付きの囲み枠-HTML*/ <div class="title-box1"> <div class="title-box1-title">タイトル名</div> <p>ここにテキスト</p> </div> |
注意喚起の囲み枠 ー cautionbox ー
1 2 3 4 5 6 |
/*注意喚起の囲み枠-HTML*/ <div class="cautionbox"> <div class="cautionbox-title">注意</div> <p>ここにテキスト</p> </div> |
以上、【囲み枠】の作り方。 基本のきほんから の CSSとHTML でした!!