◆◆【保存版】編集用ショートコードとひながた一覧◆◆

これから取り組むカスタマイズ

▼背景に画像＋ボタン

【SANGOカスタマイズしてみた】応用編：画像に背景をプラスする

▼付箋ボックス

この記事を読めばわかること

この記事を読めばわかること

  • ◆◆
  • ◆◆
  • ◆◆

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 って ｗ”]
一覧からアイコンを選ぶ
[/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″]

  • １つ目の項目
  • ２つ目の項目
  • ３つ目の項目

[/su_list]

[　su_list icon="icon: leaf" icon_color="#bcdb99" indent="15"]
  <ul>
    <li>１つ目の項目</li>
    <li>２つ目の項目</li>
    <li>３つ目の項目</li>
  </ul>
[/su_list]

チェックマークのリスト

[su_list icon=”icon: check-circle-o” icon_color=”#5b94c5″ indent=”15″]

  • １つ目の項目
  • ２つ目の項目
  • ３つ目の項目

[/su_list]

[　su_list icon="icon: check-circle-o" icon_color="#5b94c5" indent="15"]
  <ul>
    <li>１つ目の項目</li>
    <li>２つ目の項目</li>
    <li>３つ目の項目</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″]

  1. 天候を気にせずに洗濯できる
  2. 花粉・大気汚染も気にせずに済む
  3. 高温でダニも死滅する

[/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″]

  1. 電気代がかかる
  2. スペースを取る
  3. うるさい

[/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”]

行１列１ 行１列２ 行１列３
行２列１ 行２列２ 行２列３
行３列１ 行３列２ 行３列３

[/su_table]

[ su_table responsive="yes"  alternate="yes"  fixed="no"]
  <table>
    <tr>
      <td>行１列１</td>
      <td>行１列２</td>
      <td>行１列３</td>
    </tr>
    <tr>
      <td>行２列１</td>
      <td>行２列２</td>
      <td>行２列３</td>
    </tr>
    <tr>
      <td>行３列１</td>
      <td>行３列２</td>
      <td>行３列３</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サイズ）２個
  • 砂糖100g
  • バター200g

[/su_tab]
[su_tab title=”【 作り方 】” disabled=”no”]

  1. 卵黄と卵白を分ける
  2. 卵白に砂糖を加える
  3. 卵白を泡立てる

[/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サイズ）２個</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」に搭載されているふきだし

ＶＫふきだし。横は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"]
「plus code」はココに表示されるよ

[no_toc]