PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

ワードプレスで「角を丸くする囲み枠」のコピペ用サンプルとソースコード集

スポンサーリンク

角を丸くする囲み枠ロゴ画像

こんにちは、解説ゾロです!

ワードプレスの「囲み枠」って、とっても楽しいです・・・よね!笑

本日は「角を丸くする」と、もっと楽しくなる内容です。
ここに文字や文章
ここに文字や文章
こんな感じです!
キッチリした四角の「囲み枠」も、オフィシャル向けにはいいのですが・・・角を丸くするとおしゃれなデザインが生まれます。
2か所だけを丸くしてみると、こんな風におしゃれになったりします。楽しくないですか!(楽しいのは私だけ?!笑)
ここに文字や文章 
今日は、ワードプレスで「角を丸くする囲み枠」をコピペで簡単に使えるサンプル画像とソースコード集です。コードを書く場所など実際のコード全文と画像を見ながら詳しく解説いたします。ホントに楽しいので一緒にやりましょ!
前回の記事はこちら
paddingとmarginで上下左右の余白をバラバラに個別指定する7つの書き方
「padding」と「margin」をバラバラに個別指定する7つのコードの書き方を実際の画像を見ながらスッキリわかるように丁寧に詳しく解説いたします。ご自分が入れたい場所に余白スペースを簡単に入れられるようになります。楽しいので、一緒にやりましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

ワードプレスで「角を丸くする囲み枠」のコード

「囲み枠」の四隅の角を丸くするには「border-radius」という、コードが活躍します。

この「border-radius」は、ボーダーラインスタイルの種類(プロパティ)の1つで、角を丸くして!と、指定するコードです。

「radius」は半径という意味で、指定する時は半径値で調整しますが、そんなことは気にせずに、実際にコードを書いてみればすぐに身に付きます。

角を丸くする囲み枠「border-radius」の読み方

四角の角を丸くするには「border-radius」というコードを使うと、簡単に角を丸くすることができます。「radius」読み方は「レイディアス」といいますが「ラディアス」や「ラディウス」と呼んでる方もいるようです。

スポンサーリンク

ワードプレスの「角を丸くする囲み枠」をコピペで使う

サンプルのソースコードを使って、すぐに角が丸い囲み枠を使う場合は、
  1. ソースコードをコピー
  2. テキストの画面にペースト
で、すぐに「角が丸い囲み枠」を使うことができます。

ワードプレスで「角を丸くする囲み枠」のコードをペーストする場所

コードをペーストしたり、書く場所は「横長の囲み枠」も「文字幅の囲み枠」も「padding」や「margin」も、みな同じ場所で、いつも記事を書いている、ダッシュボードの
の「投稿」をクリックして、
の「投稿を編集」の画面に変わりましたら、
の「ビジュアル」から「テキスト」の画面にポチっと変更して、
のように「テキストの画面」にコードをペーストしたり書いたりすればコードが実行されます。

角を丸くする囲み枠の書き込む場所

スポンサーリンク

ワードプレスで角を丸くする囲み枠のコードは「border-radius」

「角を丸くしたい囲み枠」の場合に追加するコードは、

border-radius

です。

「角を丸くする囲み枠」「border-radius」の書き方

例えば、下記に角が直角の普通の囲み枠があります。この囲み枠の全体のコード border-radius: 10px;  を追加してみます。

「10px」という数値は任意で入れてみましたが、この数値を変更すると、丸みが変わります。他の指定している数値も変えてみると楽しいです・・・たぶん!

そして、指定する「○○px」(数値)の数で、反映される場所が変わるのも楽しい部分です。
  • 1つの場合は、4つの角を一括で同じ数値で指定します。
  • 2つの場合は「左上」と「右下」
  • 3つの場合は「左上」と「右下、左下」と「右下」
  • 4つの場合は「左上」「右上」、「右下」、「左下」

 border-radius: 10px;  の場合は、数値が1つなので、4つの角に同じ「10px」分の丸みが指定されるということです。では、全文のコードに追加してみます。

ここに文字や文章
<div style=” border: 1px solid; border-radius: 10px; padding: 10px; “>ここに文字や文章</div>
すると、こんな風に角が取れて優しい枠が完成します。
ここに文字や文章
簡単に角を丸くすることができます・・・よね!笑
怒りんぼも、こんな風に簡単に角が取れるとイイですね!(スミマセン余談でした。笑)

ワードプレスで囲み枠の「角を丸くする」サンプルの見方

おしゃれな「角を丸くする囲み枠」サンプルは次のように表示しています。

表示される囲み枠の「デザイン」
コピペ用の「ソースコード」
各ソースコードの簡単な「命令内容」
特に「説明」がある場合のスペース

ワードプレスで囲み枠の「角を丸くする」サンプルとコード集

それでは、シンプルな角が丸い囲み枠から徐々に楽しいデザインに・・・笑!

1.ここに文字
<div style=”border: 1px solid; border-radius: 10px; padding: 10px;”>1.ここに文字</div>

枠線の情報=border
 枠線の種類=実践(solid)
 枠線の太さ=1px

角を丸く=border-radius
 丸さ=四つの角 10px

枠内の余白=padding
 余白の数値=上下左右の余白 10px


2.ここに文字
<div style=”border: 4px double; border-radius: 15px; padding: 10px;”>2.ここに文字</div>

枠線の情報=border
 枠線の種類=二重線(double)
 枠線の太さ=4px

角を丸く=border-radius
 丸さ=四つの角 15px
枠内の余白=padding
 余白の数値=上下左右の余白 10px


3.ここに文字
<div style=”border: 3px dashed; border-radius: 20px; padding: 10px;”>3.ここに文字</div>

枠線の情報=border
 枠線の種類=破線(dashed)

 枠線の太さ=3px

角を丸く=border-radius
 丸さ=四つの角 20px
枠内の余白=padding
 余白の数値=上下左右の余白 10px


4.ここに文字
<div style=”border: 8px dotted; border-radius: 25px; padding: 10px;”>4.ここに文字</div>

枠線の情報=border
 枠線の種類=点線(dotted)
 枠線の太さ=8px

角を丸く=border-radius
 丸さ=四つの角 25px
枠内の余白=padding
 余白の数値=上下左右の余白 10px


5.ここに文字
<div style=”border: 1px solid; border-radius: 5px; padding: 10px; background: #afeeee;“>5.ここに文字</div>

枠線の情報=border
 枠線の種類=実践(solid)

 枠線の太さ=1px
角を丸く=border-radius

 丸さ=四つの角 5px
枠内の余白=padding
 余白の数値=上下左右の余白 10px
背景色=background: #afeeee(水色)


6.ここに文字
<div style=”border: 2px solid #0000ff; border-radius: 15px; padding: 10px; background: #afeeee;“>6.ここに文字</div>
枠線の情報=border
 枠線の種類=実践(solid)
 枠線の太さ=2px
 枠線の色=#0000ff(紺)
角を丸く=border-radius
 丸さ=四つの角 15px
枠内の余白=padding
 余白の数値=上下左右の余白 10px
背景色=background: #afeeee(水色))

7.ここに文字
<div style=”border: none; border-radius: 20px; padding: 10px; background: #ffff00;”>7.ここに文字</div>

枠線の情報=border
 枠線の種類=無し(none)
角を丸く=border-radius
 丸さ=四つの角 20px

枠内の余白=padding
 余白の数値=上下左右の余白 10px
背景色=background: #ffff00(黄色)

枠の線を消してスッキリしたい場合は 「bordernone 」を書くことで、枠線が消えます。

8.ここに文字
<div style=”border: 4px dashed; border-radius: 20px; padding: 10px; background: #0000ff; color: #ffffff;”><strong>8.ここに文字</strong></div>

枠線の情報=border
 枠線の種類=破線(dashed)
 枠線の太さ=4px
角を丸く=border-radius
 丸さ=四つの角 20px

枠内の余白=padding
 余白の数値=上下左右の余白 10px
背景色=background: #0000ff(青)
枠線・文字の色=color: #ffffff(白)

枠の線種は、破線なのですがバックが白なので枠線の色も白にすると、このようにトゲトゲを表示させることができます。楽しいでしょ・・・笑

9.ここにタイトル
ここに文字や文章を入れる
<div style=”position: relative; border: 2px solid#0000ff; border-radius: 0px 20px 20px 40px; padding: 20px 10px;”>
<div style=”position: absolute; top: -15px; left: 15px; background: #0000ff; color: #ffffff; padding: 0 10px;”><b>9.ここにタイトル</b></div>
<div style=”color: #000000;”>ここに文字や文章を入れる</div>
</div>

タイトル配置=position: relative枠線の情報=border
 枠線の種類=実践(solid)
 枠線の太さ=2px
 枠線の色=#0000ff(青)
角を丸く=border-radius
 丸さ=左上角 0px
    右上角 20px
    右下角 20px
    左下角 40px

枠内の余白=padding
 余白の数値=上下の余白 20px
       左右の余白 10px
タイトル配置=position: absolute; top: -15px; left: 15px

タイトル背景色=background: #0000ff(青)
タイトル文字色=color: #ffffff(白)
 枠内の余白=padding
  余白の数値=上下の余白 0
        左右の余白 10px
文字色=color: #000000(黒)


10.ここにタイトル
ここに文字を入れる
<div style=”position: relative; border: 2px solid #ff99ff; border-radius: 140px 155px 200px 95px / 15px 30px 115px 185px; padding: 20px 10px;”>
<div style=”position: absolute; top: -15px; left: 15px; background: #ffffff; color: #ff99ff; padding: 0 10px;”><b>10.ここにタイトル</b></div>
<div style=”color: #ff00ff;”>ここに文字を入れる</div>
</div>

タイトル配置=position: relative
枠線の情報=border
 枠線の種類=実践(solid)
 枠線の太さ=2px
 枠線の色=#ff99ff(ピンク)
角を丸く=border-radius
     変形です!笑

 

枠内の余白=padding
 余白の数値=上下の余白 20px
       左右の余白 10px

タイトル配置=position: absolute; top: -15px; left: 15px

タイトル背景色=background: #ffffff(白)
タイトル文字色=color: #ff99ff(ピンク)
 枠内の余白=padding
  余白の数値=上下の余白 0
        左右の余白 10px

文字色=color: #ff00ff(濃ピンク)

「border-radius」をスラッシュで指定するととっても楽しい丸みを表現できます。

11.ここに文字
<div style=”border: 1px solid; border-radius: 60px 0 60px 0; padding: 30px;”>11.ここに文字</div>

枠線の情報=border
 枠線の種類=実践(solid)

 枠線の太さ=1px

角を丸く=border-radius
 丸さ=左上角 60px
    右上角 0px
    右下角 60px
    左下角 0px
枠内の余白=padding

 余白の数値=上下左右の余白 30px


12.ここにも文字
<div style=”border: 3px dashed; border-radius: 50%; padding: 10px; text-align: center; background: #e6002f; color: #ffffff;”><strong>12.ここにも文字<br />
</strong></div>

枠線の情報=border
 枠線の種類=破線(dashed)
 枠線の太さ=3px
角を丸く=border-radius
  丸さ=四つの角 50%

枠内の余白=padding
 余白の数値=上下左右の余白 10px
文字を中央=text-align: center
背景色=background: #e6002f(赤)
枠線・文字の色=color: #ffffff(白)

「border-radius」の指定を50%にすると、楽しいでしょ?・・・笑

まとめ

角を丸くするには「border-radius」というコードを追加すれば簡単です。
四角を指定する値を色々変えて見るとインパクトあるデザインにもなる「border-radius」です。
サンプルのソースコードの数値を変更して試してくださいませ。楽しいです!笑
今年こそスキルアップしたいなぁ!の方は、オンラインで学べる、ワードプレスのノウハウが手に入る「完全サポートコース」や、初心者から、エキスパートまで対応した、AIを学ぶならアイデミープレミアム 、現役のプロに質問もできる、『デイトラ』で仕事につながるWebスキルを身につけよう! のオンラインスクールで身につけちゃいましょ!もう、人に聞かなくても自分で解決!
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!
タイトルとURLをコピーしました