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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「su_spoilerの属性」と「su_accordionの属性」について、難しく感じるかも知れませんが、覚えてしまえばどってことありません。まずはそのやり方を覚える為に、触ってみるのが一番です。頑張ってみましょう。

【Shortcodes Ultimateのショートコードをカスタマイズ(動画付き)】

「Shortcodes Ultimate」には、ショートコードのCSSをカスタマイズする機能があります。ショートコードにおけるデザインのカスタマイズ化は、ワードプレスのテーマをカスタマイズする時と基本的には同じです。

この場合、専用のエディターを使って、CSSファイルにおける所定のセレクタを編集します。「Shortcodes Ultimate」のショートコードは、6つのCSSファイルに分割して収納されていることを覚えておきましょう。

ではここで動画を視聴してみて下さい。題して「【超入門】CSSの「セレクタ詳細度」って知ってる？【HTML・CSS コーディング】」です。

CSSファイルに於いて、それぞれショートコードの部分を見ると、どのようなプロパティに設定されているのかが分かります。CSSファイルを見たり、それらのCSSファイルの内容をカスタマイズするには、専用のエディターを使います。

今回は、以上となります。今回の「「Shortcodes Ultimate」でカスタマイズ！」は、理解して頂けましたか？内容的には難しく感じたかも知れません。いずれにせよ「Shortcodes Ultimate」を使いこなせるようにしましょう。

前編を読まれたい場合「ワードプレスの「Shortcodes Ultimate」でデザイン」を見て下さい。

トップページへ戻る