今回は、出来る事の紹介と、ボタンやラベル、リストなどよく使いそうなもののサンプルと使い方についてまとめています。ショートコード出来る事50種ほどの装飾が可能ですが、よく使いそうなものは、ざっと以下です。見出しハイライトボタンボックスラベルタブアコーディオンリスト引用テーブルスライダーGoogleMapYouTubeQRコードなどなどサンプルボックスリストボタンラベルアコーディオンタブスライダーカルーセル以下その他のサンプルです。Ultimateを検索して追加し、有効化します。Ultimate有効化すると左メニュー内に以下のように「ショートコード」メニューが追加されます。使い方エディタ画面に「ショートコード挿入」ボタンが追加されるので、そこから使いたいものを選択する事で簡単に挿入できます。色やサイズ、リンク先や属性など様々な内容をカスタマイズする事も簡単に可能。「ショートコードを挿入」を押すと以下の選択画面が開きます。カラーコードをクリックするとカラーパレットが展開するので、そちらから好きな色をクリックするだけで設定可能です。カラーコードを直接入力しても設定できます。アイコン設定アイコンが使える装飾ショートコードがいくつかあり、その使い方は同じなので先に書いておきます。メディアマネージャーから「メディアマネージャー」ボタン押すとメディアライブラリが開き、アップロードした画像を選択可能です。アイコンピッカーから「アイコンピッカー」を押すと以下の通り使えるアイコンが表示され、選択するだけで挿入できます。色が気に入らない・・・などといった場合は、「別のCSSクラス」という欄にクラス名を指定する事で、独自のCSSを利用する事も出来ます。以下はボタンでの設定項目例です。このボタンのように、IDも設定できるものもあります。生成されるショートコードについて「ショートコードを挿入」ボタンから挿入すると、設定した項目を反映したショートコードが自動で挿入されます。使うものは、このショートコードを使って定型文や、ショートコード登録しておけば、いちいち「ショートコード挿入」から設定項目を設定せずとも、簡単に利用可能です。定型文登録などの機能がない場合でも、そのまま直接、エディタにショートコードを入力しても使えます。50種類すべては紹介しきれませんが、大抵は直観的操作で挿入できます。それぞれの設定方法をいくつか紹介します。「ショートコードを挿入」→「ハイライト」を選択します。設定項目ハイライトはとてもシンプル背景色・テキスト色・文字を設定します。最後に「ショートコードを挿入」ボタンを押せば完了です。「ショートコードを挿入」→「ボックス」を選択します。タイトルを入力し、ボックスの色とテキストの色を設定します。タイトルスタイルを選択します。スタイルの詳細については「結果例」のところでサンプル画像を貼っています。最後に「ショートコードを挿入」ボタンを押せば完了です。結果例スタイル=デフォルトで、半径を変えた例スタイルによるデザインは以下の通りです。「ショートコードを挿入」→「ラベル」を選択します。設定項目ラベルはとてもシンプルデザイン(色)を6つの選択肢から選択して「コンテンツ」の部分に文字を入力するだけです。スタイルの詳細については「結果例」のところでサンプル画像を貼っています。最後に「ショートコードを挿入」ボタンを押せば完了です。結果例タイプによる色は以下の通りです。ショートコード上記のショートコードは以下の通りです。「リスト」を選択します。アイコンとアイコンの色を設定します。「ボタン」を選択します。ラベルやリストなどに比べると、設定項目が多いですがリンク先URLなど、いくつか必要なところだけを設定すれば初期状態でも使えます。設定項目リンク先、ターゲットなど必要な情報を編集します。tab」を選択します。ボタンのスタイルを選択します。スタイルの詳細については「結果例」のところでサンプル画像を貼っています。ボタンの色・サイズ・テキストの中央配置などを指定します。最後に「ショートコードを挿入」ボタンを押せば完了です。上が何もせずデフォルトで作ったボタン、下はアイコンを入れて色変更したボタンサイズ1(MIN)とサイズ20(MAX)スタイルで選択可能なデザインの結果はそれぞれ以下です。(アイコン設定や色は各々変更しています)ショートコード上記のショートコードは以下の通りです。envelope-o"]3D[/su_button]以上です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。日本語が含まれない投稿は無視されますのでご注意ください。検索CSS等のコードコピーはコード右上のCOPYからどうぞ。