プラグイン「Shortcodes Ultimate」でできることを試してみた｜おしゃれな記事にする

WordPressのプラグイン「Shortcodes Ultimate」を今になって導入して、できることを色々工夫してみました。レスポンシブに対応しており、主にタブとアニメーション、テーブル表を組み合わせると省スペースにたくさんの記事と情報を詰め込めて、しかも、見やすいのです。工夫次第でもっと便利な使い方ができるはずです。

Theme：Luxeritas

WordPress：5.3.2

ZEBLINE同居

WP Speech Balloon同居

WP Fastest Cache Premium同居

どこまで組み合わせられるのか

カラム（Column）とアコーディオン

カラムは分け方を選べる

記事の中で縦に2つ、3つと分けてコンテンツを表示できるのがカラムです。使い方次第で便利で、オシャレになります。たぶん、そんなに重くもならないし、レスポンシブにも対応してると思うのだ。

2つに分けるとこうなる（PC）

[su_row]

[su_column size="1/2″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column] [su_column size="1/2″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[/su_row]

パソコンで見ると横に2つ別れていると思います。文字と写真は中央揃えです。スマホだと、レスポンシブの関係で縦に並んでると思います。たぶん崩れてないと思います。

3つに分けるとこうなる（PC）

[su_row]

[su_column size="1/3″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが3つ目のカラムだよ

[/su_column]

[/su_row]

これは記事のブロック内で3つに分けてます。パソコンだと、横並びになっていて、スマホでは縦並びになっているはずです。

アコーディオンと合わせるとこう

アコーディオンは、縦に長くなっちゃったコンテンツとか、表示したい人だけが表示すればいい時に使えるやつです。

[su_accordion]

[su_spoiler title="2カラムのアコーディオンはこんな感じ" open="no" style="default" icon="plus" anchor="" class=""]

[su_row]

[su_column size="1/2″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column] [su_column size="1/2″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[/su_row]

[/su_spoiler]

[su_spoiler title="3カラムのアコーディオンはこんな感じ" open="no" style="default" icon="plus" anchor="" class=""]

[su_row]

[su_column size="1/3″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが3つ目のカラムだよ

[/su_column]

[/su_row]

[/su_spoiler]

[/su_accordion]

いかがでしょうか？結構ごおちゃごおちゃに混ぜても動いてるはずです。たぶんね。Android端末やiPad端末ではうまくいかないかもしれないですが、おしゃれさはなかなか追求できると思います。使うかどうかは別ですが。

カラム（Column）とアコーディオンとタブ

今度はアコーディオンの中にタブってやつを入れてみます。画面内で操作することが増えるので非推奨ですが、できるかどうかの研究なので。

[su_accordion]

[su_spoiler title="2カラムのアコーディオンはこんな感じ" open="no" style="default" icon="plus" anchor="" class=""]

[su_row]

[su_column size="1/2″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column] [su_column size="1/2″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[/su_row]

[su_tabs active="3″ mobile="desktop"]

[su_tab title="タブNo1″ disabled="no" anchor="" url="" target="blank" class=""]

ひとつめのだよ。

[/su_tab]

[su_tab title="タブNo2″ disabled="no" anchor="" url="" target="blank" class=""]

ふたつめだよ。

[/su_tab]

[su_tab title="タブNo3″ disabled="no" anchor="" url="" target="blank" class=""]

みっつめだよ。

[/su_tab]

[/su_tabs]

[/su_spoiler]

[su_spoiler title="3カラムのアコーディオンはこんな感じ" open="no" style="default" icon="plus" anchor="" class=""]

[su_row]

[su_column size="1/3″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが3つ目のカラムだよ

[/su_column]

[/su_row]

[su_tabs active="3″ mobile="desktop"]

[su_tab title="タブNo1″ disabled="no" anchor="" url="" target="blank" class=""]

ひとつめのだよ。

[/su_tab]

[su_tab title="タブNo2″ disabled="no" anchor="" url="" target="blank" class=""]

ふたつめだよ。

[/su_tab]

[su_tab title="タブNo3″ disabled="no" anchor="" url="" target="blank" class=""]

みっつめだよ。

[/su_tab]

[/su_tabs]

[/su_spoiler]

[/su_accordion]

たぶん、これくらいまでは許せる範囲なのではないかと思います。操作性の理解と、ショートコードを打ち込む時のわかりやすさでは、これが限界かなと思います。色々見せたい場合には、ページの作り方から根本的に変えて考えれば大丈夫。なんでも詰め込めば良いってもんではない。

カラム（Column）とアコーディオンとタブとボックス

さらに、アコーディオン内のカラム内にある、タブの中にボックスを入れてみます。もう自分でも何してんのかわからなくなってきましたが。

[su_accordion]

[su_spoiler title="2カラムのアコーディオンはこんな感じ" open="no" style="default" icon="plus" anchor="" class=""]

[su_row]

[su_column size="1/2″ center="no" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

カラム内のボックス内の文章だよ。

[/su_box]

[/su_column] [su_column size="1/2″ center="no" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

カラム内のボックス内の文章だよ。

[/su_box]

[/su_column]

[/su_row]

[su_tabs active="3″ mobile="desktop"]

[su_tab title="タブNo1″ disabled="no" anchor="" url="" target="blank" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

タブ内のボックス内の文章だよ。

[/su_box]

[/su_tab]

[su_tab title="タブNo2″ disabled="no" anchor="" url="" target="blank" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

タブ内のボックス内の文章だよ。

[/su_box]

[/su_tab]

[su_tab title="タブNo3″ disabled="no" anchor="" url="" target="blank" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

タブ内のボックス内の文章だよ。

[/su_box]

[/su_tab]

[/su_tabs]

[/su_spoiler]

[su_spoiler title="3カラムのアコーディオンはこんな感じ" open="no" style="default" icon="plus" anchor="" class=""]

[su_row]

[su_column size="1/3″ center="no" class=""]

これが1つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが2つ目のカラムだよ

[/su_column]

[su_column size="1/3″ center="no" class=""]

これが3つ目のカラムだよ

[/su_column]

[/su_row]

[su_tabs active="3″ mobile="desktop"]

[su_tab title="タブNo1″ disabled="no" anchor="" url="" target="blank" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

タブ内のボックス内の文章だよ。

[/su_box]

[/su_tab]

[su_tab title="タブNo2″ disabled="no" anchor="" url="" target="blank" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

タブ内のボックス内の文章だよ。

[/su_box]

[/su_tab]

[su_tab title="タブNo3″ disabled="no" anchor="" url="" target="blank" class=""]

[su_box title="タブの中にボックスあり" style="bubbles" box_color="#fc99fb" radius="5″]

タブ内のボックス内の文章だよ。

[/su_box]

[/su_tab]

[/su_tabs]

[/su_spoiler]

[/su_accordion]

もう正直打ち込んでる私が分からなくなってます。ごちゃっとしたコンテンツを小さいスペースで詰め込めるので工夫次第なのはわかっているのですが「ごっちゃあ」としたショートコードの組み合わせでわからなくなります。

みんな大好きスライダーもあるよ

[su_carousel source="media: 10119,10118,10117,10115,10116″ limit="6″ width="600″ height="230″ items="3″ title="no" autoplay="2000″]

これは正常に見れているのでしょうか。なめこ・ザ・ワールドの「ギザ」で出会えるなめこたちですが、見えていますか？ちゃんと流れていますか？

使っているのは「カルーセル」という機能で、画像がぼやけてると思いますが、この辺は調整すればなんとかなるはずです。めんどくて調整はしてないです。

できるんだよ～ってのが分かればOKなので、調整しないです。現在横幅300pxの画像を入れてるのですが、いまいち良い感じのリサイズされずに表示されてると思います。

カルーセルの設定は「width="600″ height="230″」にしてます。HEIGHTは220でも良いかも。この辺は、どんな画像を、どれだけきれいに表示したいかで変わってきます。