【コピペで簡単】スワローショートコード(53種類)Swallow





このサイトは、WordPressテーマ「スワロー」を使っています。

→ WordPressテーマ「スワロー」



スワローショートコードまとめです。

ショートコードは、HTMLコードを呼び出す短縮コードです。





PVアクセスランキング にほんブログ村

ブログカード

ブログカードとは、カードみたいなおしゃれなリンクです。

こんな感じの↓

WordPressで吹き出し【Speech Bubble】



クリックすると、関連記事「WordPressで、吹き出し」に飛びます。


関連記事付きブログカード作り方

WordPressで吹き出し【Speech Bubble】

このようなブログカードを作ります。

これをコピペ(コピー&ペースト) ↓ 

[kanren postid="記事ID"]



関連記事 がブログカードに付きました。

記事IDは、投稿の編集画面を開いて、ブラウザのアドレスバーに表示される
post=数字 ←この数字が記事ID

関連記事なしブログカード作り方

WordPressで吹き出し【Speech Bubble】

こちらは、関連記事なしのブログカードです。


これをコピペ ↓ 

[kanren2 postid="記事ID"]



関連記事 がブログカードから消えます。

ブログカード(関連記事付き)を連続で入れる

次に複数のブログカード(関連記事付き)を連続で入れます。
これをコピペ ↓ 

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

【コピペで簡単】スワローショートコード(53種類)Swallow

WordPressで吹き出し【Speech Bubble】

このように、関連記事付きブログカードを2つ連続で出すことができます。

ブログカード(関連記事なし)を連続で入れる

同じように、

複数のブログカード(関連記事なし)を連続で入れます。

これをコピペ ↓ 

[kanren2 postid="記事ID,記事ID"]

【コピペで簡単】スワローショートコード(53種類)Swallow

WordPressで吹き出し【Speech Bubble】

このように、関連記事なしブログカードを2つ連続で出すことができます。
関連記事はいくつでも入れることができます

記事ID,記事ID,記事ID,記事ID,記事ID,記事IDと半角コンマで記事IDを入れる。

別ウィンドウで開く

ブログカードをクリックすると、
別ウィンドウが開きます。(クリックしてみてください。)

WordPressで吹き出し【Speech Bubble】

これをコピペ↓

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

target="on" で別ウィンドウが開きます。

投稿日付を消す

WordPressで吹き出し【Speech Bubble】

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

date="none" を付けると投稿日付が消えます。

以下同じように、コピペ(コピー&ペースト)で
ボタンやふきだし、画像を横に並べたり(レイアウト)、補足説明、注意、BOX
などもできます。

ボタン

ボタン シンプルを作るには、↓

これをコピペ ↓(文字にURLリンクを入れてください。)

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

これをコピペ ↑(リンク先にURLリンクを入れてください。)

[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リンクを入れて画像なしの状態にしています。

名前1
吹き出し

[voice icon="アイコンURL" name="名前1" type="l"]吹き出し[/voice]

人物を左右に移動させる

type=" " に 「r」(右)「 l」(左)を入れます。

type="r" アイコン右
type="l" アイコン左

名前2
吹き出し

[voice icon="アイコンURL" name="名前2" type="l"]吹き出し[/voice]

名前2
吹き出し

[voice icon="アイコンURL" name="名前2" type="r"]吹き出し[/voice]

ふきだしの色を変える

名前3
吹き出しFacebook風

[voice icon="アイコンURL" name="名前3" type="l fb"]吹き出しFacebook風[/voice]

名前4
吹き出しLine風

[voice icon="アイコンURL" name="名前4" type="l line"]吹き出しLine風[/voice]


type=" " に、「fb」「line」などを半角スペースで入れ、複数設定することができます。

type="fb" Facebook 風の吹き出し
type="line" LINE 風の吹き出し

アイコン枠の色を変える

名前5

[voice icon="" name="名前5" type="l icon_black"][/voice]

名前6

[voice icon="" name="名前6" type="l icon_blue"][/voice]

名前7

[voice icon="" name="名前7" type="l icon_yellow"][/voice]

名前8

[voice icon="" name="名前8" type="l icon_red"][/voice]

FFR
色だけでもかわいい。

アイコン枠黒でふきだしFace Book風 Line風

名前9

[voice icon="" name="名前9" type="l fb icon_black"][/voice]

名前10

[voice icon="" name="名前10" type="l line icon_black"][/voice]

アイコン枠の色を設定すると、ふきだしの幅が狭くなるようです。



ふきだしの出し方はコチラもあります。

WordPressで吹き出し【Speech Bubble】

レイアウト2カラム(モバイル1カラム)

これをコピペ ↓ ※ここに内容を①のあとに画像URL(もしくは、そのまま画像を張り付ける)を入れる。

[colwrap] [col2]ここに内容を①[/col2] [col2]ここに内容を②[/col2] [/colwrap]

ここに内容を①
ここに内容を②

レイアウト3カラム(モバイル1カラム)

これをコピペ ↓ ※ここに内容を①のあとに画像URL(もしくはそのまま画像を張り付ける)を入れる。

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

ここにタイトル
ブラック

[box class="box" title="ここにタイトル"]白にすることもできます。[/box]
ここにタイトル
白にすることもできます。


あわせて読みたい

 

ワードプレスにコピペで簡単バッジ(CSS不要)関連・参考・あわせて読みたい・出典・おすすめ

スワローで下線・太字・マーカーの【AddQuicktag】設定タグ

ワードプレスのコピペで簡単!【表の作成・HTMLタグ】

【スワロー】コピペでアイコンFont Awesome

スワローで下線・太字・マーカーの【AddQuicktag】設定タグ