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

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

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

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

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

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

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

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

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

CSSもつかいません。

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


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

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

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

そら
そらはブロックエディタを使用しています。
エディタの拡張をして「クラシック」スタイルで「ソースコード」を使えるようにして記述しています。

使用しているバージョン Wordpress 5.6 THE THOR 2.2.2
使用しているエディタ  ブロックエディタ

ブロックエディタHTMLで文章を囲み枠♪装飾する方法

ブロックの「クラシック」スタイルを使用して装飾します。 ブロックエディタでHTMLで装飾する場合、エディタを拡張して「ソースコード」機能を使って装飾することをオススメします。 「ソースコード」がクラシックエディタの「テキスト」にあたります。 エディタの拡張は下の記事で紹介していますのでどうぞ♪ ≫THE THOR(ザ・トール)クラシックエディタを拡張♪ページ内リンク作成

【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: 10px

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

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

【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>

ワードプレス♪文章を赤の囲み枠で可愛く(チェック)

この画像の上にマウスを持って行って右クリックして画像を保存して使ってください。

背景をチェックにしてみました(^^♪

<div align=”center”>
<div style=”padding: 20px; border: 3px solid #800000; background-image: url(‘/wp-content/uploads/2020/05/haikei3.png’); width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 3px dashed #800000; width: 310px; height: 150px; background-image: url(‘/wp-content/uploads/2020/05/haikei3.png’);”>
<span style=”color: #993300;”>
背景をチェックにしてみました(^^♪
</span></div></div></div>

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

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

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

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

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

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

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

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

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

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

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

囲み枠の中に囲み枠を表示させる♪文章を可愛く装飾♪
最新情報をチェックしよう!
>

sora

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

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


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