【Shortcodes Ultimate】 カスタムCSSを設定してみた

更新日:

Shortcodes UltimateにカスタムCSSを適用してみました。

はじめに

Shortcodes Ultimate設定画面の開き方

ダッシュボード > ショートコード > 設定 

で設定画面を開きます。

変更したいクラスの確認方法

  1. ショートコードを挿入
  2. プレビュー表示
  3. F12を押す
  4. 開発者ビューで編集したい要素をクリック
クラスの命名規則
クラス名の命名規則は決まっているのである程度推測できます。
 例)su-spoiler-icon 

su:Shortcodes Ultimateの略です。
spoiler:ショートコードの種類です。
icon:CSSを適用する要素です。

カスタマイズ

スポイラー

コンテンツの表示・非表示を切り替えることができるのがスポイラーです。

今回はデフォルトスタイルをベースにカスタマイズしました。

カスタマイズ後

枠線を消しました。paddingがとられていなかったのでpaddingを追加しました。

paddingをとったところアイコンの位置がずれてしまったので調整しました。

ボックス

カスタマイズ前
カスタマイズ後

ボックスの設定をします。

タイトル部分の設定をします。

コンテンツ部分の設定をします。

その他はShortcode Ultimateのセレクタで指定します。

  • タイトルの文字色「title_color」
  • ボーダーの色「box_color」
  • 線の丸み「radius」

参考

-Shortcodes Ultimate
-, ,

Copyright© LESS , 2019 All Rights Reserved Powered by STINGER.