サイトによっては、結構大きい枠を作りたい。いう方もいると思うので紹介しておきます。50pxちょっと、わかりにくいと思うので、コードの説明をします。簡単に説明すると、以下の内容となっていますのでご確認ください。50px;角の丸みや大きさが「50px」ここの部分を自分なりに調整して、枠線の太さの調整、文字と枠の余白の調整、角の丸みや大きさの調整で、自分だけのオリジナル囲み枠を作成してみてください。他のスタイルでも、サイズを変更する事ができますので、試してみてください。CSSを使わず、コードのコピー&貼り付けをするだけなので、とても便利ですよね。触ってみて、あなただけのオリジナルの枠を作ってみても面白いと思います。文章の囲み枠ボックスのデザイン一覧表ワンコイン(500円)で45個のコードコピペ可能。面倒だからコピペで時短させたい。そんな方向けのnoteです。ワンイコン(500円)noteを確認!※コードをすべてコピペしたい。いう方向けに以下で紹介する全コードコピペできるnote作りました。当サイトの記事でも、しっかりみていただければ自力でいろんなデザインの枠を作成することができます。面倒だからコピペしたい。カラーを探すのがちょっと面倒だからコピペしたい。いう方向けのnoteになります。以下で紹介するコードをすべて紹介しています。オレンジ色の囲み枠(背景なし)シンプルで活用しやすいオレンジ色の枠になります。非常にシンプルで使いやすい実線です。ここに文章を記載するオレンジ色の囲み枠(背景なし)シンプルなオレンジ色の点線の枠になります。ここに文章を記載するオレンジ色の囲み枠(背景あり)枠がオレンジで、背景もオレンジです。ここに文章を記載するオレンジ色の囲み枠(背景あり)枠がオレンジで、背景もオレンジです。ここに文章を記載する黄色の囲み枠(背景あり)黄色の枠で、背景はさらにやわらかい黄色をつかった枠です。ここに文章を記載する黄色の囲み枠(背景あり)黄色の枠で、点線の枠です。ここに文章を記載する赤色の囲み枠(背景あり)赤色の囲み枠になります。枠が赤で、背景を少しやわらかい色にしています。ここに文章を記載する赤色の囲み枠(背景あり)赤色の囲み枠になります。枠が赤の点線にしています。ここに文章を記載するピンク色の枠(背景なし)ピンク色のシンプルの背景なしの枠になります。ここに文章を記載するピンク色の枠(背景なし)点線になります。ここに文章を記載するピンク色の枠(背景あり)背景ありのピンク枠になります。ここに文章を記載する背景ありの点線のピンク枠になります。ここに文章を記載するグレー色の枠(背景なし)グレーの背景なしの枠になります。ここに文章を記載するグレー色の枠(背景なし)点線になります。ここに文章を記載するグレー色の立体枠(背景なし)グレーの背景なし、立体風の枠になります。ここに文章を記載するグレー色の2重線の枠(背景なし)グレーの背景なし、2重線の枠になります。ここに文章を記載するグレー色の枠(背景あり)グレーの背景ありの枠になります。ここに文章を記載するグレー色の枠(背景あり)グレーの背景ありの枠です。ここに文章を記載する赤色の枠(背景なし)赤色の背景なしの枠になります。ここに文章を記載する赤枠の点線(背景なし)点線の赤枠になります。ここに文章を記載する赤色の枠(背景あり)赤色の背景ありの枠になります。ここに文章を記載する赤色の枠(背景あり)点線になります。ここに文章を記載する青色の枠(背景なし)シンプルな青の枠になります。ここに文章を記載する青色の枠(背景なし)シンプルな点線の枠です。ここに文章を記載する青色の枠(背景あり)青色の背景ありの枠になります。ここに文章を記載する青色の枠(背景あり)青色の点線の枠になります。ここに文章を記載する黒色の枠(背景あり)黒色の背景ありの枠になります。ここに文字を記載する黒色の枠(背景あり)点線の枠になります。ここに文字を記載する黒色の二重線の枠(背景あり)二重線の黒枠に、グレーの背景です。ここに文字を記載する枠のグラデーションカラー1こちらは、グラデーションカラーをつかったものです。枠はピンク~茶色、背景はベージュです。ここに文章を記載する枠のグラデーションカラー2黒とベージュのグラデーションカラーです。ここに文章を記載する枠マットタイプのカラー(ベージュ色)シンプルなマットタイプの枠です。背景色と枠が同じ色(ピンク色)シンプルなマットタイプの枠です。ここに文章を記載する背景色と枠が同じ色(グレー色)シンプルなマットタイプのグレーカラーです。ここに文章を記載する茶色の枠(背景あり)茶色枠の背景ありの枠になります。ここに文章を記載する茶色の枠(背景あり。ここに文章を記載する緑色の枠(背景あり)緑色の枠で背景はやや青の色になります。ここに文章を記載する青色の枠(背景あり)青色の枠で、背景も淡い青色になります。ここに文章を記載する緑色の枠(背景あり)緑色の枠で、さらに背景も違う緑のカラーです。ここに文章を記載する紫色の枠(背景あり)紫色の枠に、背景も違う色のむらさき色をいれています。ここに文章を記載するオレンジ色の枠(背景あり)オレンジ色の枠に背景も違うオレンジ色をつかっています。ここに文章を記載するピンク色の見出しタイトルをつける枠(背景なし)ピンク色の見出しタイトルをつける事ができる枠です。濃いめのグレーの見出しタイトルをつける枠です(背景なし。)見出しタイトル囲み内の文章まとめ自分のサイトにあったカラーとデザインは見つかりましたか?もし、見つかったよ。いう方は、シェアやブックマークしてくれると嬉しいです。一人でも多くの方が、文章に囲み枠をいれてオシャレなサイトにしてもらえたらと思います。今回は、WordPressで文章に囲み枠を作る方法について解説しました!CSSをいじる必要はないので、サイト崩れを心配する必要なく行えます。『テキスト』のみで入力できる方法なので、とても便利です。クラシックエディターを利用している方は、Addquicktagを利用しましょう。グーテンベルクを使用している方は、再利用ブロックに登録しておくと次回から1クリックで呼び起こしができるのが便利かと思います。ブログを開設したいけど、やり方がわからない。Wordpressでブログを始める手順を教えて欲しい。初心者でもブログで収益を上げたい。今回は、ブログにおすすのWordPressテーマについて、ご紹介します。わたしは、いままでに当サイトも含めて、色々なwordPressテーマに触れてきました。@toshiya_lifeよかったらシェアしてね!Toshi当サイトではワードプレスの使い方やブログ運営について発信しています。趣味はWordpressテーマを購入する事。ブログライフを楽しもう。