7.2.2 ページ装飾しよう
ページを装飾することで、綺麗で、美しいページを作ることができるようになります。
「Shortcodes Ultimate」は、装飾できる道具がたくさん入った、デザインプラグインです。
おまじない(ショートコード)を使って、あっという間にいい感じの装飾をすることができます。
Shortcode Ultimateには、無数の装飾機能が入っていますが、使用方法は同じです。
- 使いたい装飾機能を選ぶ
- 実際に使って、どんなことができるのか確認してみる
- 自分の使いたい設定に調整する
です。
はじめに、「全ての装飾機能を覚えよう」とすると、使い始めるまでにかなりの時間がかかってしまいます。大切なことは「その場で学ぶ」ことです。
以下では、上記で説明したような、3ステップを具体的に紹介しているので、解説を見ながら真似して操作しましょう。そして、3ステップの感覚になれたら、他の機能も触ってみましょう。
(1) 「Shotcode Ultimate」をインストールして、有効化する
(2) 固定ページや投稿ページ内に、「ショートコードを挿入」という文字が出てくるので、クリックする (テスト用で固定ページを作って、操作をしてみましょう)
(3) ショートコード(おまじない)一覧が表示されるので、「ボックス」を選択してみましょう
(4) ボックス の詳細画面が表示されます。
(5) よくわからない場合は、とりあえず「ショートコードを挿入」をしてみましょう
(6) ページ内に、ショートコードが挿入されます。実際のページでどうなっているのかを確認してみましょう。
(7) 更新をしてみると、ページ内にボックスが出現する。これで、「ボックス」という機能がなんとなくどんな装飾機能なのかわかります。
(8)もっと詳しくボックス装飾機能を理解するために、おまじないで囲まれた文字を編集して、プレビューしてみます。
(9)すると、ボックスの中に書かれている文字が変わりました。このようにページ内に挿入されたショートコードを変更してみて、「何がどう変わるのか?」を確認してみましょう。
(10) 今後は、もう一度ボックスを挿入するのですが、詳細設定も変更してみましょう。どうなりそうか予想することが重要です。後からの記憶への定着率がグンとアップします。
(11) 詳細設定後、再度「ショートコードを挿入」をクリックしてみると、ショートコード内に、謎の文字が挿入されました。
(12) プレビューして確かめてみると、詳細設定で変更した点は「ボックスのグラデーション」と「色」だったことが判明しました。
(13) つまり、おまじないの中に書かれた文字を追加したり、変更することで、装飾機能の詳細を設定することができます。
一度、ここまでわかったことをまとめると
- 装飾機能を追加すると、ページ内にショートコード(おまじない)が追加される
- おまじないの書き方は、[おまじない]〇〇[/おまじない]
- すると、〇〇に対して、おまじないの内容が適応される
- おまじないの詳細を設定する場合は、「おまじない XX△△※※」〇〇[/おまじない]とかく
です。
(14)後は、いろんな装飾機能を試してみましょう。この「その場でなれる」力がアップすると、「あー、あんな装飾したいなあ」と思った瞬間に、すぐに機能を見つけ、使うことができるようになります
よく使うおまじない
ちなみに、私たちがよく使うおまじないをいくつか紹介しているので、何から触って身ようか悩んでいる方はぜひ参考にしてみて下さい。
プラグインを使おう
今日は、2つのプラグインを使って、Webサイトの装飾について学びます。
使うのは、以下のプラグインです。
- Shortcodes Ultimate
- Bootstrap ShortCodes
この2つのプラグインをマスターして、Webサイトを装飾しましょう。