WING(AFFINGER5及びSTINGER PRO2)のマニュアルはコチラです※パスワードは商品フォルダ内テキストを確認

AFFINGER4 STINGER PRO クイックボタン

マイボックスの使い方

アイコンの大きさ、種類、色や見出しに枠線、背景色など自由に変えれる簡単なボックスです。(ver20171226~)

ポイント

これがデフォルトのボックスです

なるほど

枠線の色やアイコン、見出しなどを変えれます

アイコンや見出しを非表示にすることもできます

枠線を消したり丸みをなくしたりも可能です。

使用方法

①任意のテキストを選択して「②タグ」>「③マイボックス」をクリック

上図のようにショートコードで囲まれればOKです。(※図はわかりやすいように太字・着色しています)

ポイント

これがデフォルトのボックスです

カスタマイズ方法

ショートコード内の値を設定する事で表示するデザインを変更できます。

[ st-mybox
title="見出し①"
fontawesome="アイコン②"
color="見出しの色③"
bordercolor="ボーダー色④"
bgcolor="コンテンツの背景色⑤"
borderwidth="ボーダーの太さ⑥"
borderradius="ボーダーの丸み⑦"
titleweight="見出しの太さ⑧"
 ]

※わかりやすいように改行しています(実際は改行してはいけません)
※AMPページにカラー変更は適応されません

title="見出し①"

「title」でボックスタイトルを任意のものに変更できます

例)title="ココをチェック!"

ココをチェック!

タイトルを変更しました

※タイトルは長すぎるとレイアウトが破たんする場合がございます

fontawesome="アイコン②"

アイコンはfontawesomeのものが使用できます。

変更したいアイコンの赤枠部分の英字を入力して下さい

例)fontawesome="fa-camera-retro"

ココをチェック!

アイコンを変更しました

color="見出しの色③"

見出しの色はHTMLカラーコード(#で始まる6桁のカラーコード)で変更できます。

例)color="#7CB342

ココをチェック!

見出しとアイコンの色を変更しました

bordercolor="ボーダー色④"

ボーダー色もHTMLカラーコード(#で始まる6桁のカラーコード)で変更できます。

例)color="#7CB342

ココをチェック!

ボーダー色を変更しました

bgcolor="③背景色"

背景色もHTMLカラーコード(#で始まる6桁のカラーコード)で変更できます。

例)color="#FFFDE7

ココをチェック!

背景色を変更しました

背景色を指定すると「タイトル」に設定していた背景色(白)が消去され代わりに文字にフチ取り(白)が付与されます

borderwidth="ボーダーの太さ⑥"

枠線の太さもpxサイズで変更できます。(0にすると「枠線なし」になります)

例)borderwidth="5"

※「px」は不要

ココをチェック!

枠線の太さを5pxに変更しました

borderradius="ボーダーの丸み⑦"

ボーダーの丸みもpxサイズで変更できます。(0にすると「丸みなし」になります)

例)borderradius="50"

※「px」は不要

ココをチェック!

丸みを50pxに変更しました

titleweight="見出しの太さ⑧"

見出しの太さも変更できます。値が何かあれば太字、空であればノーマルとなります。

titleweight=""

ココをチェック!

見出しの太さをノーマルにしました。

AddQuicktagプラグイン(無料)を使用するとさらに便利

 

コードを登録できる「AddQuicktag」を使用すると作成したショートコードを登録できるので好きな時にいつでも作成したコードを呼び出せ便利です。

https://ja.wordpress.org/plugins/addquicktag/

コピペで使えるサンプル例

注意事項

注意事項

これはダミーのテキストです

[st-mybox title="注意事項" fontawesome="fa-exclamation-circle" color="#ff0000" bordercolor="#ff0000" bgcolor="#ffffff" borderwidth="2" borderradius="3" titleweight="bold"]

これはダミーのテキストです

[/st-mybox]

なるほど(電球)

なるほど

これはダミーのテキストです

[st-mybox title="なるほど" fontawesome="fa-lightbulb-o" color="#FFA000" bordercolor="#FFA000" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]

これはダミーのテキストです

[/st-mybox]

黒板

アイコンや見出しを非表示にすることもできます

[st-mybox title="" fontawesome="" color="#fff" bordercolor="#6D4C41" bgcolor="#2E7D32" borderwidth="5" borderradius="0" titleweight="bold"]

アイコンや見出しを非表示にすることもできます

[/st-mybox]

※文字色が「白」のためエディタでは見えなくなります

NEW大幅に進化した新バージョンWING(AFFINGER5 / STINGER PRO2)好評発売中!

ユーザー様の声

ユーザーの声をさらに見る

新バージョン「WING」を見る

ご利用バージョンやテーマにより設定方法やキャプチャ画像が異なる場合がございます

※テーマアップデートにより情報が一部異なる場合がございます

-AFFINGER4, STINGER PRO, クイックボタン

Copyright© STINGER's MANUAL , 2020 All Rights Reserved Powered by AFFINGER5.