今回はタイトル付きボックスデザインをコピペで簡単に使用できるようにしています。
ワードプレス用にCSS込みコードにしていますのでコピペでOKです。
まずワードプレスに新エディターから旧エディターに戻す
TinyMCE Advancedをインストールしてクラシックエディターにしましょう。
分からない場合は下記を参考に進めてください。
-
-
ワードプレス道 「機能編」記事の強調部分に下線と背景色の設定方法！！
続きを見る
タイトル付き枠（シンプル）
|
1 2 |
<fieldset style="border:2px solid #ffcccc;"><legend>タイトル</legend> 本文はこちらに</fieldset> |
※shift＋Enterで改行できます。
色を変更する場合は、
#ffccccをお好きな色に変更してください。
WEBカラーチャートなどを参考にしてください。
タイトル付き点線の枠
|
1 |
<fieldset style="border:2px dotted #2a83a2;"><legend>タイトル</legend>本文</fieldset> |
※shift＋Enterで改行できます。
色を変更する場合は、
#2a83a2をお好きな色に変更してください。
WEBカラーチャートなどを参考にしてください。
タイトル付き二重線の枠
|
1 |
<fieldset style="border:4px double #93ca76;"><legend>タイトル</legend> 本文</fieldset> |
※shift＋Enterで改行できます。
色を変更する場合は、
#93ca76をお好きな色に変更してください。
WEBカラーチャートなどを参考にしてください。
上部タイトル付枠
|
1 2 3 4 |
<div style="background:#ff7f50; border:1px solid #ff7f50; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトル</font></div><div style="border:1px solid #ff7f50; padding:10px; font-size:1em;">本文<br></div> |
※shift＋Enterで改行できます。
色を変更する場合は、
#ff7f50を3箇所お好きな色に変更してください。
WEBカラーチャートなどを参考にしてください。
上部タイトル付枠 （角丸）
|
1 2 |
<div style="border: 1px solid #1e90ff; padding: 5px; border-radius: 10px 10px 0 0; background: #1e90ff;">□タイトル</div> <div style="border: 1px solid #1e90ff; padding: 10px; border-radius: 0 0 10px 10px; background: #ffffff;">★ここに文字を入力してください。</div> |
※shift＋Enterで改行できます。
色を変更する場合は、
#1e90ffを3箇所お好きな色に変更してください。
WEBカラーチャートなどを参考にしてください。
上部タイトル付枠 （小さい角丸）
|
1 2 3 4 |
<div style="margin: 0em; display: inline-block; position: relative; top: 3px; padding: 0 .5em; height: 1.5em; line-height: 1.5em; color: #ffffff; background: #00bfff; font-weight: bold; text-align: center; border-radius: 5px 5px 0 0;">□タイトル</div> <div style="background: rgba(255,255,255,0); border: solid 3px #00bfff; border-radius: 0 5px 5px; padding: 20px; font-size: 90%;">★ここに文字を入力してください。</div> |
※shift＋Enterで改行できます。
色を変更する場合は、
#00bfffを2箇所お好きな色に変更してください。
WEBカラーチャートなどを参考にしてください。
色の変更をしたい場合はwebのカラーチャートからお好きな色を選び、入れ替えてみてください。
プラグインAddQuicktagを登録
継続して使用する場合はプラグインAddQuicktagを入れてください。
使い方は、下記を参照に使用してみてください。
-
-
ワードプレス道 「機能編」囲み枠で記事の見た目を整えよう！！
続きを見る
