スワロー(SWALLOW)の使い方|ショートコード 【全47種類】

スワロー


あなた
スワローのショートコードを教えて!

 

ショートコードとはソースコード(HTMLコード)を呼び出すためのコードのことです。

 

あなた
は、はい?汗

 

吹き出しや枠でテキストを囲うなど出来るようになるよ!て理解でOKです。

 

スワロー(SWALLOW)の使い方を伝えるためにショートコードをまとめました。

 

全47種類を内容別にまとめています。

 

少しでも参考になれば幸いです。

 

▽コスパ最強で超おすすめのテーマ
WordPressテーマ「スワロー」

\当ブログで使用中「スワロー」/

 

\コスパの良さを丁寧に解説中/

 

こっそり
当ブログは「スワロー」の使用で初月にドメインパワーが5.6になった実績あり

スワローのショートコード
① 吹き出し編

 

スワローには3種類の吹き出しがあります。

  • ノーマル
  • Facebook風
  • LINE風

 

また、吹き出しのアイコンのサイズやカラーも変更することが可能です。

 

ノーマル(アイコン左)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l"]テキスト[/voice]
あなた
テキスト

 

ノーマル(アイコン右)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="r"]テキスト[/voice]
あなた
テキスト

 

Facebook風(アイコン左)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l fb"]テキスト[/voice]
あなた
テキスト

 

Facebook風(アイコン右)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="r fb"]テキスト[/voice]
あなた
テキスト

 

LINE風(アイコン左)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l line"]テキスト[/voice]
あなた
テキスト

 

LNE風(アイコン右)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="r line"]テキスト[/voice]
あなた
テキスト

 

アイコンを大きく

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l big"]テキスト[/voice]
あなた
テキスト

 

アイコン枠(赤色)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l icon_red"]テキスト[/voice]
あなた
テキスト

 

アイコン枠(青色)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l icon_blue"]テキスト[/voice]
あなた
テキスト

 

アイコン枠(黄色)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l icon_yellow"]テキスト[/voice]
あなた
テキスト

 

アイコン枠(グレー)

[voice icon="アイコンのURL" alt="virginia-icon1000" name="あなた" type="l icon_black"]テキスト[/voice]
あなた
テキスト

 

スワローのショートコード
② 記事のリンク編

 

以下のリンクのような「関連記事」のショートコードをまとました。

 

内容は以下の通りです。

 

  • 通常表示
  • 投稿日非表示
  • ラベル非表示
  • 別ウインドウで開く
  • 組み合わせ
  • 複数まとめて表示

 

記事のID編集画面のURLから確認することができます。

記事のID

 

「2737」が記事のIDになります。

 

リンクで表示させたい記事のIDを確認しておきましょう。

 

(通常表示)

通常のコードで以下の通りです。

[kanren postid="記事のID"]

 

▽このように表示されます。

【初心者必須】審査なしで登録できるASP【厳選3選】

2020年4月2日

 

(投稿日非表示)

投稿日非表示コードは以下の通りです。

[kanren postid="記事のID" date="none"]

 

▽このように表示されます。

【初心者必須】審査なしで登録できるASP【厳選3選】

 

(ラベル非表示)

ラベル非表示コードは以下の通りです。

[kanren postid="記事のID" label="none"]

 

▽このように表示されます。

【初心者必須】審査なしで登録できるASP【厳選3選】

2020年4月2日

 

(別ウインドウで開く)

別ウインドウで開くコードは以下の通りです。

[kanren postid="記事のID" target="on"]

 

▽このように表示されます。

【初心者必須】審査なしで登録できるASP【厳選3選】

2020年4月2日

 

(組み合わせ)

例えば「ラベル」と「投稿日」を非表示にする場合のコードは以下の通りです。

[kanren postid="記事のID" date="none" label="none"]

 

▽このように表示される

【初心者必須】審査なしで登録できるASP【厳選3選】

 

(複数まとめて表示)

記事を複数表示させたい場合のコードは以下の通りです。

[kanren postid="記事のID,記事のID,記事のID"]

 

▽このように表示されます。

【初心者必須】審査なしで登録できるASP【厳選3選】

2020年4月2日

strongタグがペナルティ!?使い過ぎはSEOに悪影響?

2020年3月19日

ワードプレスのSEO対策|初心者がやるべきこと10選

2020年3月15日

 

スワローのショートコード
③ 固定ページのリンク編

 

(通常表示)

通常表示させたい場合のコードは以下の通りです。

[kanren pageid="記事のID"]

 

▽このように表示されます。

ランディングページ

 

(ラベル非表示)

ラベルを非表示させたい場合のコードは以下の通りです。

[kanren pageid="記事のID" label="none"]

 

▽このように表示されます。

ランディングページ

 

スワローのショートコード
④ ボックス編(ラベル付き)

 

赤色

[box class="red_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

青色

[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

黄色

[box class="yellow_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

緑色

[box class="green_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

ピンク

[box class="pink_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

グレー

[box class="glay_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

黒色

[box class="black_box" title="ここにタイトル"]ここにコンテンツを記載[/box]
ここにタイトル
ここにコンテンツを記載

 

スワローのショートコード
⑤ ボックス編(ラベルなし)

 

赤色

[box class="red_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

青色

[box class="blue_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

黄色

[box class="yellow_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

緑色

[box class="green_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

ピンク

[box class="pink_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

グレー

[box class="glay_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

黒色

[box class="black_box"]

ここにテキストやコンテンツ

[/box]

ここにテキストやコンテンツ

 

スワローのショートコード
⑥ ボックス編(特殊系)

 

以下の特殊なボックスのショートコードを解説します。

  • シンプル
  • 補足説明
  • 注意説明

それでは順に解説します。

 

シンプル

[aside type="boader"] 
シンプルな枠で囲みます。
シンプルなので応用の効きやすい枠です。
[/aside]
シンプルな枠で囲みます。
シンプルなので応用の効きやすい枠です。

 

補足説明

[aside] 
補足説明をいれる
 補足説明を追加することができます。 
[/aside]
補足説明をいれる
補足説明を追加することができます。

 

注意説明

[aside type="warning"]
注意説明をいれる
 目立つ感じで注意説明を追加することができます。 
[/aside]
注意説明をいれる
目立つ感じで注意説明を追加することができます。

 

スワローのショートコード
⑦ カラム表示

 

カラムとは、ブログレイアウトの縦列の数のことです。

 

HTMLやCSSがわからなくても2カラム〜3カラム表示が可能です。

 

2カラム表示

[colwrap]
[col2]左の画像のURL
デスクトップの時のみ2カラムになるよ[/col2]
[col2]右の画像のURL
タブレット&スマホでは1カラムだよ[/col2]
[/colwrap]

▽このように表示されます。


デスクトップの時のみ2カラム

タブレット&スマホでは1カラム

 

3カラム表示

[colwrap]
[col3]左の画像のURL
デスクトップの時のみ3カラムになるよ[/col3]
[col3]中央の加増のURL
ショートコードを使うと簡単だよ[/col3]
[col3]右の画像のURL
タブレット&スマホでは1カラムだよ[/col3]
[/colwrap]

▽このように表示されます。


デスクトップの時のみ3カラム

ショートコードを使うと簡単

タブレット&スマホでは1カラム

 

スワローのショートコード
⑧ ボタン

 

スワローのボタンには3種類あります。

  1. デフォルトボタン
  2. シンプルボタン
  3. 立体ボタン

 

それでは順にご紹介します。

 

① デフォルトボタン

[btn]デフォルトボタン(リンクテキストにする)[/btn]

デフォルトボタン(リンクテキストにする)

 

[btn class="big"]デフォルトビッグボタン(リンクテキストにする)[/btn]

デフォルトビッグボタン(リンクテキストにする)

 

② シンプルボタン

[btn class="simple"]シンプルボタン(リンクテキストにする)[/btn]

シンプルボタン(リンクテキストにする)

 

[btn class="simple big"]シンプルビッグボタン(リンクテキストにする)[/btn]

シンプルビッグボタン(リンクテキストにする)

 

③ 立体ボタン

[btn class="rich_yellow"]立体的なボタン(黄色)[/btn]

 

[btn class="rich_yellow"]立体的なボタン(黄色)[/btn]

 

[btn class="rich_yellow"]立体的なボタン(黄色)[/btn]

 

[btn class="rich_yellow"]立体的なボタン(黄色)[/btn]

 

[btn class="rich_yellow"]立体的なボタン(黄色)[/btn]

 

スワローの使い方
ショートコード解説のおわりに

 

お疲れ様でした。

 

スワローの使い方としてショートコードをご紹介いたしました。

 

ショートコードを使用すると記事のクオリティも高くなって読者の回遊率も高まります。

 

ぜひ適度に使用して見ましょう!

 

この他にもスワローに関する記事を多数ご用意しています。

 

\ スワローユーザー必見 /

 

▽コスパ最強で超おすすめのテーマ
WordPressテーマ「スワロー」

\当ブログで使用中「スワロー」/

 

\コスパの良さを丁寧に解説中/

 

こっそり
当ブログは「スワロー」の使用で初月にドメインパワーが5.6になった実績あり