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;
}

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

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

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

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク