当サイトの一部にはプロモーションを含むことがあります

HTMLとCSSで囲み枠の幅を文字に合わせる方法とは?【コード付】

WordPress・PC

 

前回の記事で、文字の囲み枠を簡単に表示させる方法をご紹介しました。

 

ネットで公開されているコードをそのまま使うのもいいんですが、自分のサイトに合わせて色を変えたり、線の太さを変えたりすることはよくあります。

 

これは、コードを見ると指定されている色が分かりますので、その部分だけ自分の好きな色に変えればOKです。

例えば、青い囲み線からオレンジ色の囲み線に変えたい場合は、コード中の「#ffc06e」を「#ffa500」に変えればできます。

色は『原色大辞典』でお好きな色を探してみてください。

 

border: solid 2px #ffc06e;/*線*/

border: solid 5px #ffa500;/*線*/

 

線の太さも、数字を変えるだけでお好みの太さに変更できます。上記の例で、線の太さを「2px」→「5px」に変更すると、下の図のように変わりますので、お好きな太さに調整してみてください。

 

青い細線

オレンジ色の太線

 

今回は、囲み枠を文字の長さに合わせて自動調整する方法、そして囲み枠の角を丸くする方法をご紹介します。

 

スポンサーリンク

HTMLとCSSで囲み枠の幅を文字に合わせる方法

前回の記事の方法で囲み枠を作成すると、画面いっぱいの長さの囲み枠ができます。

 

青い線

 

要点を箇条書きで書く場合など、囲み枠の右端に大きな空白ができる場合は、文字の長さに合わせた囲み枠の方が見栄えがいいですよね。

 

一行コードを追加するだけで簡単にできます!
子テーマのスタイルシート(style.scc)を開いてください。

display:inline-block; を追加してください。

【CSS】

/* 文字の長さに合わせる */
.box-txt {
 display:inline-block;
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
}
.box-txt p {
 margin: 0; 
 padding: 0;
}

 

同じコードをビジュアルエディターのスタイルシート(editor-style.css)にも追加しておくと、ビジュアルエディター上でも反映してくれます。

 

それでは確認してみましょう。

 

テキストエディターで、以下のように入力してください。(または、Addquicktagに登録)

【HTML】

<div class="box-text">
 <p>ここに文章</p> 
</div>

 

テキストの長さに合わせた囲み枠

 

短くなりましたね。テキストの長さに合わせて自動的に枠の幅が変わります。

 

囲み枠の角を丸くする

囲み枠の角を丸くすると、見た目がやわらかい印象になります。

 

icon-check少し丸みをつけたい
icon-check大きく丸みをつけたい
icon-check角ごとに丸み具合を変えたい

 

どれも、一行コードを追加するだけで簡単にできます!

同じく、子テーマのスタイルシート(style.css)とビジュアルエディターのスタイルシート(editor-style.css)に以下のコードを追加します。

4つ角を同じ大きさで丸くする場合のコード

【CSS】

/* 4つ角すべて同じ丸み */
.box-4maru {
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
 border-radius: 10px;/*角の丸み*/
}
.box-4maru p {
 margin: 0; 
 padding: 0;
}

【HTML】

<div class="box-4maru">
 <p>ここに文章</p> 
</div>

 

それでは確認してみましょう。

 

4つ角に丸み

 

4つ角がすべて同じ大きさで丸くなりましたね。

 

※数字を変えれば、丸みの大きさを調整できますので、お好みの丸さになるまで数字をいじって確認してみてください。

 

角ごとに丸み具合を変える場合のコード

【CSS】

/* 角ごとに丸みを変える */
.box-maru {
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
 border-radius: 10px 0 10px 0;/*左上、右上、右下、左下*/
}
.box-maru p {
 margin: 0; 
 padding: 0;
}

 

数字の順に、左上、右上、右下、左下の角の丸みを指定します。

丸みをつけたくない角がある場合は、「0」と指定します。

【HTML】

<div class="box-maru">
 <p>ここに文章</p> 
</div>

 

それでは確認してみましょう。

 

角ごとに異なる丸み

左上と右下の角だけ丸みをつけてみました。

 

丸みをつける位置や数字を変えたりして試してみるのもおもしろいですね。

 

こんな時(↓)に便利だと思います。

4つ角すべてを丸くすると、ラベルとぴったり合わなくなってかっこ悪い。

 

こんなとき便利(変更前)


左上の角だけ丸くしない。(直角のままにする)

 

こんな時便利(変更後)

 

【CSS】

/* こんな時便利(変更後) */
.box-after {
 position: relative;
 margin: 2em 0;
 padding: 0.5em 1em;
 border: solid 3px #0000ff;
 border-radius: 0 10px 10px 10px;
}
.box-after .box-title {
 position: absolute;
 top: -27px;
 left: -3px;
 padding: 0 9px;
 height: 25px;
 line-height: 25px;
 vertical-align: middle;
 font-size: 17px;
 background: #0000ff;
 color: #ffffff;
 font-weight: bold;
 border-radius: 5px 5px 0 0;
}
.box-after p {
 margin: 0; 
 padding: 0;
}

【HTML】

<div class="box-after"><span class="box-title">POINT</span>
<p>ここに文章</p>
</div>

 

まとめ

コードを少しいじれば、自分のオリジナルの囲み枠を作ることができます。

 

スタイルシート(CSS)をいじるのはちょっと・・・という方でも、これは超簡単にできますので、練習がてらやってみてはどうでしょうか。勉強にもなると思います。

 

タイトルとURLをコピーしました