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

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

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

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

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

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

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

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

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

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

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

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

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

アドセンスクエスト

ブログ（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>

まとめ

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

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

ABOUT US

アドセンスキング・ライムスアドセンスクエスト制作者

主にGoogle AdSenseを主軸としたサイトで独立11年目。月間1000万PV達成。現在20サイト以上の資産型サイトやトレンドブログを運営。運営している4サイトに大手出版社から商業出版のオファーがあり、1冊は既に出版済み、2冊目、3冊目は現在同時に執筆中。4冊目も来年出版予定。2024年9月、個人でできるSEO対策の最高峰 Googleナレッジパネルの認証、申請完了済（本名の方で） Googleアドセンスマスター講座『アドセンスクエスト』制作者。

---

【取得済みGoogle認定資格】等

• Google アナリティクス個人認定資格（GAIQ）
• Googleアナリティクス認定資格（GA4）
• Google 広告の測定認定資格
• Google アナリティクス初級
• Google アナリティクス上級

無料プレゼント詳細はこちら

ライムスからのプレゼント♪

当サイトを発見したあなたには、ライムスから、ブログ収益に直接結びつく特別なプレゼントを複数ご用意しました。「アドセンスクエスト」に少しでもご興味ある方には、必ずメリットがある特典ですので、お宝ゲットしてくださいね！

このプレゼントが、あなたのブログ人生を変える大きなきっかけになるかもしれません。

何が入ってるかドキドキしてきました♪

プレゼントはこちらから

Googleアドセンスマスター講座

ゲーム感覚で月収100万円までの道を学べるGoogleアドセンスマスター講座です。