コピペで簡単!BOXデザインCSS・シンプル~アイコンフォント利用まで

コピペで簡単!シンプルだけど使えるボックスデザインです。
画像枠としても使えるボックスデザインは以下にまとめています。
デザイン一覧
シンプルBOX
コードを表示
/*枠線ボックス*/
.border_box{
border:1px solid #fb8a8a;
padding:20px;
margin-top:20px;
}
コードを表示
/*二重線ボックス*/
.border_box2{
border:4px double #fb8a8a;
padding:20px;
margin-top:20px;
}
文字入りBOX
コードを表示
..point_box {
position: relative;
border: 2px solid #fb8a8a;
border-radius: 5px;
padding:20px;
margin-top:20px;}
.point_box::before {
content: "POINT";
position: absolute;
top: -15px;left: 15px;
font-size: 1.6rem;
font-weight: 700;
background-color: #ffffff;
color: #fb8a8a;
padding: 0 10px;
}
.point_box::before {content: "MEMO"; ・・・・・
上記の「POINTボックス」と同じ。「POINT」部分を「MEMO」に変更です。
マーク入りBOX
コードを表示
.question_box{
background-color: #afc5dc;
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
border-radius: 5px;
}
.question_box::before{
position:absolute;
top:20px;
left:20px;
font-size:2rem;
font-weight:700;
color: #ffffff;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: "?";
background: #779dc4;
}
コードを表示
.bikkuri_box{
background-color: #F6E1DF;
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
border-radius: 5px;
}
.bikkuri_box::before{
position:absolute;
top:20px;
left:20px;
font-size:2rem;
font-weight:700;
color: #ffffff;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: "!";
background: #fb8a8a;
}
アイコンフォント利用BOX
コードを表示
.arrow_box{
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
border-radius: 5px;
background-color: #f5f5f5;
}
.arrow_box::before{
position:absolute;
top:20px;
left:20px;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: 'f058';
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #fb8a8a;
font-size: 24px;
}
Font Awesomeのフリーフォントを使っています。
その他のアイコンフォントについては以下もご利用下さい。
WordPressの場合、テーマによっては既に使われていますが、うまく表示されない時はご自身で以下のコードを<head></head>内に貼り付けて下さい。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
ルクセリタスをお使いの方へ
ルクセリタスには「Font Awesome」対応機能があり、設定にチェックを入れるだけで利用可能です。
Luxelitas→カスタマイザーで CSSタブを選択すると下の方に設定項目があります。
「Font AwesomeオリジナルのCSS」と、「CDN」読み込みにチェックを入れます。
※デフォルトでは「Luxeritasで必要最小限のCSSのみ」になっています。
これで、上記説明でのCSSリンクコードを貼る必要ありません。
BOX使用時のHTMLコード
HTMLではすべて div か span で表示できます。
span class=”XXXX”
色を変える
カラーコードは以下もご利用ください。
ビジュアルエディタで使いやすくする
スタイル登録
装飾デザインをビジュアルエディタのスタイルに登録すれば簡単に使えます。
この方法は以下をご覧ください。
定型文登録
上記の方法以外にも、「定型文登録」機能のあるテーマであれば、そちらに登録する事で簡単に使えます。
ルクセリタスをお使いの方は以下をご覧ください。
関連記事
タグ
関連記事


ルクセリタス機能の目次デザインをカスタマイズ3パターン
無料テーマ「ルクセリタス」には目次自動生成機能があります。 プラグインを使った目 ...


ルクセリタスのメニューにアイコンフォントを使う方法
ルクセリタスで使えるアイコンフォントは、「Material Icons」と「Fo ...


アフィリエイトリンクで役立つ!ネットショップ等のカラーコード17種
アフィリエイトで役立つブログツールの定番 カエレバ、トマレバ、ヨメレバでリンクを ...


書類やクレカなどのアイコンフォントコード26選まとめでサクっとコピー
「Font Awesome」のフリーフォントです。 ...


グローバルメニューにプラグインなしでアイコンフォントを表示する
ワードプレスのグローバルメニューにアイコンフォントを表示する方法です。 通常の「 ...
ディスカッション
コメント一覧
まだ、コメントがありません