アイコンの大きさ、種類、色や見出しに枠線、背景色など自由に変えれる見出しボックス(ReNEW)です。(ver20171226~)
見出し(全角15文字)
これはデフォルトの見出しボックスです(デフォルトは環境依存。カスタマイザーで変更可能です)
ちょっと小話
アイコンを追加したり角を丸くして可愛く
NEWS
枠線の太さも自由自在
使用方法
①任意のテキストを選択して「②タグ」>「③マイボックス」をクリック
上図のようにショートコードで囲まれればOKです。(※図はわかりやすいように太字・着色しています)
ポイント
これがデフォルトのボックスです
カスタマイズ方法
ショートコード内の値を設定する事で表示するデザインを変更できます。
[ st-midasibox
title="①見出し(全角15文字)"
fontawesome="②アイコン"
bordercolor="③上ボーダーの色"
color="④見出しカラー"
bgcolor="⑤背景色"
borderwidth="⑥上ボーダーの太さ"
borderradius="⑦ボーダーの丸み"
titleweight="⑧見出しの太さ"
]
※わかりやすいように改行しています(実際は改行してはいけません)
※AMPページにカラー変更は適応されません
title="①見出し(全角15文字)"
「title」でボックスタイトルを任意のものに変更できます
例)title="ココをチェック!"
ココをチェック!
タイトルを変更しました
※タイトルは長すぎるとレイアウトが破たんする場合がございます
fontawesome="②アイコン"
アイコンはfontawesomeのものが使用できます。
変更したいアイコンの赤枠部分の英字を入力して下さい
例)fontawesome="fa-camera-retro"
ココをチェック!
アイコンを追加しました
bordercolor="③上ボーダーの色"
上ボーダーの色はHTMLカラーコード(#で始まる6桁のカラーコード)で変更できます。
例)bordercolor="#7CB342"
ココをチェック!
ボーダーの色を変更しました
color="④見出しカラー"
見出し色もHTMLカラーコード(#で始まる6桁のカラーコード)で変更できます。
例)color="#FFF176"
ココをチェック!
見出し色を変更しました
bgcolor="⑤背景色"
背景色もHTMLカラーコード(#で始まる6桁のカラーコード)で変更できます。
例)bgcolor="#E1BEE7"
ココをチェック!
背景色を変更しました
borderwidth="⑥上ボーダーの太さ"
上ボーダーの太さもpxサイズで変更できます。(0にすると「枠線なし」になります)
例)borderwidth="10"
※「px」は不要
ココをチェック!
上ボーダーの太さを10pxに変更しました
borderradius="⑦ボーダーの丸み"
枠線の太さもpxサイズで変更できます。(0にすると「枠線なし」になります)
例)borderradius="10"
※「px」は不要
ココをチェック!
ボーダーの丸みを10pxに変更しました
titleweight="⑧見出しの太さ"
見出しの太さも変更できます。値が何かあれば太字、空であればノーマルとなります。
titleweight=""
ココをチェック!
見出しの太さをノーマルにしました。
AddQuicktagプラグイン(無料)を使用するとさらに便利
コードを登録できる「AddQuicktag」を使用すると作成したショートコードを登録できるので好きな時にいつでも作成したコードを呼び出せ便利です。