Ver 1.3.1 Released!

SANGOのショートコードでできること

心地の良いデザイン

この記事はSANGOカスタマイズガイドの「SANGOのショートコード一覧」を転載したものです。

このページではSANGOで使用することのできる「ショートコード」を一覧で紹介していきます。

NEWレビュー用ボックス

ver1.2のアップデートで以下のようなレビュー用ボックスをショートコードで簡単挿入できるようにしました。

この本の評価
読みやすさ
(3.5)
面白さ
(4.0)
デザインの美しさ
(5.0)
値段
(5.0)
コレクション性
(5.0)
総合評価
(4.5)

1. 関連記事を出力する(横長)

SANGOの魅力
WordPressテーマ「SANGO」24の魅力
[kanren id="投稿ID"]

ブログ内の記事へのリンクを貼るときにのみ使用できます。id=の中には投稿IDを入力します(投稿IDは、投稿編集ページのURLを見れば確認できます。post=◯◯の数字が投稿IDとなります。)

応用編

id="15,28"のように半角カンマ区切りで投稿IDを指定することで、複数の関連記事をまとめて貼ることができます。

2. カードタイプの関連記事を出力

SANGOの魅力
WordPressテーマ「SANGO」24の魅力
[card id="投稿ID"]

こちらもブログ内の記事へリンクを貼りたいときに使用します。半角カンマ(,)区切りで複数の投稿IDを指定できます。

3. 他サイトへのリンクを出力

参考

力尽きたときの簡単レシピサルワカ

[sanko href="リンク先のURL" title="記事のタイトル" site="サイト名"]

他サイトへのリンクを貼りたいときはこちらを使用します。

オプション

リンク先を別のタブで開くようにしたい場合は[sanko~略~ target="_blank"]というようにtarget="_blank"をショートコード内に追加します。

4. 線を引く


[sen]

記事の途中などで横に線を引いて区切りたいときにはこちらを使います。

5. 点線を引く


[tensen]

さきほどの点線バージョンです。

6. 補足説明

MEMO
ここに文章
[memo title="MEMO"]ここに文章[/memo]

補足したい文章をショートコードで挟んで使用します。このショートコード内でさらに別のショートコードを使用することもできます。title=内の「MEMO」という部分は自由に書き換えることができます。

7. 注意書き

注意
ここに文章
[alert title="注意"]ここに文章[/alert]

注意書きをショートコードではさんで使用します。タイトル部分は自由に書き換えることができます。

8. ソースコードボックス

HTML
<div>TEST</div>
[codebox title="HTML"]<pre><code>ソースコード</code></pre>[/codebox]

こちらはあまり使用する方は多くないかもしれませんが…。ソースコードをユーザーのために表示するボックスです。<pre><code>タグと合わせて使用します。title=""に記載した文字列がボックス上のタブとして表示されます(空欄だとタブは表示されません)。HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。

9. 吹き出し(左に顔)

サルワカくん

ここに吹き出しの中に入れる文を書きます。
[say name="サルワカくん" img="画像のURL"]ここに文章[/say]

名前(name="~")は省略可能です。いちいち画像のURLを貼るのは面倒だと思うので、画像のURLまで含めたショートコードをプラグイン「AddQuicktag」に登録しておくか、メモ帳などに控えておくと良いでしょう。

10. 吹き出し(右に顔)

ここに吹き出しの中に入れる文を書きます。

サルワカくん

[say name="サルワカくん" img="画像のURL" from="right"]ここに文章[/say]

from="right"という文字列を加えると、右側から吹き出しが伸びるようになります。

11. 横並び2列

[yoko2 responsive]
[cell]1列目:画像・文章などをここに[/cell]
[cell]2列目:画像・文章などをここに[/cell]
[/yoko2]

画像や文章、ボックスなどなどを横並び2列で表示できるボックスです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。

オプション
responsiveというショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横2列で並んで表示されるようになります。

12. 横並び3列

2列目だけ文章にしてみました

[yoko3 responsive]
[cell]1列目:画像・文章などをここに[/cell]
[cell]2列目:画像・文章などをここに[/cell]
[cell]3列目:画像・文章などをここに[/cell]
[/yoko3]

さきほどの横並び3列バージョンです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。responsiveというショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横3列で並んで表示されます。

13. YouTubeをレスポンシブで埋め込み

[youtube]
YouTubeのURL
[/youtube]

WordPressで記事にYouTubeを埋め込む場合、スマホで見た際に動画の左右が若干切り取られて表示されてしまいます。このショートコードで埋め込みコードやURLを挟むことで、それを防ぐことができます

14. モバイルでのみ表示

[mobile]
ここにモバイルでのみ表示させるもの
[/mobile]

こちらのショートコードではさんだものは、PCでは表示されず、モバイル(スマホ/タブレット)でのみ表示されるようになります。

15. PCでのみ表示

[pc]
ここにPCでのみ表示させるもの
[/pc]

こちらのショートコードではさんだものはモバイルでは表示されず、PCでのみ表示されます。

16. 画像上に文字をのせる

GOOD INNOVATION

[texton img="画像のURL" title="画像上にのせる文字"]

こちらのショートコードで「画像のURL」と「テキスト」を指定すると、画像上の中央に簡単に文字を配置することができます。

17. 指定したカテゴリーIDの記事を好きな数だけ出力

心地の良いデザイン
SANGOのショートコードでできること
SANGOの魅力
WordPressテーマ「SANGO」24の魅力
SANGOで約30種類のボックスを挿入しよう
[catpost catid="カテゴリーID" num="出力する記事数"]

「カテゴリーID」と「出力する記事数(例:num="6")」を指定するだけで、そのカテゴリーの記事へのリンクカードが指定数分だけ出力されます。初期設定だと公開日が近い記事順に表示されます。

参考:カテゴリーIDの調べ方

オプション

[catpost~略~ type="card"]とショートコード内に加えるとリンクカードのデザインが縦長の影付きのものになります。

記事下のコメント欄の表示サンプル

また、[catpost~略~ orderby="rand"]と加えると、指定したカテゴリーの中から記事がランダムに出力されるようになります(初期設定だと日付順)。

18. ボタン

ショートコードの種類が多数あるため、別記事にまとめました。

40種類以上のボタンを用意

19. 箇条書き

同じく多数の種類があるため、別記事にまとめました。

SANGOの箇条書き(20種類以上)と引用のデザイン

20. ボックス

同じく多数の種類があるため、別記事にまとめました。

SANGOで約30種類のボックスを挿入しよう

その他見出しなど

文字の装飾や、SANGOオリジナル見出しの挿入はショートコードではなく、ビジュアルエディタのスタイル設定から行うことができます。詳しくはこちらの記事をどうぞ。

SANGOでテキストを強調する:装飾機能でできることを紹介
記事を華やかに!約40種類の見出しデザイン