記事の中で「お知らせ」や「講座内容」などで【囲み枠】を使うことがありますよね。
実際に使ってみると枠内のテキストの文字数が少ないのに、囲み枠が表示エリアの幅いっぱいに広がってなんかおかしい…ってことありませんか？

こんな感じに。。。

囲み枠幅いっぱい

なんかこのスキマが間が抜けたような感じになるんですよね(^^;

できたら囲み枠の中のテキストの文字数に合った囲み枠が欲しいですよね。

調べてみたらわたしでもできる簡単な方法が見つかりました。
この方法だと枠内のテキストに合わせて自動で枠の幅を調節してくれるので助かります。

こうなります！

囲み枠自動調整

このほうがスッキリしていいですよね！

囲み枠を枠内のテキストの文字数に合わせて自動調整する方法

方法は簡単です。
囲み枠を表示させる通常タグの中に、display:inline-block; を追加するだけです。

【幅全体に広がった枠】

～講座カリキュラム～
第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回　ゆる家事プランニング②&amp;総ざらい</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回　ゆる家事プランニング②&amp;総ざらい</div>
</div>

display:inline-block;　を追加するとこうなります

⇓⇓⇓

～講座カリキュラム～
第1回　ロジカルカウンセリング①
第2回　ロジカルカウンセリング②
第3回　ロジカルカウンセリング③
第4回　ハッピーフォトカウンセリング
第5回　ゆる家事プランニング①
第6回　ゆる家事プランニング②&総ざらい

 

簡単ですよね！display:inline-block;　を追加するだけです。追加するところを間違えるとうまく表示されないので注意してください。

こちらの　

display:inline-block;　をコピペして使ってください♪

難しいCSSとかいじらなくていいからわたしにもすぐにできました！幅全体に広がっているとスマホで記事を表示した時に切れてしまったりするので、自動調整してくれるのは助かりますよね。
ぜひ使ってみてくださいね～(#^^#)

 

最後までお読みいただきありがとうございました(#^^#)
 
この記事を読んで何かわからなかった事はありませんか？
きみこに直接メールで質問や相談してみたいという方はこちらからお願いします(*^^*)
感想をいただけるととてもうれしいです♫必ずお返事します！
↓　↓　↓

合わせて読みたい関連記事

WordPressの目次の「関連」と「共有」を消す方法 初心者さんがブログを始めるのは無料ブログとWordPressどっちがおすすめ？ ネットビジネスを始めるために～Gmailの作成方法とおすすめブラウザ～ アフィリエイトを始めるならまずはＡＳＰの【A8.net】を登録しよう♪ デスクトップに名前をつけて保存する～基本のパソコン操作～ WordPressプラグイン【All in One SEO Pack】でSEOを強化しましょう♪ 自動でアイキャッチ画像が入れられるプラグイン【Auto Post Thumbnail】をインストール 2019年あけましておめでとうございます♪

スポンサードリンク