Shortcodes Ultimateとは
Shortcodes Ultimateとは、記事にボタンやメディアの記事内埋め込みなどカスタマイズ可能なショートコード49種（有料：15種）が用意されており、
このショートコードを使用することで装飾や機能を簡単に記事へ追加することができるプラグインです。
本記事では、mixhostでShortcodes Ultimateの導入と無料版でよく使用するショートコードについて紹介します。
例えば、コンテンツとしてデザインやテーブルなど追加する際にショートコードを利用したプラグインの
導入方法
プラグイン導入
ダッシュボードより「①プラグイン欄：新規追加」→「②キーワードに【Shortcodes Ultimate】と入力」→「③【今すぐインストール】」→「④【有効化】」の順に選択しプラグインの有効化しましょう。
ショートコードについて
Shortcodes Ultimate（無料版）で使用可能なショートコードは以下の49種があり、使用されているテーマによってはこれらの機能を持つものある為、用途や記事のデザインに合わせて使用することをオススメします。
| 見出し | タブ | スポイラー | アコーディオン | 仕切り |
| スペーサー | ハイライト | ラベル | 引用 | プルクオート |
| Dropcap | カラム | リスト | ボタン | サービス |
| ボックス | メモ | 拡大 | lightbox | ツールチップ |
| 非公開 | YouTube | YouTube詳細設定 | Vimeo | デイリーモーション |
| 音声 | 動画 | 表 | CSVテーブル | パーマリンク |
| 会員 | ゲスト | RSSフィード | メニュー | サブページ |
| 兄弟 | GoogleMap | Image carousel | ギャラリー | 投稿 |
| ダミーテキスト | ダミー画像 | アニメーション | メタデータ | ユーザーデータ |
| 投稿データ | テンプレート | QRコード | スケジューラ | ＋有料版：15種 |
ショートコードを挿入する方法
1.エディターから［］（ショートコードを挿入）をクリックしましょう。
２．表示されたウィンドウから使用するショートコードを選択する。
赤色のアイコンが付いている項目は【有料版】限定の項目で、これらの機能に魅力を感じたら購入を検討しましょう。
３．ショートコードを調整し記事へ挿入しましょう。
ウィンドウ下部に【ライブプレビュー】ボタンがありショートコードを挿入する前に、表示される状態を確認することができます。
タブ
タブは、記事内に「タブ」を作成することができタブ別に分類を分けて素早く切替表示する際に便利なショートコードとなります。
設定項目
| 項目 | 項目内容 |
| スタイル | 無料版では「デフォルト」のみ |
| 有効なタブ | ページを表示した際に何個目のタブが選択された状態で表示するか指定します。 |
| 垂直 | タブの並びを「垂直 or 水平」から指定します。 |
| Appearance on mobile devices | モバイル端末（スマートフォン）からのアクセスした際の「タブ」の表示方法を指定します。
・垂直表示します。 ・【垂直】設定に合わせて並びが選択されます。 ・水平表示し、画面表示幅が小さい場合にはスクロールができます。 |
| Anchor in URL | タブにクリックした際に、URLにアンカーを追加します。 |
| 別の CSS クラス | CSSクラス名を追加する場合は、ここに追加します。 |
| 内容 | 上記で設定した内容で生成されたショートコードを表示と編集が行えます。 |
タブの数を変更したい場合
タブの数はデフォルトでは３つのタブとしてショートコードが用意されており、最初にショートコードの設定ウィンドウにて見栄えの調整を行い【内容】もしくは挿入後、
例：【 】を【[/su_tabs]】より前に追加もしくは余分なタブの記述を削除することで調整することができます。
| タブ1個のショートコード例 | タブ3個のショートコード例 |
タブ名タブ名 タブコンテンツ
タブコンテンツ |
タブ名タブ名タブ名 タブコンテンツ
タブコンテンツ
タブコンテンツ |
サービス
サービスとは、デフォルトで829種のアイコンもしくはアップロードした画像と説明文を使用することで、
項目や場所・用途など直感的に理解されやすい記事を作成することができます。
設定項目
| 項目 | 項目内容 |
| タイトル | アイコンの横に表示する文字列を入力します。 |
| アイコン | ・メディアマネージャー：アップロードしている画像から選択します。
・アイコンピッカー：829種のアイコンから選択します。 |
| アイコンの色 | アイコンピッカーで選択したアイコンの色をカラーコードに合わせて変更します。
※カラーコードについてはWEB色見本サイトを参考に指定するのをオススメします。 |
| アイコンサイズ | アイコンサイズ (px単位)を10～128pxまで可変させることができます。 |
| 別の CSS クラス | CSSクラス名を追加する場合は、ここに追加します。 |
| 内容 | 上記で設定した内容で生成されたショートコードを表示と編集が行えます。 |
アニメーション
アニメーションは、パワーポイントのアニメーション演出のように「内容」に対してアニメーション演出（61種）を追加することができ、
記事内で文字や画像などを強調表示することができます。
設定項目
| 項目 | 項目内容 |
| アニメーション | 61種のアニメーションから演出を指定します。 |
| 期間 | アニメーションの演出期間（０～20秒）を指定します。 |
| 遅延 | アニメーションの演出を遅延させる時間（０～20秒）を指定します。 |
| インライン | アニメーションをインライン（文中への埋め込み）を行うか選択します。 |
| 別の CSS クラス | CSSクラス名を追加する場合は、ここに追加します。 |
| 内容 | 上記で設定した内容で生成されたショートコードを表示と編集が行えます。 |
ツールチップ
ツールチップは、コンテンツ（文章やボタンなど）にウィンドウを追加表示する機能で単語のワンポイント解説や漢字の読みを用意したい場合にオススメです。
設定項目
| 項目 | 項目内容 |
| ツールチップタイトル | ウィンドウ表示にタイトル文を入力します。 |
| ツールチップコンテンツ | ウィンドウに表示する本文を入力します。 |
| 位置 | ウィンドウを表示する方向を指定します。 |
| 背景色 | ウィンドウの背景色をカラーコードに合わせて変更します。
※カラーコードについてはWEB色見本サイトを参考に指定するのをオススメします。 |
| テキスト色 | 文字色をカラーコードに合わせて変更します。
※カラーコードについてはWEB色見本サイトを参考に指定するのをオススメします。 |
| フォントサイズ | フォントサイズを10～24で指定します。 |
| Text align | 文字位置を指定します。 |
| Max width | ウィンドウサイズを10～1000pxで指定します。 |
| Tooltip border radius | ウィンドウの角を10～20pxで指定します。 |
| Tooltip shadow | ウィンドウに影を追加します。 |
| 行動 | ・マウスホバーで表示/非表示：対象にマウスが重なってる間だけ表示
・マウスクリックで表示/非表示：対象をクリックして表示、対象外をクリックで非表示 ・常に表示 |
| 別の CSS クラス | CSSクラス名を追加する場合は、ここに追加します。 |
| 内容 | 上記で設定した内容で生成されたショートコードを表示と編集が行えます。 |
ショートコードの詳細な値を確認する方法
１．一覧画面へは、WordPressのダッシュボードから【［］ショートコード欄：使えるショートコード】をクリックしましょう。
２．ショートコードを選択することで詳細な調整値を確認することができます。
エディターからショートコードを埋め込む際に、手動で調整を行う場合は【ショートコードオプション】の「可能な値」を参照し設定をしましょう。
