ワードプレス記事の中で使える囲み枠線の作り方 かわいい色サンプル

| カテゴリー: ブログ集客・SNSノウハウ

ワードプレス囲み枠

ワードプレスやアメブロ記事の中で使える囲み枠線の作り方

かわいい色サンプル&使いやすい色をピックアップしました。ご利用ください!

パソコンが苦手でも簡単・無料で作れるホームページ比較

囲み枠の使い方

記事の入力画面で、”テキスト表示”にしてコピペしてください。

その後は、ビジュアル表示に戻して、本文を入力してください。

改行するときは、「 Shift+Enter 」

■シンプル角丸枠

ここに本文を入れる
改行は、Shift+Enter

使用するタグ
<div style="padding: 10px; border: 1px solid #555555; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入れる</div>  

■直線枠

ココに本文を入れる
改行は、Shift+Enter

使用するタグ
<div style="border: 1px solid#eddbff; padding: 10px;">ココに本文を入れる<br></div>  

■赤シンプルドット枠

ココに本文を入れる
改行は、Shift+Enter

使用するタグ
<div style="background:#fff; padding:10px; border:2px dotted#ff0000;">ココに本文を入れる</div>  

中が塗りつぶされている四角枠

ココに本文を入れる
改行はShift+Enter

使用するタグ
<div style=”background:#FFC0CB; padding:10px; border:none;”>ココに本文を入れる</div>

■中が塗りつぶされている角丸枠

本文
改行はShift+Enter

使用するタグ
<div style="background:#fffaf0; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文</div>

■ピンク見出し付き枠

■ココにタイトルを入れる
本文
改行はShift+Enter

使用するタグ
<div style=”background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■ココにタイトルを入れる</span></div>
<div style=”border: 1px solid #ff7fbf; padding: 10px;”>本文<br />
改行はShift+Enter</div>

■二重枠

本文

使用するタグ
<fieldset style=”border: 4px double #ffd900; padding: 15px;”>本文</fieldset>

■角丸・中が塗りつぶされている二重外枠

本文

使用するタグ
<fieldset style=”background:#f98289; padding:10px; border:4px double #ffffff; border-radius:10px;”><span style=”color: rgb(255, 255, 255);”>本文</span></fieldset>

タグの解説

background:背景色

padding:余白

border:枠線

応用編

■線の太さを替える

「border:3px」の数字を変更。数字が大きいほど線は太くなります。

■線をドットの線にする

「solid」を「dotted」に変更。

■角丸でない四角にする

「border-radius:10px;」の部分を削除。

うまく使えない、表示されない場合はお知らせくださいませ!

メルマガ無料バナー

ネイルサロン開業の行き詰まりを打開する唯一の方法!『50万円売り上げるひとりサロンリニューアル術』7日間無料メール講座(ご登録特典つき)

ネイルサロン開業プロデュース

コンセプトから集客まで、0から50万円売り上げる!マンツーマン「ネイルサロン開業プロデュース」

ビオネイルについて
サービス一覧
セミナー・イベント
お客様の声・成功事例

友だち追加

この記事をシェア



ページの先頭へ