【囲み枠】 基本のきほんから の CSSとHTML

文章の中に囲み枠を取り入れることで 大事なポイントだったり
注意点だったりを分かりやすく表示させることができます。
囲み枠も何種類かスタイルを作っておきたいので
その方法も解説していきます。

囲み枠の作成の手順

基本の囲み枠のコードを分かりやすく図解.normal-box1{ border: 4px solid#a7d28d; }
図1 基本の囲み枠のCSSコード

囲み枠は CSS(スタイルシート)に 線種・線の幅・色などを
指定したものを書き込んでおきます。

HTMLのコードを分かりやすく図解
図2 囲み枠のHTMLコード

記事を作成する中で 使用したい場面が出てきた時に HTML のコード
記述をすることによって 囲み枠を呼び出すことが出来ます。

外観カスタマイズの 追加CSS からスタイルシートを記述することができ
サイトの画面を見ながら デザインの調整が出来ます。

外観カスタマイズの追加CSSの表示の仕方
ダッシュボード→ 外観 → カスタマイズ→ 追加CSS
ダッシュボード→ Luxeritas → カスタマイズ(外観)

始めは基本的な枠を書き込んでおいて
あとから好みに合わせてカスタマイズしていけばいいかと思います。

いろいろな囲み枠

囲み枠は最低でも3種類、基本の枠・タイトル付きの枠
そして 注意喚起などの枠 が欲しいですね。
それ以外にも Box にそれぞれ別の名前を付けることで
何種類にでも枠を使い分けることができます。

基本の囲み枠 ー normal-box ー

基本の囲み枠のイメージ画像

まずは基本の囲み枠のコードです。
先ほどのコードに marginpadding といった
余白の調整のコードも一緒に記述していきます。

余白に関するページはこちら→【CSS の 基本】margin(マージン)余白の調整

/*基本枠-CSS*/ というのは このCSS の名前みたいなもので
カスタマイズの内容が分かりやすいように名前を付けておくといいです。

この box1 の数字を書き換えていくことで何パターンにも
囲み枠のスタイルを作っておくことができます。

タイトル付きの囲み枠 ー title-box ー

タイトル付きの枠のイメージ画像

注意喚起の囲み枠 ー cautionbox ー

注意喚起の枠のイメージ画像

こちらは注意喚起のマークとして FontAwesome(フォントオーサム)の
アイコンを使用しています。
FontAwesome を使用するにはプラグインのインストールと
FontAwesomeのダウンロードが必要になります。
詳しい内容はこちら ➡ 【 WordPress-プラグイン】Font Awesomeの使い方

文字の長さに合わせた Boxの表示のしかた

コードの中に display:inline-block; というコードがあります。
こちらのコードは囲み枠や見出しなどのラインの長さを
文章の長さに合わせてサイズを自動的に変更してくれるコードです。
このコードを入れなければ サイトのボディの幅に合わせた長さになります。

HTMLコードの記述のしかた

HTMLのコードは記事作成のエディタ画面で使用します。
呼び出したい枠ごとでコードが少しずつ変わります。

基本の囲み枠  ー normal-box1 ー

基本枠-HTML

<p>ここにテキスト</p> の部分に囲み枠で表示したい文章を書き込みます。

タイトル付きの囲み枠 ー title-box ー

注意喚起の囲み枠 ー cautionbox ー

定形文登録

このHTMLのコードの記述はコードを間違えたりしても正しく表記されませんし
毎回記述するのも大変なので定型文登録しておくことをお勧めします。

Luxeritas テーマなら 定型文登録という機能があり
事前のHTMLのコードの登録をすることで
その都度のめんどうなHTMLの記述を省略でき記事作成の時間も
大幅に短縮できるという大変便利な機能なのです!!

関連記事はこちら

定型文登録についての詳しい記事はこちら↓
定型文登録をフル活用!!文字登録で効率よく記事を作成できる機能