ワードプレスの記事の文章に囲み枠をつける方法

こんにちは、ライムスです(*^^*)

現在進行系でゴリゴリのアドセンサーとして複数のサイトを運営しつつ、アドセンスの稼ぎ方に特化した「アドセンスクエスト」というコミュニティーを運営しています。

この記事では、ワードプレスの記事に囲み枠をつける方法をご説明したいと思います。

記事が綺麗に装飾されると見やすいですよね。

囲い枠とは、例えば以下のようなものですね！

他にも色々な種類がありますし、太さやカラーも自由に変えることができます。

この記事のコードをコピペして、あなたのブログで『テキスト』の方で貼り付けていただければ、簡単に枠を作れますので、是非おためしあれ( ´ ▽ ` )ﾉ

ワードプレスの記事の囲み枠一覧

以下に様々なバリエーションの囲み枠を掲載しています。

気に入った囲み枠のコードを自由にコピペしてお使いください。

色や線の太さなどを変更することによって、あなたオリジナルの囲み枠を作ることができますよ〜(*^^*)

カラーコードや色の考え方はこちらの記事をご覧ください。

究極のアドセンスブログコンサル教材

ブログ（WordPress）の色使いやデザインの決め方

https://life-money-create.com/kimekatanituite

ブロガーのライムスです。主にGoogle AdSenseを主軸としたサイトやASP高額案件で独立9年目。2022年6月に月間650万PV達成。現在10サイト以上運営。専門はアルゴリズムの大変動を逆算したサイト設計。ゲーム感覚でサイトの稼ぎ方を学べるRPG型教材「アドセンスクエスト」の制作者。月利数十万円プレイヤーを多数輩出。僕の詳しいプロフィールはコチラをどうぞ。 この記事では、サイトの色使いやデザインの決め方について、僕がどのような感じでデザインや色使いを決めているかお話します。サイトの色使いって難しいですよね。個性は...

<div style="border: 5px solid #23282D; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 5px solid #23282D; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 5px solid #ffb6c1; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="background: #ffffea; padding: 15px; border: 1px solid #1a66ff; border-radius: 10px; word-break: break-all;">
ここに文章
</div>

<div style="border: 5px solid #add8e6; padding: 10px; border-radius: 10px; background: ##ffffff;">ここに文章</div>

<div style="background: #ffffea; padding: 10px; border: dotted 3px #1a66ff; border-radius: 10px; word-break: break-all;">
ここに文章
</div>

<div style="background: #ffffea; padding: 15px; border: double 4px #1a66ff; border-radius: 10px; word-break: break-all;">
ここに文章
</div>

<div style="background: #ffffea; border: 1px solid #1a66ff; padding: 0.5em 1em; margin: 2em 0; color: #474747; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.50);">
ここに文章
</div>

<div style="background: #1a66ff; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
ここに文章
</div>

<div style="background: #cce6ff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;">
ここに文章
</div>

<div style="background: #cce6ff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); word-break: break-all;">
ここに文章
</div>

<div style="background: #1a66ff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #1a66ff; border-radius: 0 0 10px 10px;">
ここに文章
</div>

<div style="display: inline-block; background: #1a66ff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #1a66ff;">
ここに文章
</div>

<div style="background: #1a66ff; padding: 5px 10px; color: #ffffff; text-align: center;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #1a66ff;">
ここに文章
</div>

<div style="background: #ffffea; padding: 8px 19px; margin: 2em 0; border-top: solid 10px #00ccff; solid 5px #1a66ff; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">
ここに文章
</div>

<div style="background: #ffffea; padding: 15px; border: 4px inset #1a66ff; border-radius: 10px; word-break: break-all;">
ここに文章
</div>

<div style="border: 5px solid #98fb98; padding: 10px; border-radius: 10px; background: ##ffffff;">ここに文章</div>

<div style="border: 5px dashed #cd5c5c; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 3px dashed #7affbc; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 5px dotted #8484ff; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 10px double #d2b48c; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 10px groove #a1d8e6; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div>

<div style="border: 1px solid #ffb6c1; padding: 5px; border-radius: 0px; background: #ffb6c1;">□タイトル</div>
<div style="border: 1px solid #ffb6c1; padding: 10px; border-radius: 0px; background: #ffffff;">ここに文章</div>

<div style="border: 1px solid #40e0d0; padding: 5px; border-radius: 10px 10px 0 0; background: #40e0d0;">□タイトル</div>
<div style="border: 1px solid #40e0d0; padding: 10px; border-radius: 0 0 10px 10px; background: #ffffff;">ここに文章</div>

<div style="height: 12px;"><span style="background: #ffa500; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">□タイトル</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500;">ここに文章</div>

まとめ

上記のパターンで後は、色や線の太さなどを変更することによってバリエーションは無限大にあります。

是非あなただけのオリジナル囲み枠を作ってみてくださいね＾＾