この記事では、WordPressの記事で文章を枠で囲む方法をご紹介します。
誰でも簡単にできる！コピぺOK！
私がWordPress初心者ということもあり、ブログ作成にあたり学んだことや試していることをここに残したいと思い記事を書いています。
装飾がない文章よりも、枠やカラーでメリハリをつけたほうがとても見やすくなり、読者からしてもわかりやすくなると思います。
文章を枠で囲むとは？
以下のように、文章を枠で囲むイメージです。枠は色々なデザインがあります。
枠をつけることでパッと目を引く効果があります。伝えたいことや大切なことを枠内に書くことができます。
文章を枠で囲む方法
たったの2ステップです。
①文章記入の際、「＋」を押して「ショートコード」を選択
②でてきた枠の中に後述するコードを貼り、「文章が枠で囲われます」の部分を任意の文章に変更
注意：コピペした際に『”』が全角になっていませんか？コードをコピペしたのにうまく表示されない時は、貼り付けをしたあとに全角になっていることが原因の一つですので、半角になっているか確認してみてください。
枠の例
枠の作り方がわかったところで、実際に作成してみましょう。
以下にいくつか枠を作成するためのコードを記載しました。二重線やドット、切り取り線などの枠が作成できます。お気に入りを見つけてください。枠の色を変えることもできます。
枠の色を変えるには、「#F9C1CF」の部分を好きなカラーコードに変更してください。私はカラーサイト.com（https://www.color-site.com/）というところを参考にしています。
上のコード：<div style=”border: 5px double #F9C1CF; padding: 10px; border-radius: 10px; background: ;”>文章が枠で囲われます</div>
上のコード：<div style=”border: 5px solid #F9C1CF; padding: 10px; border-radius: 10px; background: ;”>文章が枠で囲われます</div>
上のコード：<div style=”border:5px dashed #F9C1CF; padding:10px;border-radius:10px;”>文章が枠で囲われます</div>
上のコード：<div style=”border:5px dotted #F9C1CF; padding:10px;border-radius:10px;”>文章が枠で囲われます</div>
いかがでしょうか？枠は作成できましたか？
最後に
読んでくださってありがとうございます。記事が参考になれば嬉しいです。
私は、2024年 丁寧な暮らしを意識していきたいと思っています。
その他、お金のこと、グルメのこと、美容のことをゆるっと綴っています。
よければ他の記事も読んでいただけたら嬉しいです。
ありがとうございました。
コメント