
「Shortcodes Ultimate」でカスタマイズ!。「Shortcodes Ultimate」には、50種類以上ものショートコードがあります。今回は「Shortcodes Ultimate」でカスタマイズ!について書いていきます。
大企業のWebサイトなどを見ていると、デザインがこと細かく行き届いていることが良く分かります。ページのレイアウトに関してもしかり、見やすくて使いやすく作成されていることが分かります。
結論を先に話ししておきます |
今回の投稿は、前回投稿した「ワードプレスの「Shortcodes Ultimate」でデザイン」の続きとなります。「ワードプレスの「Shortcodes Ultimate」でデザイン」を読まれていない方は、先に目を通された方が良いかと思います。
ショートコードの結果は、ブラウザーを使用して確認します。その際、ビジュアルエディターからショートコードを挿入しても、ショートコードによる結果は表示されません。その為、ページを公開して表示するか、プレビュー表示させなければなりません。
「Shortcodes Ultimate」は、50種類を超すショートコードを簡単に利用することが可能です。メニューを初めとするほとんどの部分では、日本語化も進んでいます。更に言えば、簡単に表現力を増やしたい場合などは、有料版を使ってみましょう。
先に「ワードプレスの「Shortcodes Ultimate」でデザイン」から、目を通して見て下さい。
|
目次はコチラ
【同ページから引用したサブの見出しとは(動画付き)】
「Shortcodes Ultimate」で「同じWebサイト」や「同じページ」に於いて、特定の語句をサブの見出しにするような時には「pullquote」のショートコードを利用することが可能となります。
この「pullquote」のショートコードは、テキストにおける横幅の%によって、指定した文字列を表示します。表示位置は、行の「右寄せ」又は「左寄せ」です。デフォルトの段落で指定すると、ブロック単位の引用が挿入されます。
これにより、印象的なサブの見出しを表示することができます。またデフォルトでは、文字装飾はありません。文字サイズや文字の間隔などを変更したい時は「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の属性について | |
属性 | 説明 |
|
初めに、タブ全体のデザインを指定します。無料版では「デフォルト(default)」のみです。 |
|
ページを表示する時、どのタブを表示するのかを指定します。設定可能な値は「1~100」です。タブは最大で「100個」まで設定可能です。ちなみにデフォルトは「1」です。 |
|
タブを横に並べる時「yes」を設定します。デフォルトは「no」です。 |
|
任意の「カスタムCSS」クラスを指定します。 |
su_tabの属性について | |
属性 | 説明 |
|
タブを表示する「タブのタイトル名」を設定します。 |
|
タブを非表示「yes」にする時に設定します。デフォルトはタブの表示で「no」です。 |
|
タブを切り替えた時、ページ内の「任意における箇所にジャンプ」する時に設定します。 |
|
タブを切り替えた時「任意のURLにジャンプ」する時、そのページのURLを設定します。 |
|
リンクを開くウインドウを指定します。例えばですが、下記を参照して下さい。
|
|
任意の「カスタムCSS」クラスを指定します。 |
ショートコードでボタンを作成(動画付き)
画像でボタンを作成する方法もある訳ですが、CSSを駆使したとしてもボタンを作成することは可能です。「Shortcodes Ultimate」のショートコードは、デザインの選択肢が少ないものの、簡単にボタンを設定できます。
「Shortcodes Ultimate」のショートコードは、無料版のショートコードを意味しています。ボタンのショートコードには、多くのオプションがあるので、専用のオプションメニューから作成するのが分かりやすいかと思います。
ではここで動画を視聴してみて下さい。題して「ブログにボタンが簡単に出来る!」です。
スポイラーでコンテンツを整理しよう
スポイラーは、コンピューターのユーザーインターフェイスに良くあるものであり、データなどの階層を示すことが可能となっています。Webページでの使い方では、ある情報ごとにスポイラーにまとめることができます。
例えばですが、企業向けに決算報告や商品情報を公開する際、スポイラーを利用すると見やすくなります。その際、スポイラーのショートコード全部をアコーディオンショートコードで囲みます。アコーディオンショートコードとは。
アコーディオンショートコードは「[su_accordion]」と「[/su_accordion]」で囲みます。 |
su_spoilerの属性について | |
属性 | 説明 |
|
スポイラーの「タイトル名」を入力します。 |
|
ページを開いた時、スポイラーを展開しておくかどうかを指定します。これは「yes」を指します。デフォルトは「no」です。 |
|
スポイラーのデザインを指定します。まずは下記を参考にしてみて下さい。
|
|
スポイラーの「タイトルの前に付けるアイコン」を指定します。デフォルトは「plus」です。 |
|
同じページ内に於いて、任意の箇所に「ジャンプするリンク」を設定できます。 |
|
任意の「カスタムCSS」クラスを指定します。 |
su_accordionの属性について | |
|
任意の「カスタムCSS」クラスを指定します。 |
「su_spoilerの属性」と「su_accordionの属性」について、難しく感じるかも知れませんが、覚えてしまえばどってことありません。まずはそのやり方を覚える為に、触ってみるのが一番です。頑張ってみましょう。
【Shortcodes Ultimateのショートコードをカスタマイズ(動画付き)】
「Shortcodes Ultimate」には、ショートコードのCSSをカスタマイズする機能があります。ショートコードにおけるデザインのカスタマイズ化は、ワードプレスのテーマをカスタマイズする時と基本的には同じです。
この場合、専用のエディターを使って、CSSファイルにおける所定のセレクタを編集します。「Shortcodes Ultimate」のショートコードは、6つのCSSファイルに分割して収納されていることを覚えておきましょう。
ではここで動画を視聴してみて下さい。題して「【超入門】CSSの「セレクタ詳細度」って知ってる?【HTML・CSS コーディング】」です。
セレクタとは |
CSSは、HTMLに記述された指定の「範囲」「要素」に対して装飾を施します。CSSによるデザイン指定をどのHTML要素に適用させるかを指定するのに用いられるのが「CSSセレクタ」です。
また「CSS」におけるセレクタは、スタイルを適用する箇所のことを指す場合もあります。カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することが可能となる訳です。まずは下記の図解をご覧下さい。
ではもう1本、セレクタに関する動画を視聴してみて下さい。題して「CSSにおけるセレクタとは何か?セレクタの種類や記述方法をスッキリ解説」です。 |
CSSファイルに於いて、それぞれショートコードの部分を見ると、どのようなプロパティに設定されているのかが分かります。CSSファイルを見たり、それらのCSSファイルの内容をカスタマイズするには、専用のエディターを使います。
今回は、以上となります。今回の「「Shortcodes Ultimate」でカスタマイズ!」は、理解して頂けましたか?内容的には難しく感じたかも知れません。いずれにせよ「Shortcodes Ultimate」を使いこなせるようにしましょう。
前編を読まれたい場合「ワードプレスの「Shortcodes Ultimate」でデザイン」を見て下さい。