サンプルあり!Shortcodes-Ultimateのスポイラー(アコーディオン) にカスタムCSSを設定する【WordPressプラグイン

「Shortcodes Ultimateの使い方が分かったのだけど、ちょっとデザインを変えたいな~」「カスタマイズをしてみたい!」という方へ。この記事は「Shortcodes Ultimate」をカスタマイズする方法をお伝えします。自分好みのデザインをしてブログになじませれば可読性が上がってアクセスアップにつながるかも!

◆まえがき

こんにちは!ドにゃロン@Donyalonです。(2018/11/5)

・Shortcodes-Ultimate紹介

ブログを運営しているあなた!必須のプラグインってありますよね?

私の場合は「Shortcodes Ultimate」です!このプラグインには本当にお世話になっています。

特に「スポイラー」というアイテム、日本のWeb界隈では「アコーディオン」と呼ばれています。

コ レ !

これです。コレコレ。コレがないとやっていけません

上のようなスポイラーを編集画面では次のように記述しています。

もはや、標準デザインレイアウトの一部になっています。(これがないと、記事が間延びして読んでいられない。)

ただ使っているうちに、自分の悪いクセでw装飾したいとか形を変えたいとか、だんだん欲が出てきたり、機能的に削りたい(アニメーション)ところが出てきたりしたので、調べて、試して、まとめてみました。

・スポイラーの 標準スタイル紹介

カスタマイズする前にデフォルトスタイルを確認して、カスタマイズのポイントを絞りましょう。

spoilerアイテムは3つのスタイルだけが選べます。色などは変えられません

デフォルトスタイル

これは「デフォルト」スタイルです。

ファンシースタイル

これは「ファンシー」スタイルです。

シンプルスタイル

これは「シンプル」スタイルです。アイコンは表示されないようです。

私は今まで二番目の「ファンシー」というのをこのまま使ってきたのですが、

①幅を変えたい
②フォントの大きさを変えたい
③枠の色・形式を変えたい
④アニメーションが煩わしいので切りたい

という気持ちが強くなってきました

(注)このブログのカスタマイズは「ファンシースタイル」を前提に行っています。

・自作CSSとの比較は?

実はここまで何度もCSSでスポイラーを作ろうと試して来ました。

全くの素人状態から1年近く経ちCSSが分かってきて、ついに自作CSSが出来たのですが…

inputとlabelを使うタイプは個々のスポイラーごとに異なるid番号をつけなくてはならず、気軽にサクサクと設置するわけにはいきませんでした。

detailとsummaryを使うタイプはIEとEdgeが対応しておらず使用をためらいます。

「Shortcodes-Ultimate」のスポイラーなら気軽にサクサクと使えるので便利!と改めて実感しました。

スポンサーリンク

◆カスタムCSSを設定する方法

普通「CSSでカスタマイズする」と言うと、子テーマにカスタムCSSを書くと思いますよね?


無料テーマ「Cocoon」の場合

無料テーマ「Luxeritas」の場合

ところが子テーマに書いても、Shortcodes-Ultimate本体のCSSで上書きされてしまいます。(CSSが設定されていない項目ならOK:背景画像など)

じゃあどうするかと言うと…

「Shortcodes-Ultimate」が独自に「カスタムCSS」を記述するスペースを用意してくれているんです!

もう本当に至れり尽くせりで、頭が下がります。
m(_ _)m

・設定方法(全体指定)

ダッシュボードから「ショートコード」「設定」を選択して「shortcodes-ultimate>設定」画面を出します


ここから設定に入って

この中に書き込みます

「custom css」の記入欄に追加したいCSSを「.自作のクラス名{プロパティ:値;}」で記述します。

当ブログの場合、通常の段落にはCSSで左右のマージンを「margin-left:4vw;」と「margin-right:4vw;」を設定してあるので、スポイラーも同じレイアウトにしてみます。

先程のcss記入欄に「.std{margin:0px 4vw 10px 4vw;}」と記述します。(ちなみにマージンは上右下左の順に記述。vwというのはデバイスの画面表示幅を100とした場合の割合)


記述の例

そして、ショートコードの […] の中に「class=”std”」と入れればOKです。

何も指定しないもの

これは「ファンシー」スタイルです。

クラス「std」を追加したもの

これは「ファンシー」スタイルです。

実際の編集画面ではこのようになっています。


「class=”std”」に注目

ところで、SUのスポイラーは「タイトル」「コンテンツ」「開閉アイコン」などの要素で構成されています。

上記の記述方法の場合は全体指定になり全ての要素に適用されますが、各要素別に指定されている場合は上書きは出来ないようです(調査中)。

・部分指定

「タイトル」だけ、「コンテンツ」だけ、のように一部分(既存のクラス)を指定したい場合は「.自作のクラス名 .既存のクラス名{プロパティ:値;}」で記述します

例:「.l-ttl .su-spoiler-title{font-size:1.1em}」タイトル(.su-spoiler-title)を本文より少し大きめに指定

◆カスタムCSSを使用する

「Shortcodes Ultimate」にカスタムCSSを使う方法には2つあります。

・方法その1(新規で作成時)

1つ目は編集画面のボタンから作成する場合です。

挿入時のダイアローグの「別のCSSクラス」欄に先程設定したCSSのクラス名をピリオド無しで記入
良い例:「std」◯
悪い例:「.std」✕

・方法その2(既存を修正時)←オススメ

2つ目はすでに記述してあるものを修正するやり方です。先程例に出したのはこちらです。

ショートコードの初めの[]内に、半角スペースに続けて「class=”クラス名”」を挿入します。

以下、こちらの方法でカスタムCSSを設定していきます。

スポンサーリンク

◆カスタムCSSの使用例

・その1:p(通常段落)と同じ幅に

先程の例です。カスタムCSSの記述は「.std{margin:0px 4vw 10px 4vw;}」

デフォルトスタイル

これは「デフォルト」スタイルです。

ファンシースタイル

これは「ファンシー」スタイルです。

シンプルスタイル

これは「シンプル」スタイルです。アイコンは表示されないようです。

どれもうまく効いています♪

・その2:背景色をつける(全体指定)

カスタムCSSの記述は「.bgc{background-color:#dcf}」

デフォルトスタイル

タイトルに背景色が設定されていないようで、全体に色が付きますね…

ファンシースタイル

タイトルのみに背景色が設定してあるのでしょうか。想定していたような色の付き方になっています。

シンプルスタイル

色が全然つきませんね…「タイトル」と「コンテンツ」両方に背景色が設定してあるのかな?

スタイルごとに着色の様子が違うのが分かりました。

・その3:タイトルだけを着色

種類別に色を着ける事を想定して…
カスタムCSSの記述は「.orange .su-spoiler-title{background: #ffe4c3;}」

デフォルトスタイル

これは「デフォルト」スタイルです。

ファンシースタイル

これは「ファンシー」スタイルです。

シンプルスタイル

これは「シンプル」スタイルです。

皆タイトルだけを着色できました。

・その4:幅を可変にする(インラインブロック化)

カスタムCSSの記述は「.iln{display:inline-block;min-width:250px;}」

”デフォルトスタイル”

これは「デフォルト」スタイルです。

ファンシースタイル

これは「ファンシー」スタイルです。

シンプルスタイル

これは「シンプル」スタイルです。アイコンは表示されないようです。

これも上手く効いていますが、横並びにするかしないかをどうやってコントロールすれば良いのか…今後の課題です(汗)

・その5:枠を破線にする

デザインの統一性を出すために点線にして枠を視覚的に弱めたかった!

カスタムCSSの記述は「.dsd{border-color:#ccc;border-style:dashed;}」

デフォルトスタイル

これは「デフォルト」スタイルです。

ファンシースタイル

これは「ファンシー」スタイルです。

シンプルスタイル

これは「シンプル」スタイルです。アイコンは表示されないようです。

これも上手く効いています!
イイネイイネ

・その6:タイトル部分の字「だけ」を大きく

タイトルがどうも小さすぎるのを何とかしたい。カスタムCSSの記述は「.L-ttl .su-spoiler-title{font-size:1.02em}」

スポイラーのタイトル

これは「デフォルト」スタイルです。

スポイラーのタイトル

これは「ファンシー」スタイルです。

スポイラーのタイトル

これは「シンプル」スタイルです。アイコンは表示されないようです。

いいけど…色を薄くしないと視覚的に重いかな?

・その7:アニメ(transiton)をなくす

開閉時にアニメーション(transition)があるのがモタモタしてイライラする。(追記:これは私のデスクトップマシンの性能が低いせいだったようで、新しいノートパソコンだとヌルヌルでした。)

カスタムCSSの記述は「.no-trn .su-spoiler-content {-webkit-transition: 0s;transition: 0s; -ie-transition: 0s;}」

スポイラーのタイトル

これは「デフォルト」スタイルです。

スポイラーのタイトル

これは「ファンシー」スタイルです。

スポイラーのタイトル

これは「シンプル」スタイルです。アイコンは表示されないようです。

これスゴイ!目茶苦茶軽くなる!全部にコレを適用しても良いくらいだ!

スポンサーリンク

◆複数のスタイルを重ねて使用する

使用時に、半角スペースに続けてスタイルを追加してゆけば良い。

先程の例だと「class=”no-trn L-ttl”」を挿入するとアニメーションは消えた上にタイトルが大きくなる。

以降はファンシースタイルで、クラスを追加しないものと追加したものを比較します。

・その1:タイトル大きく+段落と同じ幅

追加する記述は「class=”std L-ttl”」

スポイラーのタイトル

クラスを全く追加していないスポイラー。

スポイラーのタイトル

クラスを追加したスポイラー。

・その2:タイトル大きく+アニメなし+段落幅に+タイトルに色

追加する記述は「class=”no-trn L-ttl std orange”」

スポイラーのタイトル

クラスを全く追加していないスポイラー。

スポイラーのタイトル

クラスを追加したスポイラー。

クラスを4つ追加すると大分オリジナルっぽくなってきます。

◆Shortcodes-UltimateカスタムCSS2018年末版

・自作ボックスのスタイル

これが自作のボックスです。

自分のボックスとおそろいのデザインで開閉ボックスとして使用した例です。

追加クラスとして「class=”iln Nbx”」を加えています。

カスタムCSSを表示

.Nbx{border: 3px solid #82c1fb;border-radius: 10px;background: #fff;color: #333;margin:0px 5vw 10px;}
.Nbx .su-spoiler-title{font-size: 1.1em;top: 0px;left: 5px;display: inline-block;
color:#82c1fb;background-color: rgba(255,255,255,0);border:none;}
.Nbx .su-spoiler-content {padding:0px 12px 14px ;}
.Nbx .su-spoiler-icon{top:5px;font-size:21px;}

ただの「.Nbx」で全体を、「.Nbx .su-spoiler-title」でタイトルを、「.Nbx .su-spoiler-content」でコンテンツを、「.Nbx .su-spoiler-icon」で開閉用のアイコンをカスタマイズしています。

これら全部を「class=”Nbx”」で一気に適用できるのが便利です。

・グリーンモニタ風

ソースコードを表示する際に使用しようかなと思いグリーンモニタ風にしてみました。

このサンプルは class=”std no-trn GMN”を追加して、標準幅でアニメを切ったグリーンモニタ風としています。

カスタムCSSを表示

.GMN{
color: #99d692;
background: #0a2513;
border: 3px solid #bce;
margin-bottom:0.5em;
}
.GMN .su-spoiler-title{
border:none;
background-color:black;
font-size:1em
}
.GMN .su-spoiler-content{
padding-top: 5px;
line-height: 1.6em;
}

ちなみに、自作のCSSボックスの追加クラスに同じ名前「GMN」を使ったところ、こちらの表示にもそれが反映されてしまいました。

名前が被らないようにしないといけません(あちらの名前を変えました)

◆自分のセンスを活かしたデザインで

「Shortcodes-Ultimate」を活用させて頂きましょう!

作者様に感謝!感謝!感謝!
m(_ _)m

コメント

タイトルとURLをコピーしました