僕はサイトはAFFINGE5EXというテーマを使ってサイトを構築しています。
僕はよくサイト内で説明を行うときに枠線で囲って強調して文字を伝える事があります。これは特に何か説明や解説をしたい時に便利だと思い利用しています。
よくネットサーフィンして見かけるのが「個人の見解です」「用法・容量を守って」などの注意書きの時のアレですかね。
あんな感じのイメージで使用しているつもりです。
このAFFINGERにはそんな時に使える便利なショートコード「マイボックス」があります。
そんなマイボックスですが、いつもただ何となくポチポチとしているだけでした。AFFINGERは優秀なのでそんなポチポチでも十分すぎるほどのボックスが完成します。
でもやはりもっとよく使いこなすには自分で実践して体験しないと理解しないですよね。
なので今回はマイボックスの記事を書いていきます。
使いこなすといってもクリックだけで簡単挿入できます。カスタムも簡単なのでおすすめですよ。
ポイント
タブ→ボックスデザイン→マイボックス→基本
タブ→ボックスデザイン→マイボックス→しかく（枠のみ）
タブ→ボックスデザイン→マイボックス→まるみ
参考
タブ→ボックスデザイン→マイボックス→参考
関連
タブ→ボックスデザイン→マイボックス→関連
メモ
タブ→ボックスデザイン→マイボックス→メモ
ポイント
タブ→ボックスデザイン→マイボックス→ポイント
注意ポイント
タブ→ボックスデザイン→マイボックス→注意ポイント
はてな
タブ→ボックスデザイン→マイボックス→はてな
コードの解説
[st-mybox title="見出し" fontawesome="Webアイコン" color="見出し色" bordercolor="枠線カラー" bgcolor="背景色" borderwidth="枠線の太さ（px）" borderradius="角丸（px）" titleweight="見出しの太さ（bold）" fontsize="見出しのフォントサイズ" myclass="オリジナルクラス" margin="マージン"]
ここには自由に文字が入力できます
[/st-mybox]
※ 青マーカーは太字で表示されています。使用する場合は細字に打ち直してください。
タグを挿入する
タグ→ボックスデザイン→マイボックス→基本の順にマウスを動かして選択します。
ポイント
ここには自由に文字が入力できます
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
ここには自由に文字が入力できます
[/st-mybox]
※ 青マーカーは太字で表示されています。使用する場合は細字に打ち直してください。
上記コードが挿入されます。
ショートコードを編集する
次にコードを編集してカスタマイズしていきます。
コードの基本的な解説は下記になります。
コードの解説
[st-mybox title="見出し" fontawesome="Webアイコン" color="見出し色" bordercolor="枠線カラー" bgcolor="背景色" borderwidth="枠線の太さ（px）" borderradius="角丸（px）" titleweight="見出しの太さ（bold）" fontsize="見出しのフォントサイズ" myclass="オリジナルクラス" margin="マージン"]
ここには自由に文字が入力できます
[/st-mybox]
※ 青マーカーは太字で表示されています。使用する場合は細字に打ち直してください。
基礎編
コードの基礎を解説していきます。
見出し 「title=""」
ポイント
「title=""」を編集する事で見出しを変えられます。
このコードでは初期設定を流用しているため「title="ポイント"」と入力してあります。
webアイコン 「fontawesome="" 」
ポイント
「fontawesome="" 」を編集する事でwebアイコンを変えられます。
fontawesome.com/v4.7.0/icons/からお好きなアイコンを選択して下さい。
このコードでは初期設定で使用している「fa-check-circle」を流用しているため、そのまま「fontawesome="fa-check-circle"」と入力してあります。
見出しの色 「color=""」
ポイント
「color=""」を編集する事で見出しの色を変えられます。
materialui.co/colorsからお好きなカラーを選択して下さい。
このコードではピンク色に変更するため「color="#ffb6c1"」と入力してあります。
枠線の色 「bordercolor=""」
ポイント
「bordercolor="10"」を編集する事で枠線の色を変えられます。
materialui.co/colorsからお好きなカラーを選択して下さい。
このコードではオレンジ色に変更するため「bordercolor="#ffdab9"」と入力してあります。
枠線内の背景色 「bgcolor=""」
ポイント
「bgcolor=""」を編集する事で枠線内の背景色を変えられます。
materialui.co/colorsからお好きなカラーを選択して下さい。
このコードでは薄緑色に変更するため「bgcolor="#f5fffa"」と入力してあります。
枠線の太さ 「borderwidth=""」
ポイント
「borderwidth=""」を編集する事で枠線の太さを変えられます。
このコードではより太い枠線に変更するため「borderwidth="5"」と入力してあります。
枠線の角丸 「borderradius=""」
ポイント
「borderradius=""」を編集する事で枠線の角丸を変えられます。
このコードではより枠線を丸く変更するため「borderradius="50"」と入力してあります。
見出し文字の太さ 「titleweight=""」
ポイント
「titleweight=""」を編集する事で見出し文字の太さを変えられます。
このコードでは見出しの文字を細字に変更するため「titleweight=""」と入力してあります。
見出しの文字サイズ 「fontsize=""」
ポイント
「fontsize=""」を編集する事で見出しの文字サイズを変えられます。
このコードでは見出しの文字サイズを小文字に変更するため「fontsize="15"」と入力してあります。
応用編
基礎編で紹介した内容を組み合わせ、少し応用して解説していきます。
ご注意ください
ご注意下さい
[st-mybox title="ご注意下さい" fontawesome="fa-exclamation-circle" color="#ff0000" bordercolor="#ff0000" bgcolor="#ffe0ef" borderwidth="2" borderradius="5" titleweight="bold"]
ここに文字を入力
[/st-mybox]
※ 青マーカーの部分は太字になっています。使用する際は細字に直してください。
- 「title=""」を「ご注意ください」と入力する事でタイトルを変更しています。
- 「fontawesome=""」を「fa-exclamation-circle」と入力する事でアイコンを変更しています。
- 「color=""」を「#ff0000」と入力する事で見出しの色を変更しています。
- 「bordercolor=""」を「#ff0000」と入力する事で枠線の色を変更しています。
- 「bgcolor=""」を「#ffe0ef」と入力する事で枠線内の背景色を変更しています。
ここがポイント
ここがポイント
[st-mybox title="ここがポイント" fontawesome="fa-lightbulb-o" color="#FFA000" bordercolor="#FFA000" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]
ここに文字を入力
[/st-mybox]
※ 青マーカーの部分は太字になっています。使用する際は細字に直してください。
- 「title=""」を「ここがポイント」と入力する事でタイトルを変更しています。
- 「fontawesome=""」を「fa-lightbulb-o」と入力する事でアイコンを変更しています。
- 「color=""」を「#FFA000」と入力する事で見出しの色を変更しています。
- 「bordercolor=""」を「#FFA000」と入力する事で枠線の色を変更しています。
- 「bgcolor=""」を「#ffffff」または「""（空白の状態）」と入力する事で見出し文字「ご注意ください」の縁取りが無しに設定されます。
黒板
[st-mybox title="" fontawesome="" color="" bordercolor="#6D4C41" bgcolor="#2E7D32" borderwidth="10" borderradius="0" titleweight=""]
ここに文字を入力
[/st-mybox]
※青マーカーの部分は太字になっています。使用する際は細字に直してください。
- 「title=""」を「""」と入力する事でタイトルを非表示に変更しています。
- 「fontawesome=""」を「""」と入力する事でアイコンを非表示に変更しています。
- 「color=""」を「""」と入力する事で見出しの色を無しに変更しています。
- 「bordercolor=""」を「#6D4C41」と入力する事で枠線の色を変更しています。
- 「bgcolor=""」を「#2E7D32」と入力する事で枠線内の背景色を変更しています。
- 「borderwidth=""」を「"10"」と入力する事で枠線の太さを変更しています。
- 「borderradius=""」を「"0"」と入力する事で枠線の角丸をなしに変更しています。
- 「titleweight=""」を「""」と入力する事で見出し文字の太さを無しに変更しています。
まとめ
いかがでしたか？
ショートコードを少し編集するだけでマイボックスの見た目がガラッと変わりますよね。
解説するときなど変化をつけながら挿入すればより一層読みやすい記事が書けると思います。
AFFINGE5EX・AFFINGERをお使いでまだマイボックスをお使いでない方はぜひ一度お試しください。
