[wordpress] プラグイン『Shortcodes Ultimate』で作成するボックスの高さを指定する方法

WordPressの世界では超有名なプラグイン『Shortcodes Ultimate』。インストールしている人はかなり多いのでは無いでしょうか? ただ全ての機能を使いこなしているかというと、、色々できるプラグインだけに、使えこなせていない(知らない)機能が沢山あります。今日は、その中から「ボックス」(タイトルと文章を枠で囲む)を作れるショートコードのカスタマイズ方法を紹介したいと思います。

基本的なショートコードの挿入方法

以下の手順でショートコードを挿入します。なお以下のGUI操作手順を飛ばして、直接、ショートコードを記入していく事も可能です。

  • 編集画面で「ショートコードを挿入」をクリック
  • 「タイトル」と「コンテンツ(本文)」を入力し、最後に「ショートコードを挿入」ボタンを押します
  • 上記手順を操作すると以下の様なコードが本文に入力されます。
    ショートコード

    表示例
    タイトル
    ここに文章を入力します。

カスタマイズ1

  • 色やコーナーの大きさなどを変更すると以下の様になります。

    ショートコード

    表示例
    タイトル
    ここに文章を入力します。

カスタマイズ2

  • 次に高さの指定方法です。これは、classを指定します。

  • この時、ショートコードの設定画面で「Custom CSS code」を入力し、そこに高さを指定します。

    今回、追加したカスタムCSS
  • すると、以下の様な表示になります。
    ショートコード

    表示例
    高さ設定
    PCなら250px
    タブレットなら500px
    スマホなら、高さを自動設定
    します。
Print Friendly, PDF & Email