カスタマイズしなくてもけっこう使えるのですが、サイトに合わせて、もうちょっと色をこうしたいとか、フォントを変えたいとか、もう少しデザインしたいとき、カスタマイズ専用のCSSを設定することができます。
今回は「見出し」をカスタマイズしてみたいと思います(; ・`д・´)
デフォルトの見出し
まずは、デフォルトで見出しをひとつ作成してみます。
エディタメニュー「ショートコードを挿入」→「見出し」
コンテンツには Shortcodes Ultimate をカスタマイズするよ と記入して、その他はデフォルトのまま「ショートコードを挿入」ボタンで確定します。
コードはこのように挿入されます。
[su_heading]Shortcodes Ultimate をカスタマイズするよ[/su_heading]「見出し」のスタイルはデフォルトの選択肢しかありませんので、基本この形になります。
設定済みの6つのCSS
Shortcodes Ultimateでもともと設定してあるCSSは以下の6つです。
「設定」→「カスタムCSS」を表示してみましょう。
今回カスタマイズする「見出し」はこのように設定されています。
/* 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を設定していくエディターです。
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の設定をしてしまえば、設定時のプレビューでも表示されます。
実際の表示はこのとおりです。
文字が大きくなって、見出しの下の余白も大きくなってます。
コードはこのように挿入されています。
[su_heading size="20" margin="50" class="su-heading-custom"]Shortcodes Ultimate をカスタマイズするよ[/su_heading]まとめ
ある程度、CSSの知識が必要になりますが、一から設定するより楽ちんなので、使えるものは使い倒して楽に作業をすすめたいですよね。
少しでも見やすいページにできるよう、うまいこと使っていきましょうぜ。
「Shortcodes Ultimate」はなかなかよろしいとお勧めしているもういっこの記事はこちら
「Shortcodes Ultimate」についての記事は他にもアルヨ。