囲み枠の幅を枠内のテキストの長さに自動調整して表示させる方法

こんにちは。
『やさしいブログの作り方』の松田です。

記事下定型文やお客様の声を表示させる際によく使われる囲み枠。

こういうのです。

これを使用する際、通常は記事エリアの端から端までが枠で囲まれます。

ただ、特に２カラムを使っておられる方からすると、枠内のテキストに対して囲み枠の幅が広くなりすぎるという体裁の悪さを気にされる方がいます。

そのための回避策として囲み枠の幅を指定するという方法がありますが、この場合も枠内のテキスト量に応じた幅指定ではないので、場合によってはアンバランスになることがあります。

あるいはスマホ版で見た時に、画面の左側に枠が飛び出して表示されることもあります。＾＾；

で！

それらを問題なく解消できる方法を発見いたしました。（笑）

通常、囲み枠を表示させるタグは以下のように書きます。

<div style="background:#fcfcff; padding:15px; border:1px solid #3b5998; border-radius:10px; word-break:break-all;">ここに本文
本文
本文</div>

これに赤字の部分を付け足すと、枠内のテキストの最大の長さに合わせた枠の幅になります。

<div style="display:inline-block; background:#fcfcff; padding:15px; border:1px solid #3b5998; border-radius:10px; word-break:break-all;">ここに本文
本文
本文</div>

上がビフォー、下がアフターです。

ここに本文
本文
本文

枠の幅が気になっていた方はぜひトライしてみてくださいね。＾＾

最後までお読みいただきありがとうございました。

お知らせ

ご登録頂くと、ＬＩＮＥ＠スタートアップセミナーをプレゼント！
やさしいブログのＬＩＮＥ＠のご登録はこちらから

ＳＮＳを効果的に使うためのポイントが無料で学べます！
ネット集客を軌道に乗せるためのＳＮＳ活用講座（全７回）