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

| カテゴリー: 無料ホームページ・SNS・ネット予約について

ワードプレスiphone囲み枠

ネイルサロン開業に必須のブログ。

ワードプレスやアメブロで記事を書く時に便利な、囲み枠。可愛い&使いやすい色をピックアップしたのでご利用ください! 

囲み枠の使い方

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

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

改行するときは、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>

 

タグの解説

background:背景色

padding:余白

border:枠線

応用編

■線の太さを替える

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

■線をドットの線にする

「solid」を「dotted」に変更。

■角丸でない四角にする

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

 

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

 

 

この記事をシェア

[social4i size="large" align="float-left"]