記事を装飾するのに便利なプラグイン「SU」の使い方

シェアしてくれると喜びます。

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

装飾

ワードプレスでブログを書いていて「記事をきれいに装飾したいな」と思うことってありますよね。

しかし、CSSで定義していちいちタグ打ちするのは面倒です。

そういうときに「Shortcodes Ultimate」というプラグインを使えば、CSSやタグ打ち入らずで簡単に記事を装飾することができます。ちなみにSUというのはタイトルが長くなってしまうため無理やりShortcodes Ultimateを略しました。

今更ながら、ショートコードアルティメットでこんなことができますよ。というのをご紹介したいと思います。

こんな装飾ができます

実装までは、プラグイン→新規追加→検索でShortcodes Ultimateと入力→インストール→有効化でいけます。

アルティメットショートコード

有効化後は、記事投稿画面からいつでも使うことができます。ビジュアルエディター、テキストエディターのどちらでも使うことができます。

ショートコード

全部で55種類の装飾ができるようです。多すぎて使いこなせないぜ。

ではこの中で文字の装飾に使えそうな機能をご紹介します。プレビュー機能もついているので記事内に入れる前にチェックできるのもいいところです。

見出しができる

こんな見出しができる

例えば、見出しタグを使わずに、話の展開を変えたい場合とかありますよね。上記のような見出しができます。これは「ショートコードを挿入」をクリック後、「見出し」をクリックで入力できます。

仕切りができる

こちらも話の展開を変えたいときに使える仕切りができます。

以下のような感じ。

別にhrタグでやればよくね?と思いますよね。でも数秒で、色も付けられるし、トップへ戻るのリンクも付けられますよ。こちらのほうが断然早いです。

「仕切り」をクリックで入力できます。

箇条書ができる

文章を見やすくするために箇条書にしたいときありますよね。別にリストタグでやればよくね?と思いますよね。

  • りんご
  • みかん
  • ぶどう

でもちょっとオシャレではないと思いませんか?

  • りんご
  • みかん
  • ぶどう

こんな感じで、画像付きのリストだったり、アイコン付きのリストにできますよ。

「リスト」を選択することでできます。

ドロップキャップが簡単

頭の1文字だけこんな感じで強調することができます。

しかもデザインや大きさも簡単に設定できます。これをCSSでやろうと思ったら大変です。日が暮れます。数秒でできるのはすごいですね。(えっ、使いどころが難しいって?まあ否定はしませんが)

「dropcap」をクリックで使用できます。

ボタンリンクが作れる

これは結構重宝するのではないでしょうか。

こんな感じのボタンリンクが作成できます。大きさや色も自由自在です。ボタンにカーソルが乗ったときに色が変わるホバー機能付き。

クリックしたときに別タブで開くか否かの設定もできます。

「ボタン」をクリックで使用できます。

文字のハイライトが簡単

ちょっと強調したい1文がある。 そんなときは文字をハイライト してみるものいいかもしれません。

色は自由自在に一瞬で変更できるので、CSSで定義してタグ打ちするより圧倒的に早いです。文字色も変更できます。

「ハイライト」をクリックで使用可能

タブ機能

縦に文章が長くなってしまうことってありますよね。

スッキリまとめたいときにはタブを活用するといいかもしれません。

タブ1タブ2タブ3
コンテンツ1
コンテンツ2
コンテンツ3

クリックすると詳細が表示される仕様です。使い方次第では格好良く仕上がるかもしれませんね。

「タブ コンテナ型」で使用できます。

ボックスが簡単に作れる

ある文章群だけ目立たせたい。そんなときはボックスが便利です。

こんな感じのができます
色やボックスのスタイルも自由に変更できます。

突然話の流れを変えたいときにも使えそうです。

「ボックス」をクリックで使用できます。

サービスボックスもできます サービスボックスもできます
横のアイコンは自由に変更できます。画像も可。サイズ変更も可

「サービス」をクリックで使用できます。

スポイラー機能

記事を書いていると「初歩的なこと」と「専門的なこと」がごっちゃになってしまうことありますよね。そんなときはスポイラーで専門的なことを囲ってやるといいかもしれません。

クリックで開く
コンテンツ

こんな感じのができます。

「スポイラー」で使用可能。

また「アコーディオン」ではスポイラーを複数まとめることができます。

ノート機能

ちょっとこの部分は重要だから目立たせたい。こういうときありますよね。

こんな感じのができます。色も自由に変えられます。

ハイライトより大部分を目立たせたいときに使えそうです

「ノート」をクリックで使用できます。

まとめ

他にもたくさんの機能があり、いくらでも装飾可能です。

「記事ネタがない」なんてときは、過去記事を見直して装飾してみるのもユーザビリティー改善に繋がっていいかもしれませんね。