アメブロの囲み枠の幅を「テキストの長さ」に自動調整して表示させる方法

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

枠が大きくなってしまって不格好なんですけど直す方法はありますか？

よしたか

できますよ〜。

• 記事下の定型文
• お客様の声

よく使われる囲み枠ですがデザインのアンバランスさが気になる人もいますよね？

↓　↓　

囲み枠の弱く部分を消す方法

通常の囲み枠

記事エリアの端から端までが枠で囲まれます。

「枠内のテキストが少ない場合、囲み枠の幅が広くなりすぎる」

という体裁の悪さが気になりますよね？

特にパソコンで見ていると気になってきますね。

通常、囲み枠を表示させるHTMLは次の様に書きます。

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

枠内のテキストの幅に自動修正する方法

上にあったコードに「display:inline-block; 」を追加します。

枠内のテキストの最大の長さに合わせた枠の幅になります。

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

お好きな方をお使い下さい。

これが普通バージョンです。

これがテキスト自動修正バージョンです。

まとめ

デザインバランスにこだわる方もいらっしゃいますので

本日は紹介しました。

アメブロで活用したい方を活用してみて下さい(^^)

メルマガではその他にも役立つメルマガを配信中です。

ぜひ登録おねがいしま〜す(^^)