【スワロー】41種類のショートコードの使い方を知ってブログ作業を快適に！

こんな悩みを解決する記事を書きました。

 

ショートコードというのは、複雑なHTMLや埋め込みコードの心配をすることなく、コンテンツを簡単に作成、変更できるものです。

 

 

簡単に言うと、吹き出しや四角の囲いなどが簡単に作れるというものです。

 

この記事では、スワローのショートコードを内容別にまとめています。

 

 

この記事を読み終えると、スワローのショートコードで、キレイでシンプルなブログを簡単に作り上げることができます。

＼シンプルでオシャレな理由を丁寧に解説 ／

スワローのショートコードの使い方一覧

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

吹き出し機能は3つ用意されています。

吹き出しのオプションを説明しておきます。

オプション	説明
icon=””	アイコン画像を設定。””の間にURLを入力
name=””	アイコンの名前を設定。””の間に任意のテキストを入力
type=””	デザインタイプを選択。（複数設定可能。複数設定する場合は半角スペースをあけて入力していく）””の間に   アイコンを左 … l   アイコンを右 … r   アイコンを大きく … big   Facebook風… fb   LINE風… lineなどを入力

[voice icon="アイコンURL" name="名前" type="タイプ"]コメント[/voice]

上記の部分に自分で設定することで、いろいろな吹き出しを作ることができますよ。

ノーマル（左）

[voice icon="アイコンURL" name="あなた" type="l"]コメント[/voice]

ノーマル（右）

[voice icon="アイコンURL" name="あなた" type="r"]コメント[/voice]

LINE風（左）

[voice icon="アイコンURL" name="あなた" type="l line"]コメント[/voice]

LINE風（右）

[voice icon="アイコンURL" name="あなた" type="r line"]コメント[/voice]

Facebook風（左）

[voice icon="アイコンURL" name="あなた" type="l fb"]コメント[/voice]

Facebook風（右）

[voice icon="アイコンURL" name="あなた" type="r fb"]コメント[/voice]

アイコンを大きく

[voice icon="アイコンURL" name="あなた" type="r big"]コメント[/voice]

アイコン枠（赤色）

[voice icon="アイコンURL" name="あなた" type="l icon_red"]コメント[/voice]

アイコン枠（黄色）

[voice icon="アイコンURL" name="あなた" type="l icon_yellow"]コメント[/voice]

アイコン枠（青色）

[voice icon="アイコンURL" name="あなた" type="l icon_blue"]コメント[/voice]

アイコン枠（黒色）

[voice icon="アイコンURL" name="あなた" type="l icon_black"]コメント[/voice]

スワローのショートコード②：BOX

BOX（青色）

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

BOX（赤色）

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

BOX（黄色）

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

BOX（緑色）

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

BOX（ピンク色）

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

BOX（グレー色）

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

BOX（黒色）

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

BOX（タイトルなし）

[box class="box"]ここにコンテンツを記載[/box]

補足説明

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

注意書き

[aside type="warning"]
注意説明を追加することができます。 
[/aside]

アコーディングタイトル

[[open title="ここにタイトル"]目次のようにタイトルを閉じておけます。[/open]]

[open title=”ここにタイトル”]目次のようにタイトルを閉じておけます。[/open]

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

ボタンの種類は主に4つあります。

デフォルトボタン

[btn]デフォルトボタン[/btn]

デフォルトボタン（大）

[btn class="big"]デフォルトビッグボタン[/btn]

シンプルボタン

[btn class="simple"]シンプルボタン[/btn]

シンプルボタン（大）

[btn class="simple big"]シンプルビッグボタン[/btn]

立体的なボタン（黄色）

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

立体的なボタン（ピンク色）

[btn class="rich_pink"]立体的なボタン（ピンク色）[/btn]

立体的なボタン（オレンジ色）

[btn class="rich_orange"]立体的なボタン（オレンジ色）[/btn]

立体的なボタン（緑色）

[btn class="rich_green"]立体的なボタン（緑色）[/btn]

立体的なボタン（青色）

[btn class="rich_blue"]立体的なボタン（青色）[/btn]

角丸ボタン

[btn class="maru"]角丸ボタン[/btn]

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

カラム表示は、写真やテキストを横並びに表示できるようになります。

2カラム表示

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

3カラム表示

[colwrap]
[col3]デスクトップの時のみ3カラムになるよ[/col3]
[col3]ショートコードを使うと簡単だよ[/col3]
[col3]タブレット＆スマホでは1カラムだよ[/col3]
[/colwrap]

スワローのショートコード⑤：関連記事のリンク

関連記事のショートコードをまとめてみました。

記事のIDが必要になります。

[kanren postid="記事のID"]

通常表示（関連記事付き）

[kanren postid="1326"]

通常表示（関連記事なし）

[kanren2 postid="1326"]

投稿日非表示

[kanren postid="1326" date="none"]

ラベル非表示

[kanren postid="1326" label="none"]

別ウィンドウで開く

[kanren postid="1326" target="on"]

ラベルと投稿日を非表示

[kanren postid="1326" date="none" label="none"]

複数まとめて表示

[kanren postid="1326,1415,1524"]

スワローのショートコードの使い方をマスターしよう

スワローのショートコードを紹介しました。

 

ショートコードを利用すると、記事が見やすくなって、読者に与える印象が良くなります。

 

今回挙げたショートコードをコピー＆ペーストして、うまく使いこなして、読者の回遊率を上げましょう。

 

スワロー関連の記事はほかにもあるので、それを見て、シンプルでオシャレなブログにしていきましょう。