このサイトは、WordPressテーマ「スワロー」を使っています。
スワローショートコードまとめです。
ショートコードは、HTMLコードを呼び出す短縮コードです。
ブログカード
ブログカードとは、カードみたいなおしゃれなリンクです。
こんな感じの↓
クリックすると、関連記事「WordPressで、吹き出し」に飛びます。
関連記事付きブログカード作り方
このようなブログカードを作ります。
これをコピペ（コピー＆ペースト） ↓
[kanren postid="記事ID"]
関連記事 がブログカードに付きました。
post=数字 ←この数字が記事ID。
関連記事なしブログカード作り方
こちらは、関連記事なしのブログカードです。
これをコピペ ↓
[kanren2 postid="記事ID"]
関連記事 がブログカードから消えます。
ブログカード（関連記事付き）を連続で入れる
次に複数のブログカード（関連記事付き）を連続で入れます。
これをコピペ ↓
[kanren postid="記事ID,記事ID"]
このように、関連記事付きブログカードを２つ連続で出すことができます。
ブログカード（関連記事なし）を連続で入れる
同じように、
複数のブログカード（関連記事なし）を連続で入れます。
これをコピペ ↓
[kanren2 postid="記事ID,記事ID"]
このように、関連記事なしブログカードを２つ連続で出すことができます。
関連記事はいくつでも入れることができます。
記事ID,記事ID,記事ID,記事ID,記事ID,記事IDと半角コンマで記事IDを入れる。
別ウィンドウで開く
ブログカードをクリックすると、
別ウィンドウが開きます。（クリックしてみてください。）
これをコピペ↓
[kanren postid="記事のID" target="on"]
target="on" で別ウィンドウが開きます。
投稿日付を消す
[kanren postid="記事のID" target="on" date="none"]
date="none" を付けると投稿日付が消えます。
以下同じように、コピペ（コピー＆ペースト）で
ボタンやふきだし、画像を横に並べたり（レイアウト）、補足説明、注意、ＢＯＸ
などもできます。
ボタン
ボタン シンプルを作るには、↓
これをコピペ ↓（文字にＵＲＬリンクを入れてください。）
[btn class="simple"]<a href="リンク先">ボタン シンプル</a>[/btn]
上の例では、このように入れています。
[btn class="simple"]<a href="https://fromau.net/wp/">ボタン シンプル</a>[/btn]
↓
[btn class="simple"] ボタンシンプル [/btn]
以下同じように、
ボタン シンプル大 ↓
[btn class="big simple"]<a href="リンク先">ボタンシンプル大</a>[/btn]
[btn class="big simple"]ボタンシンプル大[/btn]
ボタンノーマル ↓
[btn]<a href="リンク先">ボタン ノーマル</a>[/btn]
[btn] ボタンノーマル [/btn]
ボタンビッグ ↓
[btn class="big"]<a href="リンク先">ボタン ビッグ</a>[/btn]
[btn class="big"] ボタン ビッグ [/btn]
ボタン lightning ↓
[btn class="lightning"]<a href="リンク先" target="_blank" rel="noopener noreferrer">lightning</a>[/btn]
[btn class="lightning"] lightning [/btn]
ボタン Big lightning ↓
[btn class="big lightning"]<a href="リンク先" target="_blank" rel="noopener noreferrer">Big lightning</a>[/btn]
[btn class="big lightning"] Big lightning [/btn]
ビッグリッチイエロー ↓
[btn class="big rich_yellow"]<a href="リンク先">ビッグリッチ イエロー</a>[/btn]
[btn class="big rich_yellow"] ビッグリッチイエロー [/btn]
リッチイエロー ↓
[btn class="rich_yellow"]<a href="リンク先" target="_blank" rel="noopener noreferrer">リッチ イエロー</a>[/btn]
[btn class="rich_yellow"] リッチイエロー [/btn]
ビッグリッチピンク ↓
[btn class="big rich_pink"]<a href="リンク先">ビッグリッチピンク</a>[/btn]
[btn class="big rich_pink"] ビッグリッチピンク [/btn]
リッチピンク ↓
[btn class="rich_pink"]<a href="リンク先" target="_blank" rel="noopener noreferrer">リッチピンク</a>[/btn]
[btn class="rich_pink"] リッチピンク [/btn]
背景黄・赤ボタン（マウスポインターをのせると色が変わります） ↓
[btn class="lightning big bg-yellow maru"]<a href="リンク先" target="_blank" rel="noopener noreferrer">（テキストリンク）</a>[/btn]
これをコピペ ↑（リンク先にＵＲＬリンクを入れてください。）
[btn class="lightning big bg-yellow maru"] [/btn]
背景黄・青ボタン（マウスポインターをのせると色が変わります）
[btn class="big bg-yellow maru"]<a href="リンク先" target="_blank" rel="noopener noreferrer">（テキストリンク）2</a>[/btn]
[btn class="big bg-yellow maru"] [/btn]
[btn class="big simple bg-yellow maru"]<a href="リンク先" target="_blank" rel="noopener noreferrer">（テキストリンク）3</a>[/btn]
[btn class="big simple bg-yellow maru"] [/btn]
[btn class="lightning big bg maru"]<a href="リンク先" target="_blank" rel="noopener noreferrer">（テキストリンク）4</a>[/btn]
[btn class="lightning big bg maru"] [/btn]
[btn class="big bg maru"]<a href="リンク先" target="_blank" rel="noopener noreferrer">（テキストリンク）6</a>[/btn]
[btn class="big bg maru"] [/btn]
[btn class="big simple bg maru"]<a href="リンク先" target="_blank" rel="noopener noreferrer">（テキストリンク）7</a>[/btn]
[btn class="big simple bg maru"] [/btn]
吹き出し
[voice icon="アイコンURL" name="名前" type="l"][/voice]
アイコンURLに画像を入れていない状態です。
※）ここでは、URLリンクを入れて画像なしの状態にしています。
[voice icon="アイコンURL" name="名前１" type="l"]吹き出し[/voice]
人物を左右に移動させる
type=" " に 「r」（右）「 l」（左）を入れます。
type="r" アイコン右
type="l" アイコン左
[voice icon="アイコンURL" name="名前2" type="l"]吹き出し[/voice]
[voice icon="アイコンURL" name="名前2" type="r"]吹き出し[/voice]
ふきだしの色を変える
[voice icon="アイコンURL" name="名前3" type="l fb"]吹き出しFacebook風[/voice]
[voice icon="アイコンURL" name="名前4" type="l line"]吹き出しLine風[/voice]
type=" " に、「fb」「line」などを半角スペースで入れ、複数設定することができます。
type="fb" Facebook 風の吹き出し
type="line" LINE 風の吹き出し
アイコン枠の色を変える
[voice icon="" name="名前5" type="l icon_black"][/voice]
[voice icon="" name="名前6" type="l icon_blue"][/voice]
[voice icon="" name="名前7" type="l icon_yellow"][/voice]
[voice icon="" name="名前8" type="l icon_red"][/voice]
アイコン枠黒でふきだしFace Book風 Line風
[voice icon="" name="名前9" type="l fb icon_black"][/voice]
[voice icon="" name="名前10" type="l line icon_black"][/voice]
アイコン枠の色を設定すると、ふきだしの幅が狭くなるようです。
ふきだしの出し方はコチラもあります。
レイアウト２カラム（モバイル１カラム）
これをコピペ ↓ ※ここに内容を①のあとに画像ＵＲＬ（もしくは、そのまま画像を張り付ける）を入れる。
[colwrap] [col2]ここに内容を①[/col2] [col2]ここに内容を②[/col2] [/colwrap]
↓
レイアウト3カラム（モバイル１カラム）
これをコピペ ↓ ※ここに内容を①のあとに画像ＵＲＬ（もしくはそのまま画像を張り付ける）を入れる。
[colwrap] [col3]ここに内容を①[/col3] [col3]内容を②[/col3] [col3]内容を③[/col3] [/colwrap]
↓
画像サイズは、同じ大きさに自動で調節してくれます。
補足説明/注意説明
これをコピペ ↓
[aside type="normal"]補足説明[/aside]これをコピペ ↓
[aside type="warning"]注意説明[/aside]BOX（ボックス）
スワローショートコード ボックスです。
[box class="red_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]
[box class="blue_box"]ボックス ブルー [/box]
[aside type="boader"] シンプルな枠[/aside]
[box class="blue_box" title="ここにタイトル"]ブルー[/box]
[box class="red_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]
あわせて読みたい
