【2024年最新】Shortcodes Ultimateの使い方まとめ

2024/06/21

Shortcodes Ultimateは、ショートコードで記事を装飾できるプラグインです。

50種類以上のデザインパーツが用意されていて、ショートコードの設置だけで、記事の見た目を簡単に整えることができます。

Shortcodes Ultimateの基本的な使い方や利用できるデザインパーツとは？

本記事は、ブログブートキャンプのブログの始め方-WordPressのプラグインに関する内容となります。

レオ

記事のデザインを整えて、もう少し見やすくしてみたいな！

アレックス

Shortcodes Ultimateを使えば、簡単にボタンやボックスなどを設置できるぞ！基本的な使い方を確認していこう。

ジャンプできる目次

【広告主の開示】
※当サイトは、広告主から支払われる広告収入を主な収入源として運営を行っています。
※当サイトの記事では、商品・サービスの紹介に広告主のアフィリエイト広告を利用しています。
※記事で紹介した商品・サービスを購入すると、広告主から当サイトに報酬が支払われることがあります。

Shortcodes Ultimateとは

WordPress.org 日本語

WP Shortcodes Plugin — Shortcodes Ultimate ビジュアルコンポーネントの包括的コレクション

Shortcodes Ultimateは、ショートコードにより、記事を簡単に装飾できるプラグインです。

記事のコンテンツ内容が同じでも、様々なデザインパーツで装飾して見た目を整えることで、格段に読みやすい記事を作ることができます。

例えば、Shortcodes Ultimateでは、次のようなデザインパーツが利用可能となっています。

Shortcodes Ultimateで利用できるデザインパーツ — Shortcodes Ultimate 公式サイト

レオ

文字だけの記事よりも、ボックスやボタンを使った方が格段に読みやすいね！

アレックス

人気ブログの記事を見ると、装飾まで洗練されている。内容はもちろんだが、デザインも重要だ。

Shortcodes Ultimateの使い方

Shortcodes Ultimateの使い方は簡単で、導入後すぐにデザインパーツが利用可能です。

プラグインの新規追加ページでShortcodes Ultimateをインストール・有効化してから、基本的な使い方を確認していきましょう。

ショートコードの設置方法

Shortcodes Ultimateを有効化すると、投稿画面のショートコード機能が拡張されています。

ブロックエディターで、「ブロックの追加→ショートコード→[ ]」と選択してください。

または、段落のブロックを作成して「[ ]」ボタンをクリックすることでも、起動できます。

ショートコード一覧が表示されるので、デザインパーツを選択した上で詳細設定を行い、「ショートコードを挿入」をクリックします。

投稿画面にはショートコードの文字列のみが表示されますが、プレビュー画面では実際のデザインを確認できます。

おすすめのデザインパーツ7選

ここからは、記事作成に役立つおすすめのデザインパーツを7つピックアップして紹介します。

1. ボタン

公式サイトはこちら

ボタンは、アフィリエイトリンクのクリック率を高めることができるデザインパーツです。

ボタンの色としては、重要さを意味する赤色や安心感を与える緑色が効果的と言われていて、テキストリンクの視認性を高めることができます。

Shortcodes Ultimateでボタンを作る際は、以下のように設定してみてください。

リンク: クリックで遷移するURLを入力
ターゲット: 同じタブ / 新しいタブを選択
背景: 赤-#DF342B / 緑-#34C759を入力
テキスト色: 白-#FFFFFFを入力
サイズ: お好みで選択
中央: はいを選択
内容: ボタンに表示する文字を入力

2. ボックス

ボックスの例

・ボックスのコンテンツ
・ボックスのコンテンツ
・ボックスのコンテンツ

ボックスは、コンテンツで強調したい箇所を目立たせることができるデザインパーツです。

記事で重要なポイントに対して、囲み枠や見出しを使用してアクセントを付けるだけで、格段に読みやすい記事に仕上がります。

Shortcodes Ultimateでボックスを作る際は、以下のように設定してみましょう。

タイトル: ボックスの見出しを入力
色: ボックスの色を選択
タイトルテキストの色: 見出しの色を選択
内容: ボックス内の文字を入力

アレックス

ボックスの内容に、リストを入れるような使い方が効果的だ！

3. リスト

並び項目
並び項目
並び項目

リストは、コンテンツの要点を箇条書きで伝えることができるデザインパーツです。

WordPress標準で用意されているリストは「・」が並ぶだけですが、Shortcodes Ultimateではアイコンを使ったり色を変えることができます。

Shortcodes Ultimateでリストを作る際は、以下の項目を設定します。

アイコン: アイコンピッカーで選択
アイコンの色: 好みの色を選択
内容: 文字を<li> </li>の中に入力

4. カラム

カラムは、コンテンツを2段組みや3段組みにしてデザインを整えるデザインパーツです。

上記の例のように画像を2つ並べることもできますし、左側は画像にして右側に文章を書くというような使い方もできます。

カラムでは、次のようなショートコードが生成されます。3段組みにしたい場合は、1/2を1/3に変えた上で、個数を3つに増やせばOKです。

カラム:2列表示の場合

[su_column size="1/2" center="no" class=""]列のコンテンツ[/su_column]
[su_column size="1/2" center="no" class=""]列のコンテンツ[/su_column]

カラム:3列表示の場合

[su_column size="1/3" center="no" class=""]列のコンテンツ[/su_column]
[su_column size="1/3" center="no" class=""]列のコンテンツ[/su_column]
[su_column size="1/3" center="no" class=""]列のコンテンツ[/su_column]

5. スポイラー/アコーディオン

スポイラーのタイトル

スポイラー/アコーディオンは、クリックによりコンテンツの開閉ができるデザインパーツです。

使い方としては、製品レビューやQ&Aなどで知りたい情報のクリックをしてもらうことで、コンテンツをより印象付けることができます。

Shortcodes Ultimateでスポイラーを作る際は、以下の通り項目を設定します。

タイトル: 表示しておく文字を入力
開く: いいえを選択
アイコン: 表示するアイコンを選択
内容: クリックで表示する文字を入力

アレックス

アコーディオンでは、1つのスポイラーが開いている時に、他のスポイラーが閉じるようになっているぞ！

6. タブ

タブコンテンツ1

タブは、クリックすることでコンテンツを切り替えることができるデザインパーツです。

ページを切り替えることなく表示内容を変更できるため、商品・サービスのスペックや料金のような情報を並列で整理する時に活躍してくれます。

以下のようなショートコードが生成されるので、タブ名やタブコンテンツを入力してください。

[su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
[su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]