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

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

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

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

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

レオのアイコン画像レオ

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

アレックスのアイコン画像アレックス

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

スポンサーリンク

ジャンプできる目次

この記事の著者

アレックス
Alex

ブログブートキャンプ アレックス

10年間のブログ経験を活かしてブログブートキャンプを2020年に設立。ブログ運営スキルを鍛え上げるためのノウハウを発信中。

Shortcodes Ultimateとは

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

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

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

Shortcodes Ultimateで利用できるデザインパーツ
Shortcodes Ultimate 公式サイト
レオのアイコン画像レオ

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

アレックスのアイコン画像アレックス

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

スポンサーリンク

Shortcodes Ultimateの使い方

Shortcodes Ultimateの使い方

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

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

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

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

Shortcodes Ultimateの使い方

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

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

Shortcodes Ultimateで利用できるショートコード一覧

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

ショートコードの設置

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

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

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

  1. ボタン
  2. ボックス
  3. リスト
  4. カラム
  5. スポイラー/アコーディオン
  6. タブ
  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です。

[su_column size="1/2" center="no" class=""]列のコンテンツ[/su_column]
[su_column size="1/2" 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]

7. カルーセル

Shortcodes Ultimateのカルーセル

カルーセルは、コンテンツをスライドショー形式で表示するデザインパーツです。

表示する画像を選択した上で、自動スライダーやマウスクリック、スマホスワイプにより、他の画像に切り替えていくことができます。

カルーセルを使うには、Image carouselを選択し、以下の項目を設定してください。

  • Images Source: 表示する画像を選択
  • 画像の切り抜き: 画像のクロップサイズを選択
  • カラム: 一度に表示する画像数を選択
  • 自動再生: 自動再生の間隔(秒)を入力

まとめ

今回は、WordPressプラグインのShortcodes Ultimateについて、基本的な使い方を解説しました。

記事のポイントをまとめます。

本記事のポイント
  • Shortcodes Ultimateは、ショートコードで記事を装飾できるプラグインです
  • 使い方は簡単で、デザインを選んでショートコードを挿入するだけでOKです
  • おすすめのデザインパーツとして、ボタンやアコーディオンなどを紹介しました

同じカテゴリーの記事

以上、「Shortcodes Ultimateの使い方まとめ」でした。

スポンサーリンク

ジャンプできる目次
閉じる