【WordPress向け】ポイント、説明などに使える文章枠

今回は自分用に作った文章枠を公開します!
私の記事ではチェック、ポイント、説明などを書くことが多いけど、そのまま書いても目立たないし、テキストだけが続くとメリハリがないので、私なりに使えそうな枠を作ってみました。

【WordPress向け】ポイント、説明などに使える文章枠

※コードをコピペして自由にお使いください

※テキストは例で入れています(ご自身で編集ください)

チェック
・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い
<div style="line-height: 16.3636px; height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; color: #ffffff; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #fa8072;"><span style="font-size: 16px;">チェック</span></span></div>
<div style="border: 2px solid #fa8072; background-color: #fff5f5; padding: 25px 12px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い</div>

 

チェック
・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い
<div style="line-height: 16.3636px; height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; color: #ffffff; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #66d36f;"><span style="font-size: 16px;">チェック</span></span></div>
<div style="border: 2px solid #66d36f; background-color: #eeffef; padding: 25px 12px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い</div>

 

チェック
・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い
<div style="line-height: 16.3636px; height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; color: #ffffff; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #00d2cb;"><span style="font-size: 16px;">チェック</span></span></div>
<div style="border: 2px solid #00d2cb; background-color: #eeffff; padding: 25px 12px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">・〇 高速、多機能、高安定性
・✕ 初期費用がやや高い</div>

 

まずは3色ですが無難に使えそうな色合いで作りました。
良かったら使ってみてください。

コメントを残す

ABOUTこの記事をかいた人

伝説プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。