WordPressプラグイン「Shortcodes Ultimate」のカスタマイズ方法

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

カスタマイズしなくてもけっこう使えるのですが、サイトに合わせて、もうちょっと色をこうしたいとか、フォントを変えたいとか、もう少しデザインしたいとき、カスタマイズ専用のCSSを設定することができます。

今回は「見出し」をカスタマイズしてみたいと思います(; ・`д・´)

デフォルトの見出し

まずは、デフォルトで見出しをひとつ作成してみます。

エディタメニュー「ショートコードを挿入」→「見出し」

コンテンツには Shortcodes Ultimate をカスタマイズするよ と記入して、その他はデフォルトのまま「ショートコードを挿入」ボタンで確定します。

Shortcodes Ultimate をカスタマイズするよ

コードはこのように挿入されます。

[su_heading]Shortcodes Ultimate をカスタマイズするよ[/su_heading]

「見出し」のスタイルはデフォルトの選択肢しかありませんので、基本この形になります。

設定済みの6つのCSS

Shortcodes Ultimateでもともと設定してあるCSSは以下の6つです。
「設定」→「カスタムCSS」を表示してみましょう。

blog-shortcode7

  1. content-shortcodes.css
    見出し(su_heading)、仕切り(su-divider)、スペーサ(su-spacer)、ハイライト(su-highlight)、ラベル (su-label)、Dropcap(su-dropcap)、フレーム(su-frame)、リスト(su-list)、ボタン(su- button)、テーブル(su-table)、QRコード(su-qrcode)
  2. box-shortcodes.css
    タブ(su-tabs)、スポイラー(su-spoiler)、アコーディオン(su-accordion)、引用(su-quote)、Pullquote(su-pullquote)、行(su-row)、カラム(su-column)、サービス(su-service)、ボックス(su-box)、ノート(su-note)、拡大(su-expand)
  3. media-shortcodes.css
    YouTube(su-youtube)、Vimeo(su-vimeo)、Screenr (su-screenr)、デイリーモーション(su-dailymotion)、文書(su-document)、Googleマップ(su-gmap)
  4. galleries-shortcodes.css
    スライダー(su-slider)、カルーセル (su-carousel)、ギャラリー(su-custom-gallery)
  5. players-shortcodes.css
    オーディオ(su-audio)、動画(su-video)
  6. other-shortcodes.css
    ツールチップ(su-tooltip)、プライベート(su-private)、メンバー(su-members)、ゲスト(su-guests)、投稿(su-posts)

今回カスタマイズする「見出し」はこのように設定されています。

/*        Heading
---------------------------------------------------------------*/

.su-heading-style-default {
    padding: 2px 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}
.su-heading-style-default .su-heading-inner {
    padding: 1em 0.5em;
    border-top: 4px solid #eee;
    border-bottom: 4px solid #eee;
}
.su-heading.su-heading-align-left { text-align: left; }
.su-heading.su-heading-align-left .su-heading-inner { padding-left: 0.2em; }
.su-heading.su-heading-align-right { text-align: right; }
.su-heading.su-heading-align-right .su-heading-inner { padding-right: 0.2em; }
.su-heading.su-heading-align-center { text-align: center; }

CSSのカスタマイズをする場合は、上記CSSをみて設定を確認してからカスタムCSSに新しい設定をしていきましょう。

カスタムCSSは既存のCSSを上書きしますので、デフォルトの設定をコピペして上書きしてしまえば、カスタムCSSをデフォルトにすることもできそうです。

カスタムCSSに新しいセレクタを追加する

「設定」→「カスタムCSS」を表示して、この黒いスペースがカスタムCSSを設定していくエディターです。

blog-shortcode9

content-shortcodes.cssの見出し(heading)部分を確認すると、「su-heading-xxxx」というクラス名がついていますので、今回追加するクラス名もそろえて

su-heading-custom

とします。あとは、ボーダーやフォントや色など好きな感じにカスタマイズします。カスタマイズ終了したら、「Save Changes」でCSSを保存します。

ちなみに今回追加したCSSは以下の通りです。

.su-heading-custom{
    border-top: 4px double #ffffff;
    border-bottom: 4px double #ffffff;
    padding: 5px 0;
    background-color: #cc3300;
    color: #ffffff;
    font-weight: bold;
}

見出しにカスタマイズ用の新しいクラスを追加する

サイズ 20 (文字サイズ)
マージン 50 (見出し下の余白)
クラス su-heading-custom (cssカスタマイズ用のクラス追加)

と変更してもう一度挿入してみます。

カスタムCSSの設定をしてしまえば、設定時のプレビューでも表示されます。

blog-shortcode10

実際の表示はこのとおりです。

Shortcodes Ultimate をカスタマイズするよ

文字が大きくなって、見出しの下の余白も大きくなってます。

コードはこのように挿入されています。

[su_heading size="20" margin="50" class="su-heading-custom"]Shortcodes Ultimate をカスタマイズするよ[/su_heading]

まとめ

ある程度、CSSの知識が必要になりますが、一から設定するより楽ちんなので、使えるものは使い倒して楽に作業をすすめたいですよね。

少しでも見やすいページにできるよう、うまいこと使っていきましょうぜ。

「Shortcodes Ultimate」はなかなかよろしいとお勧めしているもういっこの記事はこちら

WordPressプラグイン「Shortcodes Ultimate」がおもしろい!
まさに「究極のショートコード」「ショートコードの極み」というイメージでしょうか。このプラグインすごいです。 実際に使用する場面は限られるか...

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク