WordPress「Shortcodes Ultimate」のCSSをカスタマイズする方法

WordPressのプラグイン「Shortcodes Ultimate」を使えば、CSSやjavascriptなどの専門知識をもたなくても本格的なデザインや機能をショートコード一発で追加できます。

タブ、アコーディオン、ラベル、ボックスなどの機能が満載です。

便利なプラグインではありますけど、「Shortcodes Ultimate」のデザインは貼り付け時の編集画面で多少変えられても基本部分がほぼ決まっています。もう少し自分好みのデザインに近づけてみたいと思うことがあるかもしれません。

「Shortcodes Ultimate」のCSSをいじれば好みのデザインに変えられます。そのやり方についてです。

デフォルトのCSSを変更する

Shortcodes Ultimateのデフォルトスタイル(CSS)を一部カスタマイズして、見栄えを変えてみましょう。

ただし、CSSをあまりいじりすぎると時間が経ってから変更した部分がわからなくなって、管理しづらくなるかもしれません。なので、自分はできる限り基本のデザインを崩さず、少しいじるくらいでやめています。

今回のやり方では、WordPressのテーマフォルダにあるCSSファイルを使いません。

Shortcodes Ultimateの設定画面にある「カスタマイズ用のスペース(エディタ)」に書き込む方法でやってみます。

スポンサーリンク

「Shortcodes Ultimate」CSSカスタマイズの手順

例として、Shortcodes Ultimateの「スポイラー」を使ってみましょう。

スポイラーはタイトル部分をクリックするごとに内容が表示・非表示になる機能です。投稿画面で以下のようなショートコードの貼り付けるだけで実装できます。

↓ショートコード(以下の例は画像です)

shortcodes-ultimate スポイラー

↓結果(実物ではなく画像です)。

Shortcodes Ultimate スポイラー

タイトル部分をクリックすると中身「非表示のコンテンツ」が表示されます。

上の表示結果はスポイラーのデフォルトデザインです。この見た目をカスタマイズしてみましょう。

デフォルトスタイルのCSSクラス名を調べる

「Shortcodes Ultimate」の各機能にはCSSのクラスが設定されています。スポイラーならスポイラー専用のクラスがあるということです。このクラス名を特定することから始めます。

WordPressの投稿画面に、スポイラーのショートコードを貼り付けてみてください。貼り付けたショートコードの中身を見ます。

shortcodes-ultimate スポイラー

この「su_spoiler」の部分をクラス名探しのヒントにします。スポイラーに限らず、Shortcodes Ultimateのクラス名を探す場合はショートコードの「su_」という接頭辞を目印にするとわかりやすいです。

他にもWordPress管理画面、左側のメニューにある「ショートコード」と書かれた項目から調べる方法もあります。

ショートコードの文字をクリックすると、「使えるショートコード」の画面が登場。Shortcodes Ultimateの全機能が一覧表示されます。スポイラーを選ぶと詳細が表示されて、その中にショートコードの例が出てきます。

どちらの方法で探しても構いません。見つけた「su_spoiler」の文字を覚えておきましょう。

デフォルトのCSSクラス名を見つけ出す

WordPressの左側メニューからショートコードの「設定」を選択。

shortcodes-ultimate ショートコード 設定

Shortcodes Ultimateの設定画面が表示されるはずです。

画面を少し下に移動した部分に、「詳細情報」という項目があります。ここをクリックして展開しましょう。

展開して出てきた項目から、「shortcodes.full.css」のリンクをクリック。

shortcodes-ultimate shortcodes.full.css

別タブで画面が開きます。この画面内に書かれているものがShortcodes Ultimateのデフォルトスタイル(CSS)です。

スポイラーのクラス名を探してみましょう。先程調べた「su_spoiler」を参考に見つけ出します。デフォルトのCSSではショートコードの記述と違い、アンダーバー(su_spoiler)の部分がハイフン(su-spoiler)になっている点に注意してください。

手間なく探したいなら、キーボードの「ctrlキー+F」を押してみます。画面に小さな検索窓が出ますので、そこに「su-spoiler」と入力(アンダーバーではなく、ハイフンですよ!)。

ブラウザが自動で、検索条件と一致する場所を見つけ出してくれるはずです。

shortcodes-ultimate shortcodes.full.css su-spoiler

上のような、クラス名「.su-spoiler」がある場所を見つけ出せればオッケーです。

既存のCSSをカスタマイズ

スポイラーのタイトル部分をカスタマイズしてみます。

デフォルトのCSSを見ると、「.su-spoiler-title」というクラス名がスポイラーのタイトル部分に当てはまるようですね。この部分をコピーしましょう。

(ブラウザのデベロッパーツールや開発ツールを使える人なら、そっちで探すのがおすすめです。より正確にクラス名を見つけ出せます)

コピーしたら一旦、Shortcodes Ultimateの設定画面に戻ります。

カスタムCSSコード」という項目の横に大きなスペース(エディタ)が存在します。

shortcodes-ultimate カスタムCSSコード

ここに先程コピーした「.su-spoiler-title」のコードを貼り付けて入力してください。

このカスタムCSSコード部分に記述したコードが、スポイラーの見た目に反映されます。デフォルトのスタイルよりも優先順位が高いので、上書きが可能というわけです。

背景色を変えてみましょうか。

カスタムCSSコードに貼り付けた.su-spoiler-titleに、以下のコードを追加してみました。

.su-spoiler-title {
  background-color: #89cfeb; /* 空色 */
}

デフォルトの.su-spoiler-titleの中身にはもっとたくさんのコードが書かれていましたが、上のコードだけでも良いですし、元のコードをすべて貼り付けてから上のコードを付け足すかたちでも構いません。下手にいじりたくない人は、上のコードだけを記述するのが良いかもしれません。

追加が終わったら画面最下部にスクロールして、「変更を保存」のボタンを押します。

CSSカスタマイズの反映を確認

実際にスポイラーのカスタマイズが上手くいっているのか確かめてみましょう。

WordPressの投稿記事にスポイラーのショートコードを入力し、下書きを保存もしくは保存を押した後、投稿した記事のページやプレビュー画面を開いてみてください。

無色だったスポイラーの背景色がカスタマイズした背景色に変わっていれば成功です。

Shortcodes Ultimate スポイラーのタイトル背景色を空色にカスタマイズ

もし反映されなかったら、ブラウザのキャッシュが残っている可能性があります。キャッシュを消してページを再読込しましょう。

>>【関連記事】:CSS変更が反映されなければブラウザのキャッシュを消してみる

それでも反映されなければコードの記述が間違っているのかもしれません。Shortcodes Ultimateの設定画面に戻り、コードが間違っていたら修正して再び表示させて背景色の変化を確認します。

見栄えの悪い点線を消してみる

スポイラーを実際使ってみるとわかるでしょうが、タイトル部分をクリックすると黒い点線の枠が表示されます。

Shortcodes Ultimate スポイラーのタイトル背景色を空色にカスタマイズ

(上で紹介したタイトル背景色をカスタマイズする方法の結果と同じ画像です。よく見ると、タイトルの周囲に黒い点線が表示されています)

点線があると目立つものの見栄えがあまりよくないので、この部分をカスタマイズで非表示にしてみましょうか。

デフォルトのCSSにある「.su-spoiler-title:focus」クラスをコピーし、カスタムCSSコードのスペースに貼り付けます。

中身の「outline:」より後の部分を「none;」に書き換えて保存しましょう。

.su-spoiler-title:focus {
  outline: none; /* currentColor thin dotted を none に書き換え*/
}

カスタマイズ後、スポイラーのタイトル部分をクリックしても黒い点線の枠が表示されなくなりました。

Shortcodes Ultimate スポイラーのタイトル周囲の点線枠を消す

デフォルトのCSSは消えない

上でご紹介したShortcodes Ultimateの設定画面でカスタマイズする方法であれば、デフォルトのスタイルを書き換えません。デフォルトのCSSが存在してもカスタマイズのCSSが優先されて画面に表示されるだけだからです。

カスタマイズのコードを書き込んでも元のスタイル自体は残っていますので、デフォルトのデザインに戻すのは簡単です。設定画面に追加したカスタマイズ用のCSSのコードを消してしまえば良いだけです。気軽に作業してみましょう。

今回はスポイラーを例にカスタマイズしてみました。タブやリンクといったその他のShortcodes Ultimateの機能も、同様の流れで見た目をカスタマイズできます。ぜひチャレンジしてみてください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座