【プラグイン】記事を見栄え良くするShortcodes Ultimate

    icon-clock-o読了時間:約5分14秒

編集画面で装飾用のショートコードをクリック挿入して
簡単に記事を見栄え良くしてくれるプラグインが
 Shortcodes Ultimate(ショートコード アルティメット) です。
Shortcodes Ultimateロゴ


 目次 

インストール&有効化
Shortcodes Ultimateの使い方
ショートコードの使用例
[使用例]ボタン
[使用例]タブ
[使用例]ボックス
[使用例]リスト
[使用例]YouTube


インストール&有効化

①左サイドメニュー【 プラグイン 】⇒【 新規追加 】
②『 Shortcodes Ultimate 』 と検索
③【 今すぐインストール 】
④【 有効化 】してください。
Shortcodes Ultimateをインストール
有効化した後は、特に設定などを変更しなくても
そのまま投稿記事の編集画面で使用可能になっています。

プラグイン一覧ページの『 Shortcodes Ultimate 』⇒【ショートコード】、
もしくはサイドバーの【 ショートコード 】⇒【Available shortcodes】から
使用可能なショートコードの一覧とデフォルトの表示状態の確認ができます。
Shortcodes Ultimate・ショートコード一覧


Shortcodes Ultimateの使い方

ショートコードを挿入したい箇所にカーソルを合わせた状態で
編集メニュー上部の【 ショートコードを挿入 】をクリックします。
Shortcodes Ultimate・挿入箇所選択
挿入したい装飾を選んでクリックし、カラーやサイズなどの各項目を調整、
『 コンテンツ 』の欄にテキストなどを入力して
【 ショートコードを挿入 】をクリックすればOKです。

また、挿入前に【 icon-eye ライブプレビュー 】をクリックすると
どんな表示になるかを確認できます。
Shortcodes Ultimate・ショートコードを挿入
同じ設定をいつも使いたい場合は【 icon-reorder プリセット 】をクリックして
設定に名前を付けて基本設定として登録しておくこともできます。

記事編集画面に戻ると、コンテンツがショートコードで囲われています。
記事のプレビュー表示からも装飾が適用されているか確認できます。
Shortcodes Ultimate・プレビュー表示


ショートコードの使用例

それでは豊富なショートコードの中からいくつか使い方と表示例をご紹介してみます。
それぞれ【 icon-eye ライブプレビュー 】で表示状態を確認しながら
お好みに合わせてカラーやスタイルを調整してみてください。
Shortcodes Ultimate・ボックス


[使用例]ボタン

リンクボタンを設置できます。

ブログTOPへ

こんな感じの3Dで立体的なボタンも簡単に作れて便利。
Shortcodes Ultimate・ボタン


[使用例]タブ

タブをクリックすると、コンテンツ内容が変わります。
Shortcodes Ultimate・タブ
画像もコンテンツ内容として使えるので工夫すると色々できそうですね。

ここに ↓ 実際のタブを設置してみたので、タブの文字をクリックしてみてください。

タブの使用例休憩中犯人はお前だ!


[使用例]ボックス

コンテンツを枠で囲みます。
Shortcodes Ultimate・ボックスでコード記述
以前はコード記述の際はCrayon Syntax Highlighterという
コードを記事に掲載するための専用プラグインを使っていたのですが、
プラグインの更新が停止して4年が経ち、動作速度も遅くなっていたので
アンインストールしてこのボックスで表記することにしました。


[使用例]リスト

項目を並べてリストを作れます。
Shortcodes Ultimate・リスト


[使用例]YouTube

簡単にYouTube動画の埋め込みデザインを整えることができます。
Shortcodes Ultimate・YouTube動画
実際の表示はこうなります。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket