コピペOK【文章加工】文章を囲み枠で可愛く装飾♪可愛い枠編

文章を囲み枠で
可愛く装飾♪

【wordpress】ワードプレスの文章を枠線を囲む記事を書いていて、ふと思い立ったこのやり方(笑)

CSSを使えば簡単にできますが、

「CSSを使うのはちょっと敷居が高いよ」

という方におすすめかなっと♪

この上の画像は囲み枠で設定して表示させています。

枠の中に枠をセットするとこんなこともできちゃうんです♪

この記事ではプラグインもつかいません。

CSSもつかいません。

「テキスト」エディタと「ビジュアル」エディタの切り替えが出来ればOKです。


枠1つだけの設定よりは、行が増えますので気を付けてくださいね(^^♪

基本操作は、下の画像の赤丸で囲った「テキスト」エディタをクリックして、私のコピペ文を張り付けた後に「ビジュアル」をクリックして「ビジュアル」エディタに戻って、文章を加工して終了です♪

この動作は変わりません。

【wordpress】ワードプレス文章を可愛く♪囲み枠のコードの説明

コピペ文の前に、文の意味を簡単に紹介します(^^)/

枠が表示されたら中をクリックして文字を書いていってください。

文字の大きさや色など お好みの設定にしてみてください。

<div align=”center”>
枠を中央にという指示です。

<div style=”padding: 20px; background: #fff0f5;  width: 350px; height: 190px;”>
外枠の設定指示です。

padding: 20px;

枠と枠との空間の大きさを設定しています。

この数字を大きくする分だけ、中の枠は小さくしなければいけません。(☆)

background: #fff0f5;

枠の中の背景色の指定です。

width: 350px;height: 190px;

縦の大きさ、横の大きさになります。

ここで注意があります。

この大きさを気を付けてください。

スマホで見るときなど、大きすぎると見切れてしまったり、中央に表示の指示が無視されてしまいます。

このサイズでiphone8の画面で中央に表示されています。

<div style=”padding: 20px  border: 5px dashed #FFF; width: 310px; height: 130px; background: #fff0f5;”>

中枠の設定指示です。

padding: 20px

中枠から文字までの空間の大きさを指定しています。

border: 5px

中の波点線の太さを設定しています。

太くしたい時は数字を大きくします。

dashed #FFF

白の破点線と設定しています。

色を変えるなら「#FFF」を変更します。

width: 310px; height: 130px

1つ目の枠の縦横の大きさから、☆分の数字をひいた数値を指定します。

1つ目の枠の横幅 350px - (  20px(左側の空間分)+ 20px(右側の空間分)) = 310px

1つ目の枠の縦幅 190px   –  (  20px(左側の空間分)+ 20px(右側の空間分)) = 150px

 

</div></div></div>

div文の指示がここまでという設定です。

border-radius: 10p

これは、角の丸みを指定しています。

数字が大きいほど角が丸くなります。

【wordpress】ワードプレス文章を可愛いく♪囲み枠とコピペ文

枠の中の文字は、中枠の中をクリックして、いつも通り普通に書いていってください。

枠の文字が書き終わったら、ダブルクリックすれば抜けれます。

【wordpress】ワードプレス文章を可愛いく♪四角囲み枠

文章をピンクの四角い囲み枠で可愛く♪
ピンクの背景に
白のリボンの枠線
———————<囲み枠コピペ文ここから>———————-

<div align=”center”>
<div style=”padding: 20px; background: #fff0f5; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; width: 310px; height: 150px; background: #fff0f5;”></div>
</div>
</div>

——————————————————————
文章を水色の四角い囲み枠で可愛く♪
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #dff3f5; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; width: 310px; height: 150px; background: #dff3f5;”></div>
</div>
</div>
——————————————————————
文章を緑の四角い囲み枠で可愛く♪
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #f5eadf; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; width: 310px; height: 150px; background: #f5eadf;”></div>
</div>
</div>
——————————————————————
文章をオレンジの四角い囲み枠で可愛く♪
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #f5eadf; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; width: 310px; height: 150px; background: #f5eadf;”></div>
</div>
</div>
——————————————————————

【wordpress】文章を可愛いく♪丸角囲み枠

文章をピンクの角丸囲み枠で可愛く♪
文章を囲み枠で
可愛く装飾♪

———————<囲み枠コピペ文ここから>———————-

<div align=”center”>
<div style=”padding: 20px; background: #fff0f5; border-radius: 10px; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px; width: 310px; height: 150px; background: #fff0f5;”><</div>
</div>
</div>

——————————————————————

文章を水色の角丸囲み枠で可愛く♪
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #dff3f5; border-radius: 10px;width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #dff3f5;”></div>
</div>
</div>
——————————————————————
文章を緑の角丸囲み枠で可愛く♪
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #f5eadf;border-radius: 10px; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #f5eadf;”></div>
</div>
</div>
——————————————————————
2-2-4  文章をオレンジの角丸囲み枠で可愛く
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #f5eadf; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #f5eadf;”></div>
</div>
</div>
——————————————————————
ワードプレス♪文章をピンク角丸囲み枠で可愛く(濃)
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #ff99cc; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #ff99cc;”>
</div>
</div>
</div>
——————————————————————
ワードプレス♪文章を紺色の角丸囲み枠で可愛く♪(濃)
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #000080; border-radius: 10px;width: 350px; height: 190px;”><div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #000080;”></div>
</div>
</div>
——————————————————————
ワードプレス♪文章を緑の角丸囲み枠で可愛く♪(濃)
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #f5eadf;border-radius: 10px; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #f5eadf;”></div>
</div>
</div>

——————————————————————
ワードプレス♪文章を赤の角丸囲み枠で可愛く(濃)
文章を囲み枠で
可愛く装飾♪
———————<囲み枠コピペ文ここから>———————-
<div align=”center”>
<div style=”padding: 20px; background: #800000; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px;width: 310px; height: 150px; background: #800000;”></div>
</div>
</div>

——————————————————————

3【wordpress】ワードプレス文章を囲み枠で可愛く装飾♪コピペOK まとめ

この枠ってすごくつかいますよね。

サイズ指定しないのが一番いいのですが、私も試してみましたが、枠の中の枠だと%で指定は無視されてしまいました(-_-;)

スマホで小さい画面で見る方もいらっしゃると思いますので、この枠サイズだと5.5インチ位まで大丈夫だと思います。

色合いも私好みで、パステルのちょっとくすんだ色合いで記事を作成しました。

こんな色合いも欲しいとコメント下されば、作成したします(^^)/

最後に、私のコピペ文が無視される時があるかもしれません。

その時は、全角が混じっていないか確認してみてください。

コードの<>で囲っている中は全角文字は無視されます。

 

 >>>ブログ装飾しましょ♪囲み枠&トリミング

文章を囲み枠で装飾・画像編集ソフトを使わないでのトリミング・画像の上に文字を書く方法の記事をまとめました♪

 

/Decoration/TOOL/そらのまなびぐろぐ/THE THOR/AFEREIT/

NO IMAGE
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。