Shortcodes Ultimate で見出しの設定方法

  • LINEで送る

見出しを簡単にカスタマイズする方法

WordPress のプラグインである「Shortcodes Ultimate」は、いわゆる、究極のショートコードと言われるように、簡単にテーマを簡単にゴージャスにカスタマイズ出来るプラグインである。 その中の「Heading(見出し)」の設定方法を紹介します。

見出しの設定方法

Shortcodes Ultimate で見出しを設定するには、まず、編集画面のツールバーにある「ショートコードを挿入」をクリックします。

次に、様々なフィルタが表示されたポップアップ画面が表示されます。

その中から、「 見出し」を選択します。 選択すると下記の画面が表示されます。

「見出し」が選択されています。 まず、

スタイル :  デフォルト

サイズ    :  見出しの大きさ ( 7~48px の範囲で選択出来ます)

整列    :  見出しテキストの位置 (左、中央、右)

マージン :  ボトムマージン ( 0~200px の範囲で選択出来ます)

クラス  :  別のCSS クラスの設定も可能

コンテンツ :  見出しのタイトルなど

以上の設定が完了すると (コンテンツのテキスト以外はデフォルト設定です) プレビュー  ボタンをクリックして「プレビュー」を見てみます。

確認して、そのままで良ければ、 ショートコードを挿入 ボタンをクリックして、コードを挿入します。 下図が実際に表示された見出しです。

例1)

見出しの設定方法

下で「ショートコード」を確認することが出来ます。

ショートコードを見る

上が、ベーシックなアコーディオンでショートコードを見ることができます。 下が、Fancy accordion で同じショートコードを確認することが出来ます。

ショートコードを見る

例2)

見出しテキスト
ショートコードを見る

例3)

見出しの設定方法
ショートコードを見る

また、CSS のカスタマイズなどでも、変更などを試してみてください。

Shortcodes Ultimate の カスタムCSS を設定する方法は、管理画面の「ショートコード」 > 「設定」 > 「カスタムCSS」 から、

 

 

「heading(見出し)」の設定する方法では、「content-shortcodes.css」を下のテキストエディタにコピーして CSS の設定を変更したい所を変更ののち、 Save changes ボタンをクリックして変更を保存します。

下の画面では、ボーダーカラーを 「#999」及び「#eee]  から

「#00b9eb」 に変更したものです。

変更した結果は、下の画面になります。

 

この様に、それぞれ 「content-shortcodes.css」、「box-shortcodes.css」、「media-shortcodes.css」、「galleries-shortcodes.css」、「players-shortcodes.css」、「other-shortcodes.css」 を使用してカスタマイズする事が出来ます。

以上で、Shortcodes Ultimate で見出しの設定方法の完了です。

 

  • LINEで送る

SNSでもご購読できます。