【SANGO】ショートコードの使い方

ショートコードは、面倒なHTMLの記述を簡単な短いコード（シュートコード）で書けるようにしたものです。プラグインやテーマ独自で提供しているものがあります。自分で作ることもできますが、ここではテーマSANGOが提供しているショートコードの使い方を説明します。

見出し

見出しはショートコードではないですが、クラス名の適用によって見出しを装飾できるのでここで紹介します。

ここのタイトルは背景をSANGOのオリジナルカラーで塗りつぶしています。使い方は、エディターの見出しブロックで見出しを作り、そのあとHTMLの編集にして簡単なコードを追加をします。この表示のためのコードは次の通りです。

<h2 class="hh hh5 pastel-bc">見出し</h2>

上記はh2タグを使っていますが、pタグでも同じように装飾することができます。（下記参照：別のデザイン）

小見出し

この表示のためのコードは次の通り。

<p class="hh hh4 main-c main-bdr">小見出し</p>

上記の２種類を含めて３６種類の見出しデザインが紹介されています。全てのデザインが見たい場合はこちらをご覧ください。

2021年10月17日SANGOのショートコード（見出し一覧）

ボックス（デザイン系）

まずはボックスです。補足説明のように目的に合わせたボックスや、いろいろな用途で使えるボックスがあります。実際のデザインと、そのショートコードを合わせて紹介します。

補足説明（MEMO）

この表示のためのショートコードは次の通り。

[memo title="MEMO"]これはメモです[/memo]

注意書き（注意）

この表示のためのショートコードは次の通り。

[alert title="注意"]これは注意です[/alert]

ボックス

この表示のためのコードは次の通り。

[box class="box4"]<ul><li>その１<br>補足１</li>
<li>その２<br>補足２</li></ul>[/box]

この例は箇条書きをボックスの中に入れていますが、次の例のように広告（外部リンク）など、なんでもボックスで囲むことができます。

この表示のためのコードは次の通り。

[box class="box26" title="ひと休み　独自ドメインが欲しい方へ"]（省略）[/box]

箇条書き

箇条書きもボックスになりますが、番号などのデザインも変えられるものを箇条書きとしてまとめられています。

番号を白抜き丸数字にして、メインカラーの枠で囲んだものです。

この表示のためのコードは次の通り。

[list class="ol-circle li-mainbdr main-bc-before"]<ol><li>その１</li><li>その２</li></ol>[/list]

色をアクセントカラーにしたものです。

この表示のためのコードは次の通り。

[list class="ol-circle li-accentbdr acc-bc-before"]<ol><li>その１</li><li>その２</li></ol>[/list]

番号のデザインと背景色を変えたものです。

この表示のためのコードは次の通り。

[list class="li-niku li-mainbdr main-c-before"]<ul><li>その１</li><li>その２</li></ul>[/list]

ボックス（リンク系）

関連記事／サイトへのリンク

関連記事へのリンクです。

【おすすめのテーマ】（WordPress）それぞれの特徴比較

この表示のためのコードは次の通り。id は投稿IDです。idは、エディターで記事を編集するときのURLに、post=nnn で表示されているものです。

[kanren id="346"]

他サイトへのリンクです。

この表示のためのショートコードは次の通り。
サンプルのためリンク先は自サイトです。target=”_blank” を使うと新しいタブで開きます。

[sanko href="https://kireigo.site/" title="失礼のない英語の話し方" site="icSPEng アイシースピン" target="_blank"]

ボタン

他の場所へのリンクをボタンで行う場合のデザインです。

ストーリー

このボタンを表示するためのショートコードは次の通り。

プロフィール

このボタンを表示するためのショートコードは次の通り。

機能デザイン関連

ここでは、記事のデザイン性を向上させるものを紹介します。線や吹き出しなどです。

線

この表示のためのショートコードは次の通り。

[sen]

吹き出し

この表示のためのショートコードは次の通り。

[say name="玲奈" img="https://kireigo.site/wp-content/uploads/2021/04/icsarena1.jpg"]玲奈です[/say]

同じ吹き出しですが、右に顔があるものです。

この表示のためのショートコードは次の通り。

[say name="ジョー先生" img="https://kireigo.site/wp-content/uploads/2021/04/icsajoe1.jpg" from="right"]ジョーです[/say]

アコーディオン機能

更新履歴など必要な時だけ見てほしいものを折りたたんでおくときに使えます。

この表示のためのショートコードは次の通り。

[open title='更新履歴']2021/06/14 この記事を追加[/open]

横並び2列

横並びはエディターの機能（カラム）でできますが、１行の場合はこちらが手軽で便利です。

この表示のためのショートコードは次の通り。

[yoko2 responsive][cell]This is Yoh.[/cell][cell]こちらは洋さんです。[/cell][/yoko2]

その他

関連記事を出力

同一カテゴリー／タグの一覧、特定カテゴリーだけの新着記事の一覧ができます。新着順ではなく投稿順にすることもできます。

SANGOのショートコード（見出し一覧）

【SANGO】ショートコードの使い方

この表示のためのコードは次の通り。投稿IDが４（ノウハウ）で記事数２を指定しています。これは新着順ですが、下の例のように order=”ASC” を追加すると投稿順になります。

[catpost catid="4" num="2"]
[catpost catid="4" num="2" order="ASC"]

PC／モバイル／特定出力

PCのみで表示しモバイルでは表示しない、またはその逆、あるいは特定のカテゴリー／タグの記事でのみ表示させることができます。

例えば、このブログのストーリーとレッスンのみに「英語で会話をしたいならこちらのサイトがおすすめ！」と表示させることができます。ウイジェットに次のコードを記入します。カテゴリーIDが２と３（ストーリーとレッスン）のときに表示させる設定です。

[category id="2,3"]英語で会話をしたいならこちらのサイトがおすすめ！[/category]

ソースコードボックス

[catpost catid="3" num="2"]

この表示のためのショートコードは次の通り。

[codebox title="HTML"]<pre><code></code></pre>[/codebox]

エディターのコードブロックを使ってもソースコードを表示できますが、上記の２つを見比べると枠の表示が違います。「HTML」というタイトルも出せます。

その他

そのほかに、「タイムライン機能」、「画像上に文字をのせる」もの、「YouTube埋め込みをレスポンシブにする」もの、「レビューボックス」がありますが今回は省略します。

まとめ

ショートコードは、面倒なHTMLの記述が不要なのでとても便利です。テーマが提供しているショートコードだけでもデザイン性の高いブログが作れます。有効に使いましょう。
使いたいデザインがあれば、ショートコードをコピー＆ペーストしてプレビューすれば同じように表示されます。一度使ってみると、その使い方と便利さがより実感できます。

ここで紹介したものは主にこのサイトで利用しているもので、SANGOのショートコードの一部です。もっと詳しく知りたい方はこちらのSANGO公式サイトをご覧ください。