WordPress個別サポート

Shortcodes Ultimateの「ノート」は文章を枠線で囲むことができますが、枠線ブロックの幅は画面いっぱいに広がっています。

Shortcodes UltimateのノートPCの幅は画面いっぱいになる

Shortcodes UltimateのノートPCの幅は画面いっぱいになる

枠線の幅を文章に合わせる方法を紹介します。

スポンサーリンク

枠線(ノート)の幅を文章に合わせる

上記のノートでも問題ありませんが、文章が短いときなど幅に合わせて狭い枠線にしたい場合は、次のようなCSSを使います。

/* Shortcodes Ultimateのノート幅を文章に合わせる */
.su-note {
    display: inline-block;
}

これで、ノートのサイズは入力した文章に応じて切り替わります。

文章に合わせた枠線幅に

文章に合わせた枠線幅に

個別に幅を切り替えたいとき

上記のCSSではすべてのノートが文章に合わせた幅になってしまいますが、個々のノートに応じて枠線の幅を切り替えたいときはクラス名を指定する方法があります。

それには、「ショートコードの挿入」‐「ノート」メニューの「クラス」に任意のクラス名(ここでは「auto-width」)を入力します。

任意のクラス名を入力

任意のクラス名を入力

ショートコードを挿入すると、クラス名が付いているのを確認できます。

ノートにクラス名が付く

ノートにクラス名が付く

あとは、該当するクラスのみに狭い枠線を付加するように前述のCSSを修正します。

/* Shortcodes Ultimateのノート幅を文章に合わせる */
.auto-width {
    display: inline-block;
}

これで、画面いっぱいの枠線と任意の幅の枠線を使い分けられるようになります。

画面いっぱいの枠線と文章幅の枠線

画面いっぱいの枠線と文章幅の枠線

WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズ・トラブル対応でお急ぎのときは
「カスタマイズがうまくいかない」「突然トラブルが発生した!」などでお急ぎのときはWordPressメールサポートで対応します。ご活用ください。
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク