これから取り組むカスタマイズ
▼背景に画像+ボタン
▼付箋ボックス
この記事を読めばわかること
この記事を読めばわかること

- ◆◆
- ◆◆
- ◆◆
Lightbox(ポップアップ表示)
画像の場合 (Lightbox)
[su_lightbox type=”iframe” src=”https://ufufu-style.com/wp-content/uploads/halloween.jpg” mobile=”yes”]タップ/クリックで画像を表示[/su_lightbox]
[ su_lightbox type="iframe" src="https://ufufu-style.com/wp-content/uploads/halloween.jpg" mobile="yes"]
タップ/クリックで画像を表示
[/su_lightbox]
YouTubeの場合 (Lightbox)
[su_lightbox src=”https://www.youtube.com/watch?v=el3eRA8gzNw”]タップ/クリックで動画を再生[/su_lightbox]
[ su_lightbox src="https://www.youtube.com/watch?v=el3eRA8gzNw"]
タップ/クリックで動画を再生
[/su_lightbox]
ラベル
[ su_label type="◆◆"]デフォルトはグレーだよ[/su_label]
[su_list icon=”icon: leaf” icon_color=”#bcdb99″ indent=”15″]
- info(青:関連)
- success(緑:参考)
- warning(黄:参考)
- important(赤:注意)
- black(黒:ダメ)
- default(グレー:標準)
[/su_list]
[su_label type=”info”]関連[/su_label][su_permalink id=”299″ target=”self”]
[ su_label type="info"]関連[/su_label][ su_permalink id="299" target="self"]
[su_label type=”success”]参考[/su_label]タイプに「success」を指定するよ。卒園式・卒業式、入園式・入学式まとめ
[su_label type=”warning”]参考[/su_label]タイプに「warning」を指定するよ。
[su_label type=”important”]注意[/su_label]タイプに「important」を指定するよ。
[su_label type=”black”]答え[/su_label]タイプに「black」を指定するよ。
[su_label type=”default”]標準[/su_label]タイプに「default」を指定するよ。
ハイライト(マーカー)
[su_highlight background=”#FFEA00″ color=”#000000″]テキスト[/su_highlight]
[ su_highlight background="#FFEA00" color="#000000"]テキスト[/su_highlight]
引用
[su_quote style=”default” cite=”瀬戸内ことりさんが言ってました。” url=”https://setouchi-kotori.com/sagi/”]引用文するテキストをここに書く。[/su_quote]
[ su_quote style="default" cite="瀬戸内ことりさんが言ってました。" url="https://setouchi-kotori.com/sagi/"]引用文[/su_quote]
パーマリンク(記事IDで内部リンクが貼れる)
アンカーテキスト(タイトル)を自動的に拾ってきてくれるので、タイトルを変更しても大丈夫。
[su_permalink id=”2808″ target=”self”]
[ su_permalink id="2808" target="self"]
[su_permalink id=”2808″ target=”self” title=”ここに入力したテキストはマウスオーバーで表示される”]
[ su_permalink id="2808" target="self" title="ここに入力したテキストはマウスオーバーで表示される"]
アイコンフォントを選ぶ
[su_button url=”https://forkaweso.me/Fork-Awesome/icons/” target=”blank” rel=”nofollow” style=”ghost” background=”#2d6da4″ color=”#2d6da4″ size=”8″ wide=”yes”
center=”yes” radius=”auto” icon=”icon:chevron-circle-right” icon_color=”#2d6da4″ text_shadow=”none” desc=”Fork Awesome って w”]
一覧からアイコンを選ぶ
[/su_button]
ノート
[su_note note_color=”#ffffb2″ text_color=”#333333″ radius=”5″]テキスト[/su_note]
[ su_note note_color="#ffffb2" text_color="#333333" radius="5"]テキスト[/su_note]
リスト
葉っぱのリスト
[su_list icon=”icon: leaf” icon_color=”#bcdb99″ indent=”15″]
- 1つ目の項目
- 2つ目の項目
- 3つ目の項目
[/su_list]
[ su_list icon="icon: leaf" icon_color="#bcdb99" indent="15"]
<ul>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ul>
[/su_list]
チェックマークのリスト
[su_list icon=”icon: check-circle-o” icon_color=”#5b94c5″ indent=”15″]
- 1つ目の項目
- 2つ目の項目
- 3つ目の項目
[/su_list]
[ su_list icon="icon: check-circle-o" icon_color="#5b94c5" indent="15"]
<ul>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ul>
[/su_list]
リスト(関連記事リンク集)
[su_list icon=”icon: chevron-circle-right” icon_color=”#5b94c5″ indent=”10″]
- [su_permalink id=”299″ target=”self”]
- [su_permalink id=”324″ target=”self”]
[/su_list]
[ su_list icon="icon: chevron-circle-right" icon_color="#5b94c5" indent="10"]
<ul>
<li>[ su_permalink id="299" target="self"] </li>
<li>[ su_permalink id="324" target="self"] </li>
</ul>
[/su_list]
ボックス
関連記事ボックス
[su_box title=”こちらの記事もおすすめ” style=”soft” box_color=”#70a1cc” title_color=”#FFFFFF” radius=”5″]
[su_list icon=”icon: chevron-circle-right” icon_color=”#5b94c5″ indent=”10″]
- [su_permalink id=”299″ target=”self”]
- [su_permalink id=”324″ target=”self”]
[/su_list]
[/su_box]
[ su_box title="こちらの記事もおすすめ" style="soft" box_color="#70a1cc" title_color="#FFFFFF" radius="5"]
[su_list icon="icon: chevron-circle-right" icon_color="#5b94c5" indent="10"]
<ul>
<li>[ su_permalink id="299" target="self"] </li>
<li>[ su_permalink id="324" target="self"] </li>
</ul>
[/su_list]
[/su_box]
青ボックス
[su_box title=”タイトル” style=”soft” box_color=”#70a1cc” title_color=”#FFFFFF” radius=”5″]コンテンツ[/su_box]
[ su_box title="タイトル" style="soft" box_color="#333333" title_color="#FFFFFF" radius="5"]コンテンツ[/su_box]
メリット(緑枠)
[su_box title=”メリット” style=”soft” box_color=”#84d3d0″ title_color=”#ffffff” radius=”8″]
- 天候を気にせずに洗濯できる
- 花粉・大気汚染も気にせずに済む
- 高温でダニも死滅する
[/su_box]
[ su_box title="メリット" style="soft" box_color="#84d3d0" title_color="#ffffff" radius="8"]
<ol>
<li>天候を気にせずに洗濯できる</li>
<li>花粉・大気汚染も気にせずに済む</li>
<li>高温でダニも死滅する</li>
</ol>
[/su_box]
デメリット(赤枠)
[su_box title=”デメリット” style=”soft” box_color=”#d384af” title_color=”#ffffff” radius=”8″]
- 電気代がかかる
- スペースを取る
- うるさい
[/su_box]
[ su_box title="デメリット" style="soft" box_color="#d384af" title_color="#ffffff" radius="8"]
<ol>
<li>電気代がかかる</li>
<li>スペースを取る</li>
<li>うるさい</li>
</ol>
[/su_box]
ボタン
内部リンクを貼る場合
フォントアイコンの古いバージョンと同じものが使えるっぽい。
[su_button url=”https://ufufu-style.com” target=”self” style=”default” background=”#70a1cc” color=”#FFFFFF” size=”8″ wide=”no” center=”yes” radius=”auto” icon=”icon:chevron-circle-right” icon_color=”#FFFFFF” text_shadow=”none”]
ボタンテキスト
[/su_button]
[ su_button url="https://ufufu-style.com" target="self" style="default" background="#70a1cc" color="#FFFFFF" size="8" wide="no" center="yes" radius="auto" icon="icon:chevron-circle-right" icon_color="#FFFFFF" text_shadow="none"]
ボタンテキスト
[/su_button]

解説するよ。
[ su_button
url="https://ufufu-style.com" ▶ リンク先URL
target="self" ▶「blank」にすると外タブで開く
style="default" ▶「ghost」にすると背景が白いボタンになる
background="#70a1cc" ▶ ボタンの色
color="#FFFFFF" ▶ 文字の色
size="8" ▶ 20まで設定できる
wide="no" ▶「yes」にすると幅100%になる
center="yes" ▶「no」にすると左に寄る
radius="auto" ▶ ボタンの大きさに応じて自動的に角丸
icon="icon:chevron-circle-right" ▶ テキストの前にアイコンを置く
icon_color="#FFFFFF" ▶ アイコンの色を指定する
text_shadow="none" ▶ ここをいじることでテキストに影をつけることができる
]
ボタンテキスト ▶ ボタンに表示されるテキスト
[/su_button]
外部リンクの場合
[su_button url=”https://setouchi-kotori.com” target=”blank” rel=”nofollow” style=”ghost” background=”#2d6da4″ color=”#2d6da4″ size=”8″ wide=”no”
center=”yes” radius=”auto” icon=”icon:chevron-circle-right” icon_color=”#2d6da4″ text_shadow=”none” desc=”参考になるといいんだけど”]
参考サイトへ行くよ
[/su_button]
[ su_button url="https://setouchi-kotori.com" target="blank" rel="nofollow" style="ghost" background="#2d6da4" color="#2d6da4" size="8" wide="no"
center="yes" radius="auto" icon="icon:chevron-circle-right" icon_color="#2d6da4" text_shadow="none" desc="参考になるといいんだけど"]
参考サイトへ行くよ
[/su_button]

解説するよ。
[ su_button
url="https://setouchi-kotori.com" ▶ リンク先URL
target="blank" ▶「self」にすると内タブで開く
rel="nofollow" ▶ ノーフォロー属性を付加する
style="ghost" ▶「default」が普通のボタン
background="#70a1cc" ▶ ボタンの色
color="#70a1cc" ▶ 文字の色
size="8" ▶ 20まで設定できる
wide="no" ▶「yes」にすると幅100%になる
center="yes" ▶「no」にすると左に寄る
radius="auto" ▶ ボタンの大きさに応じて自動的に角丸
icon="icon:chevron-circle-right" ▶ テキストの前にアイコンを置く・・・はずだがうまく作動しない
icon_color="#70a1cc" ▶ アイコンの色を指定する
text_shadow="none" ▶ ここをいじることでテキストに影をつけることができる
desc="マイクロコピー" ▶ ボタンの下にマイクロコピーが入れられる
]
ボタンテキスト ▶ ボタンに表示されるテキスト
[/su_button]
YouTubeの埋め込み
[su_youtube_advanced url=”https://youtu.be/el3eRA8gzNw” width=”600″ height=”400″ responsive=”yes” controls=”yes” autohide=”alt” autoplay=”no” mute=”no” loop=”no” rel=”yes” fs=”yes” modestbranding=”yes” theme=”dark”
playsinline=”no”]
[ su_youtube_advanced url="https://youtu.be/el3eRA8gzNw" width="600" height="400" responsive="yes" controls="yes" autohide="alt" autoplay="no" mute="no" loop="no" rel="yes" fs="yes" modestbranding="yes" theme="dark"
playsinline="no"]
表
単純な表しか作れないっぽい。
[su_table responsive=”yes” alternate=”yes” fixed=”no”]
行1列1 | 行1列2 | 行1列3 |
行2列1 | 行2列2 | 行2列3 |
行3列1 | 行3列2 | 行3列3 |
[/su_table]
[ su_table responsive="yes" alternate="yes" fixed="no"]
<table>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
<td>行3列3</td>
</tr>
</table>
[/su_table]
見出し
[su_heading style=”default” size=”16″ align=”center” margin=”10″]見出しを使うとこうなるよ[/su_heading]
[ su_heading style="default" size="16" align="center" margin="10"]見出しを使うとこうなるよ[/su_heading]
タブ
材料と作り方は次のとおりです。
[su_tabs style=”default” active=”1″ vertical=”no” mobile=”stack”]
[su_tab title=”【 必要な道具 】” disabled=”no”]
- ボウル
- スパチュラ
- ビーター
[/su_tab]
[su_tab title=”【 材料 】” disabled=”no”]
- 卵(Mサイズ)2個
- 砂糖100g
- バター200g
[/su_tab]
[su_tab title=”【 作り方 】” disabled=”no”]
- 卵黄と卵白を分ける
- 卵白に砂糖を加える
- 卵白を泡立てる
[/su_tab]
[/su_tabs]
[ su_tabs style="default" active="1" vertical="no" mobile="stack"]
[ su_tab title="【 必要な道具 】" disabled="no"]
<ul>
<li>ボウル</li>
<li>スパチュラ</li>
<li>ビーター</li>
</ul>
[/su_tab]
[ su_tab title="【 材料 】" disabled="no"]
<ul>
<li>卵(Mサイズ)2個</li>
<li>砂糖100g</li>
<li>バター200g</li>
</ul>
[/su_tab]
[ su_tab title="【 作り方 】" disabled="no"]
<ol>
<li>卵黄と卵白を分ける</li>
<li>卵白に砂糖を加える</li>
<li>卵白を泡立てる</li>
</ol>
[/su_tab]
[/su_tabs]
スポイラー(コンテンツを隠す)
[su_spoiler title=”クリック/タップで開くよ” open=”no” style=”fancy” icon=”plus”]非表示にしたいコンテンツをここに記述。[/su_spoiler]
[ su_spoiler title="タイトル" open="no" style="default" icon="plus"]非表示にしたいコンテンツをここに記述。[/su_spoiler]
icon=”ここ” ← アイコンをほかのものにも変えられる。
- plus(デフォルト)
- plus-circle
- plus-square-1
- plus-square-2
- chevron
- chevron-circle
- folder-1
- folder-2
アコーディオン
スポイラーを連ねたものがアコーディオン。
[su_accordion]
[su_spoiler title=”スポイラーのタイトル” open=”no” style=”fancy” icon=”plus”]非表示のコンテンツ[/su_spoiler]
[su_spoiler title=”スポイラーのタイトル” open=”no” style=”fancy” icon=”plus”]非表示のコンテンツ[/su_spoiler]
[su_spoiler title=”スポイラーのタイトル” open=”no” style=”fancy” icon=”plus”]非表示のコンテンツ[/su_spoiler]
[/su_accordion]
[ su_accordion]
[su_spoiler title="スポイラーのタイトル" open="no" style="fancy" icon="plus"]非表示のコンテンツ[/su_spoiler]
[su_spoiler title="スポイラーのタイトル" open="no" style="fancy" icon="plus"]非表示のコンテンツ[/su_spoiler]
[su_spoiler title="スポイラーのタイトル" open="no" style="fancy" icon="plus"]非表示のコンテンツ[/su_spoiler]
[/su_accordion]
URLの貼り付け
URLとタイトルをコピー
[usort_title_url_copy button=” この記事のURLとタイトルをコピーする ” blogname=”y”]
[ usort_title_url_copy button=" この記事のURLとタイトルをコピーする " blogname="y"]
画像に文字を載せる

- カテゴリ名など
- ハロウィンカラーの可愛いチュチュ
これは「VK Block」に搭載されているふきだし

VKふきだし。横は20文字くらいまでがいいよね。
ツールチップ
[su_tooltip style=”bootstrap” position=”north” rounded=”yes” title=”” content=”そう、こんなふうにね”]ここ[/su_tooltip]にマウスカーソルを当てると説明が表示されます。
[ su_tooltip style="bootstrap" position="north" rounded="yes" title="" content="そう、こんなふうにね"]ここ[/su_tooltip]にマウスカーソルを当てると説明が表示されます。
[su_tooltip style=”yellow” position=”north” rounded=”yes” content=”そう、こんなふうにね”]ここ[/su_tooltip]にマウスカーソルを当てると説明が表示されます。
[ su_tooltip style="yellow" position="north" rounded="yes" content="そう、こんなふうにね"]ここ[/su_tooltip]にマウスカーソルを当てると説明が表示されます。
更新日を表示させる
この記事は[su_post field=”post_modified” post_type=”post”]に更新しました。
この記事は[ su_post field="post_modified" post_type="post"]に更新しました。
アニメーション(テキストに動きをつける)
「段落」ブロックにショートコードを書けば、▼こんなふうに[su_animate type=”bounce”]バウンド[/su_animate]
装飾もできる。 ※ただし「strong」タグは効かないもよう。<p>[ su_animate type="bounce"]<span style="color: #cf2e2e" class="artb-font-color">バウンド</span>[/su_animate]</p>
[su_animate type=”shake”]横ゆれ[/su_animate]
[ su_animate type="shake"]横ゆれ[/su_animate]
[su_animate type=”pulse”]鼓動のようなやつ[/su_animate]
[ su_animate type="pulse"]鼓動のようなやつ[/su_animate]
[su_animate type=”flipInX”]びょいーんと現れるやつ[/su_animate]
[ su_animate type="flipInX"]びょいーんと現れるやつ[/su_animate]
[su_animate type=”fadeInDown”]上から下りてくる[/su_animate]
[ su_animate type="fadeInDown"]上から下りてくる[/su_animate]
[su_animate type=”lightSpeedIn”]あわてて駆けつける感じ[/su_animate]
[ su_animate type="lightSpeedIn"]あわてて駆けつける感じ[/su_animate]
Google Map
[su_gmap width=”600″ height=”400″ responsive=”yes” address=”岡山駅” zoom=”0″]
[ su_gmap width="600" height="400" responsive="yes" address="岡山駅" zoom="0"]

おぉ! 施設の名前でも大丈夫なんだね!
住所や「plus code」でも埋め込みが可能ですよ。
※ただし「plus code」だと場所の表示が「MW89+C3 岡山市、岡山県」(岡山駅の場合)になるので注意。
[ su_gmap width="600" height="400" responsive="yes" address="岡山駅" zoom="0"]

[no_toc]