こんにちは、ライムスです(*^^*)
現在進行系でゴリゴリのアドセンサーとして複数のサイトを運営しつつ、アドセンスの稼ぎ方に特化した「アドセンスクエスト」というコミュニティーを運営しています。
自己紹介
主にGoogle AdSenseを主軸としたサイトで独立9年目。2022年12月に、運営サイト合計で月間1000万PV達成。現在10サイト以上運営。トレンド系のサイトは一つもありません。得意分野はアルゴリズムの大変動に強いサイト設計。ぼくの詳しいプロフィールはコチラをご覧ください。
この記事では、ワードプレスの記事に囲み枠をつける方法をご説明したいと思います。
記事が綺麗に装飾されると見やすいですよね。
囲い枠とは、例えば以下のようなものですね！
テスト
見出しタイトル
テスト
テスト
テスト
テスト
テスト
テスト
テスト
他にも色々な種類がありますし、太さやカラーも自由に変えることができます。
この記事のコードをコピペして、あなたのブログで『テキスト』の方で貼り付けていただければ、簡単に枠を作れますので、是非おためしあれ( ´ ▽ ` )ﾉ
ワードプレスの記事の囲み枠一覧
以下に様々なバリエーションの囲み枠を掲載しています。
気に入った囲み枠のコードを自由にコピペしてお使いください。
色や線の太さなどを変更することによって、あなたオリジナルの囲み枠を作ることができますよ〜(*^^*)
カラーコードや色の考え方はこちらの記事をご覧ください。
ここに文章
|
1 |
<div style="border: 5px solid #23282D; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 5px solid #23282D; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 5px solid #ffb6c1; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 2 3 |
<div style="background: #ffffea; padding: 15px; border: 1px solid #1a66ff; border-radius: 10px; word-break: break-all;"> ここに文章 </div> |
ここに文章
|
1 |
<div style="border: 5px solid #add8e6; padding: 10px; border-radius: 10px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 2 3 |
<div style="background: #ffffea; padding: 10px; border: dotted 3px #1a66ff; border-radius: 10px; word-break: break-all;"> ここに文章 </div> |
ここに文章
|
1 2 3 |
<div style="background: #ffffea; padding: 15px; border: double 4px #1a66ff; border-radius: 10px; word-break: break-all;"> ここに文章 </div> |
ここに文章
|
1 2 3 |
<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> |
ここに文章
|
1 2 3 |
<div style="background: #1a66ff; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;"> ここに文章 </div> |
ここに文章
|
1 2 3 |
<div style="background: #cce6ff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;"> ここに文章 </div> |
ここに文章
|
1 2 3 |
<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> |
見出しタイトル
ここに文章
|
1 2 3 4 |
<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> |
見出しタイトル
ここに文章
|
1 2 3 4 |
<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> |
見出しタイトル
ここに文章
|
1 2 3 4 |
<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> |
ここに文章
|
1 2 3 |
<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> |
ここに文章
|
1 2 3 |
<div style="background: #ffffea; padding: 15px; border: 4px inset #1a66ff; border-radius: 10px; word-break: break-all;"> ここに文章 </div> |
ここに文章
|
1 |
<div style="border: 5px solid #98fb98; padding: 10px; border-radius: 10px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 5px dashed #cd5c5c; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 3px dashed #7affbc; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 5px dotted #8484ff; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 10px double #d2b48c; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
ここに文章
|
1 |
<div style="border: 10px groove #a1d8e6; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章</div> |
□タイトル
ここに文章
|
1 2 |
<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> |
□タイトル
ここに文章
|
1 2 |
<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> |
□タイトル
ここに文章
|
1 2 |
<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> |
まとめ
上記のパターンで後は、色や線の太さなどを変更することによってバリエーションは無限大にあります。
是非あなただけのオリジナル囲み枠を作ってみてくださいね＾＾