ショートコードとはソースコード（HTMLコード）を呼び出すためのコードのことです。
吹き出しや枠でテキストを囲うなど出来るようになるよ！て理解でOKです。
スワロー(SWALLOW)の使い方を伝えるためにショートコードをまとめました。
全４７種類を内容別にまとめています。
少しでも参考になれば幸いです。
▽コスパ最強で超おすすめのテーマ
WordPressテーマ「スワロー」
＼当ブログで使用中「スワロー」／
＼コスパの良さを丁寧に解説中／
目次
スワローのショートコード
① 吹き出し編
スワローには３種類の吹き出しがあります。
- ノーマル
- 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"]
▽このように表示されます。
（投稿日非表示）
投稿日非表示コードは以下の通りです。
[kanren postid="記事のID" date="none"]
▽このように表示されます。
（ラベル非表示）
ラベル非表示コードは以下の通りです。
[kanren postid="記事のID" label="none"]
▽このように表示されます。
（別ウインドウで開く）
別ウインドウで開くコードは以下の通りです。
[kanren postid="記事のID" target="on"]
▽このように表示されます。
（組み合わせ）
例えば「ラベル」と「投稿日」を非表示にする場合のコードは以下の通りです。
[kanren postid="記事のID" date="none" label="none"]
▽このように表示される
（複数まとめて表示）
記事を複数表示させたい場合のコードは以下の通りです。
[kanren postid="記事のID,記事のID,記事のID"]
▽このように表示されます。
スワローのショートコード
③ 固定ページのリンク編
（通常表示）
通常表示させたい場合のコードは以下の通りです。
[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カラム〜３カラム表示が可能です。
２カラム表示
[colwrap] [col2]左の画像のURL デスクトップの時のみ2カラムになるよ[/col2] [col2]右の画像のURL タブレット＆スマホでは1カラムだよ[/col2] [/colwrap]
▽このように表示されます。
３カラム表示
[colwrap] [col3]左の画像のURL デスクトップの時のみ3カラムになるよ[/col3] [col3]中央の加増のURL ショートコードを使うと簡単だよ[/col3] [col3]右の画像のURL タブレット＆スマホでは1カラムだよ[/col3] [/colwrap]
▽このように表示されます。
デスクトップの時のみ3カラム
ショートコードを使うと簡単
タブレット＆スマホでは1カラム
スワローのショートコード
⑧ ボタン
スワローのボタンには３種類あります。
- デフォルトボタン
- シンプルボタン
- 立体ボタン
それでは順にご紹介します。
① デフォルトボタン
[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テーマ「スワロー」
＼当ブログで使用中「スワロー」／
＼コスパの良さを丁寧に解説中／
