WING（AFFINGER）のボックスデザインをおしゃれに変更してみましょう。
バナー風ボックス
バナー風ボックスには4個のボックスがあります
基本
背景なし（高さ400px)
左寄せ
+ コードの説明
st-flexbox url="リンク先URL"
rel="nofollow" target="リンクを新しく開くには（target）を記入"
fontawesome="Webアイコン"
title="タイトル"
width="幅（%）"
height="高さ（px）"
color="文字色"
fontsize="文字サイズ（%）"
radius="角丸（px）"
shadow="タイトルの影色"
bordercolor="枠線カラー"
borderwidth="枠線の太さ（px）"
bgcolor="背景色"
backgroud_image="背景画像のURL"
blur="背景画像のぼかし"
left="左寄せ（on）"
margin_bottom="下の余白（px）"
基本
【基本】のデフォルト↓
背景なし
【背景無し】のデフォルト↓
左寄せ
【左寄せ】のデフォルト↓
マイボックス
マイボックスには9個のボックスがあります
基本
しかく（枠のみ)
まるみ
参考
関連
メモ
ポイント
注意ポイント
はてな
+ コードの説明
st-mybox title="見出し"
fontawesome="Webアイコン"
color="見出し色"
bordercolor="枠線カラー"
bgcolor="背景色"
borderwidth="枠線の太さ（px）"
borderradius="角丸（px）"
titleweight="見出しの太さ（bold）"
fontsize="見出しのフォントサイズ"
myclass="オリジナルクラス"
margin="ボックスタイトル空白マージンの設定【あまり触らないほうがいい】"
基本
しかく（枠のみ）
まるみ
参考
メモ
ポイント
注意ポイント
はてな
マイボックス(+CSSクラス)
マイボックス(+CSSクラス)には11個のボックスがあります
メモ
メモ（下線のみ)
メモ（枠のみ）
メモ（枠・下線あり）
注意（下線のみ）
必要なモノ
必要なモノ（ドット下線）
チェックリスト
チェックリスト（ドット下線）
簡単な流れ
簡単な流れ（ドット下線）
メモ
メモ（下線のみ)
メモ（枠のみ）
メモ（枠・下線あり）
注意（下線のみ）
必要なモノ
必要なモノ（ドット下線）
チェックリスト
チェックリスト（ドット下線）
簡単な流れ
簡単な流れ（ドット下線）
見出し付きフリーボックス
見出し付きフリーボックスには10個のボックスがあります
基本
注意
はてな
ポイント
メモ
基本（タイトル幅100%）
注意（タイトル幅100%）
はてな（タイトル幅100%）
ポイント（タイトル幅100%）
メモ（タイトル幅100%）
基本
注意
はてな
ポイント
メモ
基本（タイトル幅100%）
注意（タイトル幅100%）
はてな（タイトル幅100%）
ポイント（タイトル幅100%）
メモ（タイトル幅100%）
メモボックス
スライドボックス
チェックボックス（番号なしリスト）
こんな方におすすめ（V)
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
下段に文字を入れる場合
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
【補足】この部分に文字を入れてみる
+ コード（クリックで開く）
<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
【補足】この部分に文字を入れてみる
</div>
タイトルがいらない場合
- これはダミーのテキストです
- これはダミーのテキストです
+ コード（クリックで開く）
<div class="st-blackboard">
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>
チェックがいらない場合
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
+ コード（クリックで開く）
<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>
チェックを番号にする（olタグ）
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
+ コード（クリックで開く）
<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ol class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ol>
</div>
チェックもタイトルもいらない場合
- これはダミーのテキストです
- これはダミーのテキストです
+ コード（クリックで開く）
<div class="st-blackboard">
<ul class="st-blackboard-list st-no-ck">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>
こんな方におすすめ[V]
デフォルト（初期設定）↓
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
チェックボックス（̻▢）は消せないのか？
チェックだけにしたい。
下段に文字を入れる場合
+ コード（クリックで開く）
<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
【補足】この部分に文字を入れてみる
</div>
タイトル削除
+ コード（クリックで開く）
<div class="st-blackboard square-checkbox">
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>
ガイドマップメニュー
pre
html
pre:terminal
command