概要
WordPressテーマ「SANGO」は、その高いデザイン性と機能性から多くのブロガーやWebサイト制作者に支持されています。SANGOの魅力の一つは、HTMLやCSSの知識がなくても、直感的にリッチな表現を可能にする「ショートコード」の豊富さにあります。ショートコードは、WordPressの投稿や固定ページ内で特定のコードを入力することで、あらかじめ定義されたデザインや機能を持つコンテンツを簡単に挿入できる仕組みです。
この記事では、SANGOテーマで利用できる主要なショートコードを網羅的に解説し、それぞれの使い方や応用例を詳細に説明します。初心者の方でも安心してSANGOのショートコードを活用し、より魅力的で機能的なWebサイトを構築できるようになることを目指します。
詳細解説
SANGOのショートコードは、その機能や表示形式によっていくつかのカテゴリに分類できます。ここでは、特に頻繁に使用される代表的なショートコードについて、具体的な使い方と共に詳しく見ていきましょう。
1. ボックス系ショートコード
情報を整理し、視覚的に強調するために役立つボックス系のショートコードは、SANGOの基本とも言える機能です。
1.1. box
最も基本的なボックスです。背景色や枠線で囲まれたエリアを作成します。
* **使い方:**
[box title=”ここにタイトル”]ここにボックス内のコンテンツを記述します。[/box]
* **属性:**
* `title`: ボックスのタイトルを指定します。省略可能です。
* `icon`: ボックスの左側に表示するアイコンを指定します（例: `info`, `heart` など）。SANGOが提供するアイコン名を使用します。
* `background`: ボックスの背景色を指定します（例: `blue`, `#f0f0f0` など）。
* `border_color`: ボックスの枠線の色を指定します。
* `border_width`: ボックスの枠線の太さを指定します（例: `2px`）。
* `padding`: ボックスの内側の余白を指定します（例: `20px`）。
* **応用例:** 注意喚起、補足情報、引用などを分かりやすく表示するのに最適です。
1.2. styled_box
boxショートコードに、より洗練されたデザインを適用したものです。
* **使い方:**
[styled_box background=”#e0f7fa” border_color=”#00bcd4″ icon=”info”]
これはスタイリッシュなボックスです。
[/styled_box]
* **属性:** `box`ショートコードと同様の属性に加え、デザインテーマに沿ったプリセットカラーなども利用できます。
2. リスト系ショートコード
箇条書きをより見やすく、魅力的に表示するためのショートコードです。
2.1. styled_list
標準のul/olタグよりもデザイン性の高いリストを作成します。
* **使い方:**
[styled_list icon=”check”]
* リスト項目1
* リスト項目2
[/styled_list]
* **属性:**
* `icon`: リストの各項目に表示するアイコンを指定します。
* `color`: アイコンの色を指定します。
* **応用例:** 手順説明、メリット・デメリットの列挙などに効果的です。
3. ボタン系ショートコード
クリック可能なボタンを簡単に作成できます。
3.1. button
CTA（Call to Action）ボタンとして、ユーザーの行動を促すために不可欠なショートコードです。
* **使い方:**
[button url=”https://example.com” color=”primary” icon=”arrow-right”]詳細はこちら[/button]
* **属性:**
* `url`: ボタンのリンク先URLを指定します。
* `color`: ボタンの色を指定します（例: `primary`, `secondary`, `red`, `blue` など）。SANGOのカラースキームに準拠します。
* `size`: ボタンのサイズを指定します（例: `small`, `medium`, `large`）。
* `icon`: ボタンの左側に表示するアイコンを指定します。
* `target`: リンクの開き方を指定します（例: `_blank` で新しいタブで開く）。
* **応用例:** 商品購入ページへの誘導、資料請求フォームへのリンクなどに利用します。
4. タブ系ショートコード
関連するコンテンツをタブ形式で切り替えて表示させ、ページをスッキリさせることができます。
4.1. tabs
タブのコンテナを作成します。
* **使い方:**
[tabs]
[tab title=”タブ1″]タブ1の内容[/tab]
[tab title=”タブ2″]タブ2の内容[/tab]
[tab title=”タブ3″]タブ3の内容[/tab]
[/tabs]
* **属性:** `tabs`自体には特に属性はありません。
* **内部タグ:** `tab`タグを使用します。
* `title`: 各タブのタイトルを指定します。
* **応用例:** 複数のサービス紹介、FAQ、製品仕様などをまとめて表示するのに便利です。
5. アコーディオン系ショートコード
クリックすることでコンテンツの表示/非表示を切り替えられるアコーディオンを作成します。FAQセクションなどでよく利用されます。
5.1. accordion
アコーディオンのコンテナを作成します。
* **使い方:**
[accordion]
[accordion_item title=”質問1″]回答1[/accordion_item]
[accordion_item title=”質問2″]回答2[/accordion_item]
[/accordion]
* **属性:** `accordion`自体には特に属性はありません。
* **内部タグ:** `accordion_item`タグを使用します。
* `title`: 各アコーディオン項目のタイトル（質問部分）を指定します。
* **応用例:** よくある質問（FAQ）セクションを効果的に作成できます。
6. その他便利なショートコード
上記以外にも、SANGOには様々なショートコードが用意されています。
6.1. schema_faq
FAQコンテンツを構造化データ（Schema.org）としてマークアップするためのショートコードです。SEO対策として非常に重要です。
* **使い方:**
[schema_faq]
[schema_faq_item question=”SANGOのショートコードとは何ですか？”]SANGOのショートコードは、WordPressの投稿や固定ページ内で特定のコードを入力することで、あらかじめ定義されたデザインや機能を持つコンテンツを簡単に挿入できる仕組みです。[/schema_faq_item]
[schema_faq_item question=”ショートコードはどこで使えますか？”]WordPressの投稿編集画面や固定ページ編集画面、ウィジェットエリアなどで利用できます。[/schema_faq_item]
[/schema_faq]
* **属性:**
* `question`: 質問文を指定します。
* `answer`: 回答文を指定します。
* **応用例:** FAQページを作成する際に、必ず使用することを推奨します。検索結果にFAQが表示されやすくなります。
6.2. icon
font Awesomeなどのアイコンフォントを簡単に挿入できます。
* **使い方:**
* **属性:**
* `name`: アイコンの名前を指定します（例: `star`, `heart`, `camera`）。
* `color`: アイコンの色を指定します。
* `size`: アイコンのサイズを指定します（例: `xs`, `sm`, `lg`, `2x` など）。
* **応用例:** アイコンを使って視覚的なアクセントを加えたり、リスト項目を装飾したりします。
6.3. note_box
注意喚起や重要な情報を強調するための特別なボックスです。
* **使い方:**
[note_box title=”重要” icon=”exclamation-triangle” background=”#fff3e0″ border_color=”#ff9800″]
この情報は非常に重要です。必ずご確認ください。
[/note_box]
* **属性:** `box`ショートコードと同様の属性に加え、`note_box`専用のスタイルが適用されます。
サンプルコード
ここでは、いくつかのショートコードを組み合わせて、より実践的なコンテンツを作成するサンプルコードを紹介します。
サンプル1：サービス紹介ページの一部
当社のサービスをご紹介
私たちは、お客様のビジネス成長を加速させるための革新的なソリューションを提供しています。
[tabs]
[tab title=”Web制作”]
[box title=”高品質なWebサイトを制作” icon=”code”]
最新の技術とデザインを取り入れ、ユーザー体験を最適化したWebサイトを制作します。SEO対策も万全です。
[/box]
[button url=”/web-creation-details” color=”primary” icon=”arrow-right”]Web制作の詳細を見る[/button]
[/tab]
[tab title=”マーケティング支援”]
[box title=”データに基づいたマーケティング戦略” icon=”chart-bar”]
データ分析に基づき、効果的なマーケティング戦略を立案・実行し、ROIの最大化を目指します。
[/box]
[button url=”/marketing-support-details” color=”secondary” icon=”bullhorn”]マーケティング支援の詳細を見る[/button]
[/tab]
[/tabs]
サンプル2：FAQセクション
よくあるご質問
[schema_faq]
[schema_faq_item question=”SANGOテーマのインストール方法は？”]
WordPressの管理画面から「外観」→「テーマ」→「新規追加」を選択し、SANGOテーマのzipファイルをアップロードしてください。
[/schema_faq_item]
[schema_faq_item question=”ショートコードの使い方がわからない場合は？”]
[note_box background=”#e8f5e9″ border_color=”#4caf50″]
ご不明な点は、SANGOの公式ドキュメントを参照いただくか、サポートフォーラムにてお問い合わせください。
[/note_box]
[/schema_faq_item]
[schema_faq_item question=”カスタマイズは可能ですか？”]
はい、SANGOテーマは豊富なカスタマイズオプションを提供しています。テーマカスタザーから詳細な設定が可能です。
[/schema_faq_item]
[/schema_faq]
### 実務アドバイス
SANGOのショートコードを最大限に活用するための、実務的なアドバイスをいくつかご紹介します。
1. **ショートコードの乱用を避ける:** ショートコードは便利ですが、多用しすぎるとコンテンツが煩雑になり、可読性が低下する可能性があります。本当に必要な箇所に、効果的に使用することを心がけましょう。
2. **構造化マークアップを意識する:** `schema_faq` のような構造化データに対応したショートコードは、SEOの観点から非常に重要です。積極的に活用し、検索エンジンにコンテンツの意味を正確に伝えましょう。
3. **テーマのアップデートに注意:** SANGOテーマがアップデートされると、ショートコードの仕様が変更されたり、新しいショートコードが追加されたりする可能性があります。定期的に公式ドキュメントを確認し、最新情報を把握しておきましょう。
4. **カスタムCSSとの連携:** ショートコードで提供されるデザインに満足できない場合は、カスタムCSSを追加してさらにデザインを調整することも可能です。WordPressの「外観」→「カスタマイズ」→「追加CSS」から記述できます。
5. **エディタの活用:** Gutenbergエディタを使用している場合、SANGOはGutenbergブロックとしても提供されていることがあります。ブロックエディタの方が直感的に操作できる場合もあるため、両方の使い方を理解しておくと便利です。
6. **ショートコードジェネレーターの利用:** SANGOの公式ドキュメントや、関連するプラグインの中には、ショートコードを簡単に生成できるツールが提供されている場合があります。これらを活用することで、記述ミスを防ぎ、作業効率を向上させることができます。
7. **アクセシビリティへの配慮:** ショートコードを使用する際も、コントラスト比やフォントサイズなど、アクセシビリティに配慮したデザインを心がけましょう。特に、色覚障がいのあるユーザーにも配慮した配色が重要です。
8. **レスポンシブデザインの確認:** SANGOテーマは基本的にレスポンシブデザインに対応していますが、ショートコードを多用した場合でも、スマートフォンやタブレットなどの異なるデバイスで正しく表示されるか、必ず確認しましょう。
### まとめ
SANGOテーマのショートコードは、WordPressの標準機能だけでは実現が難しい、デザイン性の高いリッチなコンテンツを、コーディングの知識なしで手軽に作成できる強力なツールです。本記事で解説した主要なショートコードを理解し、適切に活用することで、あなたのWebサイトはより魅力的で、ユーザーフレンドリーなものになるはずです。
ボックス、リスト、ボタン、タブ、アコーディオンなど、様々な種類のショートコードを組み合わせることで、情報の整理、ユーザーの誘導、インタラクティブなコンテンツの提供など、多様なニーズに対応できます。特に、SEOに貢献する`schema_faq`のようなショートコードは、積極的に利用することをお勧めします。
ショートコードはあくまでも補助的な機能です。コンテンツの質を高めるためには、ショートコードのデザインに頼りすぎるのではなく、分かりやすい文章構成や、ターゲットユーザーに響く情報提供を心がけることが最も重要です。
この記事が、SANGOユーザーの皆様のWebサイト制作の一助となれば幸いです。ぜひ、様々なショートコードを試して、あなただけのオリジナルなWebサイトを作り上げてください。
コメント