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

Wordpress

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

Theme:Luxeritas

WordPress:5.3.2

ZEBLINE同居

WP Speech Balloon同居

WP Fastest Cache Premium同居

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

カラム(Column)とアコーディオン

カラムは分け方を選べる

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

 

2つに分けるとこうなる(PC)

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

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

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

 

3つに分けるとこうなる(PC)

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

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

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

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

 

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

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

2カラムのアコーディオンはこんな感じ

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

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

どう見れてる?ちゃんとZEBLINEのマーカー引けてる?

avatar

3カラムのアコーディオンはこんな感じ

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

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

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

どう見れてる?ちゃんとZEBLINEのマーカー引けてる?吹き出しプラグインも一緒だぜ。

avatar

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

ZEBLINEのマーカーはアコーディオンの中にあると既に線が引かれた状態で出ると思います。これはしょうがないね。

avatar




カラム(Column)とアコーディオンとタブ

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

2カラムのアコーディオンはこんな感じ

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

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

タブNo1タブNo2タブNo3

ひとつめのだよ。

ふたつめだよ。

みっつめだよ。

どう見れてる?ちゃんとZEBLINEのマーカー引けてる?

avatar

3カラムのアコーディオンはこんな感じ

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

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

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

タブNo1タブNo2タブNo3

ひとつめのだよ。

ふたつめだよ。

みっつめだよ。

どう見れてる?ちゃんとZEBLINEのマーカー引けてる?吹き出しプラグインも一緒だぜ。

avatar

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

 

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

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

2カラムのアコーディオンはこんな感じ
タブの中にボックスあり

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

タブの中にボックスあり

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

タブNo1タブNo2タブNo3

タブの中にボックスあり

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

タブの中にボックスあり

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

タブの中にボックスあり

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

どう見れてる?ちゃんとZEBLINEのマーカー引けてる?

avatar

3カラムのアコーディオンはこんな感じ

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

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

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

タブNo1タブNo2タブNo3

タブの中にボックスあり

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

タブの中にボックスあり

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

タブの中にボックスあり

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

どう見れてる?ちゃんとZEBLINEのマーカー引けてる?吹き出しプラグインも一緒だぜ。

avatar

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

 

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

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

 

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

 

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

 

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

 

案外いろいろ組み合わせられるので、各自試して、遊んでみてね!

avatar

 




スポンサーリンク