Shortcodes Ultimateが便利すぎて涙が出た話
カルセールスライダーが作れるWordPressプラグインを探していたら、たまたまヒットしたプラグインShortcodes Ultimate。わかりやすい上にめちゃくちゃ機能的。あまりに便利すぎて感動したので紹介しちゃいます。
●Shortcodes Ultimate とは？
Shortcodes Ultimate って、いったい何ができるプラグインなの？・・・と聞かれると、実は返答に困ってしまいます。何と言いますか、めちゃくちゃいろんなことができちゃいます。
ざっくりと言うと、サイト内にスライダーを設置したり、オシャレなボタンを設置したり、アコーディオン型のメニューを設置したり、表示が切り替わるタブを設置できたり、とにかくいろんなことができちゃいます。
言葉で説明するよりも、実際にどんなことができるのか見てもらったほうが早いと思いますので、ざっと代表的な機能を紹介していきましょうー。
１．画像のカルセールスライダー
上記のようなカルセールスライダーが作れちゃいます。スライダー全体の横幅指定、縦幅指定、一度に表示する画像の数、いくつずつ送るか、送り矢印の有無、バレットの有無、タイトルの有無、自動送りの有無、送り速度、送り頻度など、様々な設定が可能。
２．投稿記事のカルセールスライダー
投稿記事でも同様にカルセールスライダー表示が可能。さきほどの画像カルセールはクリックするとライトボックスで表示されますが、こちらは記事ページにジャンプするように設定をしています。記事タイトルが表示されるように設定することができますが、残念ながら本文や抜粋などは表示できません。
３．スライダー
カルセールでない、普通のタイプのスライダーもこのとおり。バレット表示をONにしてみましたが、画像の中央に出ちゃいましたね。画像の下とかにあるのが普通だとは思うのですが。バレット表示位置の調整はできないのが残念。
あと、使用しているテーマのCSSと競合してしまったのか、スライダー全体の幅を小さく指定しているにも関わらず、記事幅MAXで表示されちゃいました。テーマによっては要注意ですね。
４．見出し
上下にラインが引かれたデザインの見出しを簡単に作成。ソース見てみたらdivタグで作られてました。h○タグでやるのが正しいと思うのでこれは微妙かな。
５．タブ
キリン
ゾウ
サル
サンマ
サメ
スズメ
カラス
こういったタブも非常に簡単に設置が可能。タブ機能は自作しようとするとけっこう手間なので、これはありがたいですね！タブ内のコンテンツ縦幅に差があるとタブ切り替えのたびにカクカクしちゃうのでCSSなどで高さを揃える指定はしたほうがよさそうですねー。ちなみにモバイル幅で閲覧した場合は勝手に縦タブのデザインに変わります。優秀すぎる！
６．スポイラー
普段は閉じているけどクリックすると開くやつ。プラグインの中では「スポイラー」って名前がついてました。へぇー、そんな呼び方なんですね。よくQ&Aとかで使われている機能ですね。便利かどうかはおいておいて、ちょっとオシャレ感はあります。
７．アコーディオン
スポイラーを複数にして連動させているバージョン「アコーディオン」。ひとつのスポイラーを開けた状態で別のスポイラーを開けると、いままで開いていたほうは自動で閉じます。デザインこそ違いますが、タブの縦レイアウト版に近いですね。
７．仕切り線＆TOPへ戻るリンク
ブログ記事の最後によくある、そのページの一番上に戻るやつ。このサイトのWordPressテーマもそうですが、標準で追いかけてくるタイプのやつが備わってることが多いので出番は少ないかな？
８．スペーサー
↑目では見えませんが、ここに高さ100pxの余白を入れてます。余白を自由な高さで入れられる機能「スペーサー」。ソースには「＜div class=”su-spacer” style=”height:100px”＞＜/div＞」が入っていました。brタグ連発でソース汚すのとどっちが良いかはわかりませんが、ピクセル単位でさくっと余白調整できるのは便利かも。
９．ハイライト
紅茶の生産地世界一は インド です。
背景色を指定した強調です。好きな色で背景色をつける機能です。ノウハウブログとか書いている人はけっこう多用しますよね。操作が簡単なので便利ではありますが、サイト全体の統一性とソースの整理を考えると、この機能に頼らず自分でCSS指定したほうがいいかもです。
１０．ラベル
ここがポイント！
↑こういう感じのラベルを作る機能。文章のアクセントになりますね。ただし色のパターンは何種類かで限定されていますし、自分でCSSを指定しないと大きさもいじれません。このデザインがピンポイントでほしいのであれば良いですが、それ以外だとちょっと使いづらいかも。
１１．引用
引用文にこういう感じのデコレーションをつけることができます。最近のWordPressテーマであればblockquoteタグに最初から同様のデザインがされていることが多いですが、もしそれがない場合は便利かも。
１２．ドロップキャップ
黒い三連星のガイア、オルテガ、マッシュはモビルスーツ「ドム」でアムロたちを苦しめました。
よく本文の一文字目だけ大きいデザインを見かけますが、それが実現できる機能です。呼び方はドロップキャップっていうんですねぇ。大きさは5段階、デザインは丸型や四角型など4パターンが選べますが、選べる色は黒のみ。違う色が必要であれば自分でCSS指定が必要になります。
１３．フレーム
本文をこんな感じで四角で囲むことができるのさどうだ四角いだろう？？こういうふうにテキストの回り込みも可能。
本文を四角で囲むことができます。残念ながらデザインはほとんど用意されておらず、線の調整や余白調整はできません。
１４．コンテンツの縦割り
あああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううううううううううううううううううううううう
コンテンツをこんな感じで縦割りにすることができます。分割数は自在。タブの場合と同じで、モバイル幅で見ると自動的に横分割に切り替わるのがありがたいです。
１５．コンテンツ幅の調整
コンテンツ幅の調整をする機能です。上の文章は本来のコンテンツ幅を半分にして、さらに中央寄せにした状態です。1/4、1/5、1/6刻みで幅の設定ができます。
１６．アイコンつきのリスト
- 押さない
- かけない
- しゃべらない
アイコンつきのリストを作る機能です。アイコンはアイコンピッカー約800種類の中から選べます。カラーリングも自在。ただし、リスト項目ひとつひとつに違うアイコンを設定することはできません。
１７．ボタン
ボタン ボタン ボタン ボタン
簡単にボタンを作ることができる機能。ボタンにはリンク先の指定ができます。デザインは10種類から指定、アイコンはアイコンピッカーから800種類、アイコン色と文字色と背景色は別々に指定、大きさ指定、角の丸み指定が可能です。さらにコードを記入できる部分もあるので、JavaScriptの知識があれば様々な挙動をつけることもできますね。かなり柔軟に設定ができるのでこれは多用できそうな機能。すげぇ！
１８．サービス案内
扱っているサービスの紹介がこんな感じのテイストで書けます。アイコンはアイコンピッカーより選択可能。アイコンのサイズも変更ができます。
１９．ボックス
こんな感じでタイトルつきのボックスデザインが作成可能です。デザインは5種類から。角の丸みも設定可能。色は自由に選択できますが、タイトル背景とボックスの枠の色が連動してしまうのだけがネックですかね。
１９．ボックス
背景色が指定できるボックスです。ボックス内にはタグを自在に書けるので、タイトルをつけたり画像を入れたりなんてこともできます。シンプルで使いやすいですが、これも「見出し」と同じで使用は控えて、自分でCSS指定したほうが後々無難かも？
とりあえず機能があり過ぎて、どんどん紹介していても終わらない！（笑）
また時間をみて追記します！
