ワードプレスに記事本文に囲み枠をつけるには?

● アメブロやブログ内の記事本文に囲み枠をつけるには?

こんにちは、岡田です

ご質問が多いのが、枠のつけ方です

<div style=”border: 1px dashed #ff0000; padding: 15px;”>
このような枠です。オレンジ色の点線枠の中に文字を入れてます。
</div>

以下は、アメブロを例に、枠の挿入の仕方を説明します。

STEP:1

記事を書くとき、「通常表示」と「HTML表示」 この2つがあります。枠を挿入する場合には、「HTML表示」に変えます。

img-htmlhyouji

 STEP:2

 以下の、タグをコピペして、HTML表示に貼り付けてください。

<div style=”border: 1px dashed #ff0000; padding: 15px;”>
このような枠です。オレンジ色の点線枠の中に文字を入れてます。
</div>

 とりあえず、色や点線枠の指定(コード)は、このままです。

STEP:3

編集画面を「通常表示」に戻します。

このブログの点線枠と同じもの(オレンジ色の点線で、文字を囲った枠)が出てきます。

枠の中に、自分のメニューや伝えたいことに合わせて変更します。

※通常表示のまま、書き直し可能です。

最後、保存を押して終了です。

以上が、基本編です。

▼おすすめ大容量サーバー▼

 

● 囲み枠のサンプルです

以下、いくつか枠のサンプルを置いてますので、ご自由にお使いください。

コピーする範囲は、< ← ここからここまで →>

ご利用の際には、「● 料金|地図|お問い合わせ」 という部分を、あなたのお店やサービスにあわせて書き直してください。

 

<div style=”background:#ffeeee; padding:10px; border:1px solid #ff0000;”>
● 料金|地図|お問い合わせ <br />
</div>

 

<div style=”background:#cccccc; padding:10px; border:1px solid #666666;”>
● 料金|地図|お問い合わせ <br />
</div>

 

<div style=”border: 1px solid #FF0000; padding: 15px;”>
● 料金|地図|お問い合わせ<br />
</div>

 

<div style=”border: 2px solid #FF0000; padding: 30px;”>
● 料金|地図|お問い合わせ<br />
</div>

 

文字が、中央寄せ

<div style=”border: 1px dotted #FF0000; padding: 15px; width: 300px; text-align: center;”> ● 料金|地図|お問い合わせ<br /> </div>

 

枠のサイズを固定する場合

<div style=”border: 1px solid #0033FF; padding: 30px; width: 370px;”> ● 料金|地図|お問い合わせ<br /> </div>

 

● 枠の色、書き方、意味は、以下の通りです。

<div style=”background:#ffeeee; padding:10px; border:1px solid #ff0000;“>
● 料金|地図|お問い合わせ
</div>

上記の例をもとに、各コードの意味を説明します。

<div></div>・・・これ自体意味を持ちませんが、ひとかたまりの範囲として定義するものです。(ブロック要素)

background・・・背景色
#ffeeee・・・薄ピンク(カラーをあらわすコード)

padding・・・パディングという。ここでの意味は、枠線から文字をどれくらい間隔をあけるか
10px・・・ここでの意味は、枠線から文字を、10px間隔をあけるということ。枠からもっと文字をあけたい場合は、数字を大きくする。

 border・・・枠線のこと
1px ・・・枠線の太さ。数字が大きくなると太くなります。
solid・・・直線という意味。(線の種類)
#ff0000・・・枠線の色。赤。カラーコードです。

 

▼線の種類をあらわす書き方▼

solid・・・直線
double・・・二重線
dotted・・・丸い点線
dashed・・・四角い点線

があります。

お好きなものを使って、あなたのブログを充実させてくださいね♪

また、ほとんどのブログでも、対応してます。