【「Shortcodes Ultimate」でカスタマイズ！】

14分39秒

大石美光

「Shortcodes Ultimate」でカスタマイズ！。「Shortcodes Ultimate」には、50種類以上ものショートコードがあります。今回は「Shortcodes Ultimate」でカスタマイズ！について書いていきます。

大企業のWebサイトなどを見ていると、デザインがこと細かく行き届いていることが良く分かります。ページのレイアウトに関してもしかり、見やすくて使いやすく作成されていることが分かります。

結論を先に話ししておきます

今回の投稿は、前回投稿した「ワードプレスの「Shortcodes Ultimate」でデザイン」の続きとなります。「ワードプレスの「Shortcodes Ultimate」でデザイン」を読まれていない方は、先に目を通された方が良いかと思います。

ショートコードの結果は、ブラウザーを使用して確認します。その際、ビジュアルエディターからショートコードを挿入しても、ショートコードによる結果は表示されません。その為、ページを公開して表示するか、プレビュー表示させなければなりません。

「Shortcodes Ultimate」は、50種類を超すショートコードを簡単に利用することが可能です。メニューを初めとするほとんどの部分では、日本語化も進んでいます。更に言えば、簡単に表現力を増やしたい場合などは、有料版を使ってみましょう。

先に「ワードプレスの「Shortcodes Ultimate」でデザイン」から、目を通して見て下さい。

関連する投稿記事もご覧下さい。「ブログのテンプレート機能で記事を短縮」です。

目次はコチラ

1 【同ページから引用したサブの見出しとは(動画付き)】
2 【UIデザイン用のショートコード】
3 【Shortcodes Ultimateのショートコードをカスタマイズ(動画付き)】
- 3.1 共有:
- 3.2 いいね:

【同ページから引用したサブの見出しとは(動画付き)】

「Shortcodes Ultimate」で「同じWebサイト」や「同じページ」に於いて、特定の語句をサブの見出しにするような時には「pullquote」のショートコードを利用することが可能となります。

この「pullquote」のショートコードは、テキストにおける横幅の%によって、指定した文字列を表示します。表示位置は、行の「右寄せ」又は「左寄せ」です。デフォルトの段落で指定すると、ブロック単位の引用が挿入されます。

これにより、印象的なサブの見出しを表示することができます。またデフォルトでは、文字装飾はありません。文字サイズや文字の間隔などを変更したい時は「class」オプションに適当なセレクタを設定してみて下さい。

属性	説明
aligh	段落内に於いて、横の寄せを「右寄せ」又は「左寄せ」で指定します。デフォルトでは「左寄せ」になっています。
class	任意の「カスタムCSS」を指定します。

ではここで動画を視聴してみて下さい。題して「Wordpress(ワードプレス)でテキストや画像にアニメーションを加える方法【Shortcodes Ultimate】」です。

【UIデザイン用のショートコード】

Webページにおけるデザインでは、インタラクティブなユーザーインターフェイスも重要な要素と言えます。これはユーザーにパソコンやスマホにクリックさせたり、タップさせたり、ユーザーの能動性や積極性を引き出します。

コンテンツに対するプラスの評価を喚起しやすくなるものと思われることです。その為には「使いやすく」「分かりやすい」のは、当たり前のこと。またビジュアル的にも優れている必要があります。

但し、ユーザーインターフェイスのデザインは、テーマにおけるデザインとの調和を考え、作成しなければいけません。「Shortcodes Ultimate」のショートコードを使うと、簡単にユーザーインターフェイスの設定ができます。

「簡単にユーザーインターフェイスの設定ができます」とは言いましたが「テーマ全体」もしくは「ページの雰囲気」と合わずに、ユーザーインターフェイスに違和感が生じることもあるかも知れません。

「Shortcodes Ultimate」のショートコードの多くは、灰色や淡い配色のものが多く、目立つことが少ない為、ボタンでは、はっきりした色彩のものを作成するようにしましょう。ですが、全体のイメージに合せるようにして下さい。

ページにタブを配置しよう

あなたは知っているか知らずかは分かりませんが、最近のWebページでは、タブ表示が当たり前になっています。「Shortcodes Ultimate」のタブショートコードを使えば、タブの設定が簡単にできます。

まずは「[su_tabs]」のタブショートコードで、タブ全体を宣言し、次に「[su_tab]」のショートコードを使って、必要なタブの数だけ作成します。「[su_tab]」のショートコードから「[/su_tab]」までの内容が「最初のタブで表示されるコンテンツ」です。

但し、この場合「title属性」の値がタブ表示されます。要するに、タブとして表示するコンテンツは、全て1ページ目に表示すると言う決まりがあります。タブのコンテンツを入力し終えたら「[/su_tabs]」でタブ設定を終了します。

su_tabsの属性について
属性	説明
style	初めに、タブ全体のデザインを指定します。無料版では「デフォルト(default)」のみです。
active	ページを表示する時、どのタブを表示するのかを指定します。設定可能な値は「1～100」です。タブは最大で「100個」まで設定可能です。ちなみにデフォルトは「1」です。
vertical	タブを横に並べる時「yes」を設定します。デフォルトは「no」です。
class	任意の「カスタムCSS」クラスを指定します。

su_tabの属性について
属性	説明
title	タブを表示する「タブのタイトル名」を設定します。
disabled	タブを非表示「yes」にする時に設定します。デフォルトはタブの表示で「no」です。
anchor	タブを切り替えた時、ページ内の「任意における箇所にジャンプ」する時に設定します。
url	タブを切り替えた時「任意のURLにジャンプ」する時、そのページのURLを設定します。
target	リンクを開くウインドウを指定します。例えばですが、下記を参照して下さい。新しいウインドウの場合「blank」を指定。同じウインドウの場合「self」を指定。
class	任意の「カスタムCSS」クラスを指定します。

ショートコードでボタンを作成(動画付き)

画像でボタンを作成する方法もある訳ですが、CSSを駆使したとしてもボタンを作成することは可能です。「Shortcodes Ultimate」のショートコードは、デザインの選択肢が少ないものの、簡単にボタンを設定できます。

「Shortcodes Ultimate」のショートコードは、無料版のショートコードを意味しています。ボタンのショートコードには、多くのオプションがあるので、専用のオプションメニューから作成するのが分かりやすいかと思います。

ではここで動画を視聴してみて下さい。題して「ブログにボタンが簡単に出来る！」です。

スポイラーでコンテンツを整理しよう

スポイラーは、コンピューターのユーザーインターフェイスに良くあるものであり、データなどの階層を示すことが可能となっています。Webページでの使い方では、ある情報ごとにスポイラーにまとめることができます。

例えばですが、企業向けに決算報告や商品情報を公開する際、スポイラーを利用すると見やすくなります。その際、スポイラーのショートコード全部をアコーディオンショートコードで囲みます。アコーディオンショートコードとは。

アコーディオンショートコードは「[su_accordion]」と「[/su_accordion]」で囲みます。

su_spoilerの属性について
属性	説明
title	スポイラーの「タイトル名」を入力します。
open	ページを開いた時、スポイラーを展開しておくかどうかを指定します。これは「yes」を指します。デフォルトは「no」です。
style	スポイラーのデザインを指定します。まずは下記を参考にしてみて下さい。デフォルト「default」を指定。ファンシー「fancy」を指定。シンプル「simple」を指定。
icon	スポイラーの「タイトルの前に付けるアイコン」を指定します。デフォルトは「plus」です。
anchor	同じページ内に於いて、任意の箇所に「ジャンプするリンク」を設定できます。
class	任意の「カスタムCSS」クラスを指定します。