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

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

▼背景に画像+ボタン

▼付箋ボックス

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

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

  • ◆◆
  • ◆◆
  • ◆◆

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

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

行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”]

  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サイズ)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"]
「plus code」はココに表示されるよ

[no_toc]