ワードプレスの「Shortcodes Ultimate」でデザイン。「Shortcodes Ultimate」は、ワードプレスのプラグインです。今回は、ワードプレスの「Shortcodes Ultimate」でデザインについて書いていきます。
大手企業のWebサイトを見ていると、デザインが細部にまで行き届いていることが分かります。ページのレイアウトに関しては単純でも、見やすくて使いやすく作成されていることが多々感じられることがあります。
| 結論を先に話ししておきます |
| 今回は、前半と後半の2回に渡って投稿していきます。ワードプレスのプラグインで「Shortcodes Ultimate」のショートコードを使って「投稿」もしくは「固定ページ」のビジュアルデザインと機能面のデザインをおこなっていきます。
ショートコードの結果は、ブラウザーを使用して確認します。その際、ビジュアルエディターからショートコードを挿入しても、ショートコードによる結果は表示されません。その為、ページを公開して表示するか、プレビュー表示させなければなりません。
「Shortcodes Ultimate」は、50種類を超すショートコードを簡単に利用することが可能です。メニューを初めとするほとんどの部分では、日本語化も進んでいます。更に言えば、簡単に表現力を増やしたい時は、有料版を使ってみましょう。
続きの投稿は「「Shortcodes Ultimate」でカスタマイズ！」をご覧になってみて下さい。
|
目次はコチラ
【Shortcodes Ultimateのインストール(動画付き)】
「Shortcodes Ultimate」を使うには、ショートコード用のプラグインをインストールし、有効化しておく必要があります。ワードプレスのプラグインは何でもそうですが、有効化しておかないと使えるようにはなりません。
まずはデザインにおける作業や簡単な機能を追加できるショートコードが「Shortcodes Ultimate」と言う訳です。「Shortcodes Ultimate」をインストールする手順ですが、他のプラグインとやり方は同じなので割愛させて頂きます。
ではここで動画を視聴してみて下さい。題して「Shortcode Ultimateの使い方：WordPressでショートコードを使って様々なデザインを作成する方法」です。
| 「Shortcodes Ultimate」のプラグインをインストールする場合「プラグイン」→「新規追加」→右上部にあるボックス内に「Shortcodes Ultimate」と入力する。表示されたら「今すぐインストール」→「Activate」の順番でおこなって下さい。
念の為「Shortcodes Ultimate」は「WordPress Shortcodes Plugin — Shortcodes Ultimate」と記載されており、作者は「Vladimir Anokhin」です。お間違えのないようインストールして下さい。 |
【Shortcodes Ultimateのショートコードを挿入(動画付き)】
「Shortcodes Ultimate」のショートコードの利用も、他のショートコードの時と同じです。具体的には、ブロックエディターから、ショートコードのブロックをページに挿入するだけで使えます。
| 注意点として |
| 旧エディター(クラシックエディター)を使っている場合「Shortcodes Ultimate」を使うことはできません。「Shortcodes Ultimate」を使ってみたい場合、旧エディター(クラシックエディター)から、ブロックエディターへ変更しましょう。一応、図解で説明します。 |
- サイドメニューの「紫色枠」で囲まれている上部にマウスを移動すると、プルダウンメニューが表示されます。その後「黄色枠」で囲まれている「投稿設定」を押して下さい。
- すると投稿設定画面が表示されます。すべてのユーザーのデフォルトエディターの「赤色枠」で囲まれている「ブロックエディター」側を選択して下さい。最後に「水色枠」で囲まれている「変更を保存」を押しましょう。
| ブロックエディターに変更したことにより「Shortcodes Ultimate」のショートコードを使えるようになりました。それでは、次を見ていきましょう。 |
- 「投稿」でも「固定ページ」でも良いのですが、どちらかを選択し、新規追加を押して下さい。すると下記のような画面が表示されます。表示された画面内の左上部に「オレンジ色枠」で囲まれている「+」を押しましょう。
- 開くと、左側に沢山のボタンが表示されます。そのまま下の方へスライドすると「赤色枠」で囲まれている「ショートコード」を開いてみましょう。
- 「赤色枠」で囲まれている「ショートコード」を開くと、その右側に「オレンジ色枠」で囲まれている「[]のマーク」が表示されているので押して下さい。
- 次の画面でも「[]のマーク」が「赤色枠」で囲まれているので押して下さい。
- すると「Shortcodes Ultimate」のショートコードが「桃色枠」で囲まれている中に表示されます。その数実に67個あります。もの凄い数のショートコードです。
| 「Shortcodes Ultimate」を使用する場合、予め、設定したい箇所を選択しておいて下さい。選択せず、ショートコードの設定をしてしまうと、変なところに表示されてしまう可能性がでてきます。
またショートコードブロックで「Shortcodes Ultimate」の設定ページでは「段落」「ショートコード」「クリシック」のうち、どのブロックで利用できるのかを設定することが可能となります。 |
ではここで動画を視聴してみて下さい。題して「『Shortcodes Ultimate』プラグインを使って出来る事。記事装飾の実例を紹介します【Wordpress】」です。
プラグイン同士でバッティングする
ワードプレスには、沢山のプラグインが存在します。プラグインは、ワードプレス本体ではなく、他の企業や個人がワードプレスにアドインする形で機能を追加するものです。このことについてはあなたもご存知かと思います。
この為、あるプラグインを有効化した際、他のプラグインで記述の一部が重なったり、妨害されたり、意図したように機能しないことがあります。これは「プラグインのバッティング」もしくは「コンフリクト」と呼ばれる現象です。
プログラミングの豊富な経験があれば、プラグインの一部を編集することでバッティングを解消できることもありますが、問題の箇所が中々特定できないこともあります。突然、プラグインの機能が使えなくなった時、あなたならどうしますか？
| その時は、最近有効化した機能を停止してみて、テストしてみましょう。後から有効化したプラグインが原因だったと言う場合、バッティングしている2つのプラグインのどちらかを諦めるのが得策だと考えます。 |
二重線により上下を囲まれた見出しとは(動画付き)
「Shortcodes Ultimate」の見出し機能は、見出しに指定したテキストのサイズと水平方向の「寄せ」や「マージン」などを指定することができます。デフォルトでは、テキストの上下に水平線が表示されます。
無料版で指定できるスタイルは「default」の1種類だけですが、有料版では「Heading skins」から、20種類ほどのスタイルを選択することが可能となります。その他には、CSSを編集することでカスタマイズできます。
ではここで動画を視聴してみて下さい。題して「初心者さんも簡単！「Shortcodes Ultimate」を使ってワードプレス投稿内の文字にアニメーションをつける方法」です。
テキストボックスを囲んでみよう
コンテンツエリアにおける特定のテキストコンテンツを枠付けすると、その内容が協調されます。「Shortcodes Ultimate」では、ボックスのショートコードによって、段落の四辺を線で囲み、上辺にタイトル行を付けられます。
オプション設定に於いて、ボックスのスタイル(デフォルト)の他「ソフト(soft)」「ガラス(glass)」「泡(bubbles)」「ノイズ(noise)」のそれぞれが選択可能となっています。いろいろ試してみましょう。
| ショートコードを使う場合、そのままショートコードブロック内にテキストを入力すると、行間が狭く表示されます。その一方で、段落ブロックにテキストを入力すると、設定された行間で見やすく表示されます。
テキストを見やすく表示したい時には、ショートコードブロックと段落ブロックを分けて入力します。具体的には、最初のショートコードブロックでは「開始タグ」だけにして「終了タグ」は外しておきます。
次に、段落ブロックを挿入してテキストを入力します。最後にショートコードブロックを挿入し、そこにはショートコードの「終了タグ」を入力します。と言ったようなやり方です。是非覚えておきましょう。 |
他のWebサイトから引用してみよう
引用するCSSのフォーマットは、テーマによって大きく異なっています。それに従って「Shortcodes Ultimate」の引用ショートコードも、そんな引用フォーマットの1つと考えれば良いでしょう。
他のWebサイトからの引用を表示する「[su_quote]」ショートコードは、引用部分を「"」と「"」で囲んで、引用元のWebサイトのURLをリンク表示すると言うものです。引用されたテキストは、斜体で表示されます。
| 属性 | 説明 |
|
無料版では「デフォルト(default)」だけです。 |
|
引用元の「タイトル」「サイト名」「投稿者」などを明示します。 |
|
引用元の「URL」を指定します。 |
|
任意の「カスタムCSSクラス」を指定します。 |
今回は、ここまでといたします。ワードプレスの「Shortcodes Ultimate」でデザインについては難しかった内容だったかも知れませんね。しかしながら「Shortcodes Ultimate」を触っていれば必然的に覚えてきます。
何を覚えるにも、最初は難しく感じるかも知れません。私も最初はそうでしたから。ですが触っているうちに少しずつ覚えてきます。是非「Shortcodes Ultimate」を導入して、華やかなブログを構築してみて下さい。
続きの投稿は「「Shortcodes Ultimate」でカスタマイズ！」をご覧になってみて下さい。
