記事の中で「お知らせ」や「講座内容」などで【囲み枠】を使うことがありますよね。
実際に使ってみると枠内のテキストの文字数が少ないのに、囲み枠が表示エリアの幅いっぱいに広がってなんかおかしい…ってことありませんか？
こんな感じに。。。
なんかこのスキマが間が抜けたような感じになるんですよね(^^;
できたら囲み枠の中のテキストの文字数に合った囲み枠が欲しいですよね。
調べてみたらわたしでもできる簡単な方法が見つかりました。
この方法だと枠内のテキストに合わせて自動で枠の幅を調節してくれるので助かります。
こうなります！
このほうがスッキリしていいですよね！
囲み枠を枠内のテキストの文字数に合わせて自動調整する方法
方法は簡単です。
囲み枠を表示させる通常タグの中に、display:inline-block; を追加するだけです。
【幅全体に広がった枠】
～講座カリキュラム～
第1回 ロジカルカウンセリング①
第2回 ロジカルカウンセリング②
第3回 ロジカルカウンセリング③
第4回 ハッピーフォトカウンセリング
第5回 ゆる家事プランニング①
第6回 ゆる家事プランニング②&総ざらい
第1回 ロジカルカウンセリング①
第2回 ロジカルカウンセリング②
第3回 ロジカルカウンセリング③
第4回 ハッピーフォトカウンセリング
第5回 ゆる家事プランニング①
第6回 ゆる家事プランニング②&総ざらい
これをWordpressの投稿ページのテキストをみるとこうなっています。
<div style=”border: 1px solid #F9F; padding: 10px; border-radius: 10px; background: #FFDBFF;”>～講座カリキュラム～
第1回 ロジカルカウンセリング①
第2回 ロジカルカウンセリング②
第3回 ロジカルカウンセリング③
第4回 ハッピーフォトカウンセリング
第5回 ゆる家事プランニング①
第6回 ゆる家事プランニング②&総ざらい</div>
これに display:inline-block; を追加します。
【テキスト】
<div style=”display: inline-block; border: 1px solid #F9F; padding: 10px; border-radius: 10px; background: #FFDBFF;”>
<div><strong>～講座カリキュラム～</strong></div>
<div>第1回 ロジカルカウンセリング① </div>
<div>第2回 ロジカルカウンセリング②</div>
<div>第3回 ロジカルカウンセリング③</div>
<div>第4回 ハッピーフォトカウンセリング</div>
<div>第5回 ゆる家事プランニング①</div>
<div>第6回 ゆる家事プランニング②&総ざらい</div>
</div>
display:inline-block; を追加するとこうなります
⇓⇓⇓
～講座カリキュラム～
第1回 ロジカルカウンセリング①
第2回 ロジカルカウンセリング②
第3回 ロジカルカウンセリング③
第4回 ハッピーフォトカウンセリング
第5回 ゆる家事プランニング①
第6回 ゆる家事プランニング②&総ざらい
簡単ですよね！display:inline-block; を追加するだけです。追加するところを間違えるとうまく表示されないので注意してください。
こちらの
display:inline-block; をコピペして使ってください♪
難しいCSSとかいじらなくていいからわたしにもすぐにできました！幅全体に広がっているとスマホで記事を表示した時に切れてしまったりするので、自動調整してくれるのは助かりますよね。
ぜひ使ってみてくださいね～(#^^#)
最後までお読みいただきありがとうございました(#^^#)
この記事を読んで何かわからなかった事はありませんか？
きみこに直接メールで質問や相談してみたいという方はこちらからお願いします(*^^*)
感想をいただけるととてもうれしいです♫必ずお返事します！
↓ ↓ ↓
