タイトル付き囲み枠 ー title-box ー のCSS作成とHTML
タイトル付きの囲み枠にもいろいろと種類があります。
囲み枠の部分にタイトルを入れたり、枠の内側へ入れたり
または、Font Awesomeなどのアイコンを付けたタイトル表示など
タイトルの位置文字のサイズなどで表情が変わります。
ここでは基本的なタイトル付きの囲み枠のCSS作成とHTMLコードの記述についてまとめていきます。
タイトル付きの囲み枠と注意喚起
基本の囲み枠にタイトルを付けた時のイメージとタイトル部分の位置などで囲み枠のイメージが変わります。
ここでは基本のタイトル付き囲み枠と注意喚起の囲み枠の2タイプを紹介します。
タイトル付き囲み枠
囲み枠に タイトルを付けたい時には このコードを使用します。
このタイトル部分には BOXに指定した " 囲み枠の線を消す " ために background を白か同色を指定します。
この応用で枠の内側にタイトルを付けることもできますね。
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 |
/*タイトル付きBOX-囲み枠のCSS*/ .title-box1{ border:
5px
solid
#a3d6cc; position:
relative; margin:
1.5em
0.5em; padding:
1em
1em
0em
1em; } /*タイトル付きBOX-タイトルのCSS*/ .title-box1-title{ position:
absolute; top:
-1em; left:1em; padding:0em
0.3em; color:
#003366; font-size:
1.2em; font-weight:
bold; background:
#ffffff;
} /*タイトル付きBOX-余白の調整*/ .title-box1 p{ padding:0; line-height:1.5; } |
注意喚起の囲み枠 ー 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 27 28 29 30 31 |
/*注意喚起ボックス-CSS*/ .cautionbox{ background-color:
#ffdab9; display:inline-block; margin:
1em
0; padding:
1em; } /*注意喚起ボックス-タイトルのCSS*/ .cautionbox-title{ color:
#f76060; font-size:
1.2em; font-weight:
bold; margin-top:-0.5em; } /*注意喚起ボックス-アイコンの設定*/ .cautionbox-title:before{ font-family:
FontAwesome; content:
"\f06a"; font-size:
25px; margin-right:
10px; } /*注意喚起ボックス-文字と余白の設定*/ .cautionbox p{ margin:
0; padding:
0
1em; line-height:1.8; } |
囲み枠のカスタマイズ
基本的な枠のカスタマイズや 枠に丸みを付けるなどのカスタマイズはこちらの記事で紹介しています。
基本的な囲み枠の使いかたはこちら↓
【囲み枠 – BOX】CSSコードとHTMLの記述のしかた -基礎 –
枠に丸みを付けたい時に使用するCSS
見出しや囲み枠の 角に丸みを付けたいときに使うCSS【 border-radius 】
ラインのデザインの参考にして頂きたい!
見出しをデザイン!CSSカスタマイズの基本|縦ラインを無くしたり 簡単なコードでのライン作成!
アイコン
注意喚起に使用するアイコンには、FontAwesome(フォントオーサム)などを使用しますが
使用するアイコンによって プラグインのインストールや FontAwesomeのダウンロードが必要になります。
Font Awesome (フォントオーサム) |無料で使えるアイコンの登録と設定【 WordPress 】
HTMLコードの記述
タイトル付きの囲み枠・ 注意喚起の囲み枠 のHTMLコードを投稿画面で記述します。
それぞれ作成したCSSに合わせて 数字部分を変えてお使いください。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*タイトル付きの囲み枠-HTML*/ <div class="title-box1"> <div class="title-box1-title">タイトル名</div> <p>ここにテキスト</p> </div> /*注意喚起の囲み枠-HTML*/ <div class="cautionbox"> <div class="cautionbox-title">注意</div> <p>ここにテキスト</p> </div> |
このコード入力のしかたについては コードを覚えるのが大変なので
定型文登録(現在、パターン登録に名称変更)しておくことをお勧めします。
HTMLコードの入力を短縮!ルクセリタス【定型文】の登録と使いかた|WordPress