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

こんにちは。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>

 

ここにテキストテキスト
テキスト
テキスト

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

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

ここに本文 本文 本文

 

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

ここにテキスト
ここにテキスト
ここにテキスト

まとめ

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

本日は紹介しました。

 

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

 

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

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

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事