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

文章を囲み枠で可愛く 装飾♪(プラグイン)

この記事では、プラグインを使っての文章を囲む枠の紹介をします。

この上の画像のような可愛い囲み枠を、プラグインをつかって作成しちゃいます(^^♪

【wordpress】ワードプレス文章を囲み枠で可愛く装飾♪

コピペOK「AddQuicktag」というプラグイン 使用バージョンの記事です(^^

枠を使いたいという方におすすめかなっと♪

前回は「テキストエディタ」と 「ビジュアルエディタ」

を行ったり来たりしながら HTMLのコードをコピペしながらカスタマイズして使用する方法を紹介したのですが、 この記事では、プラグインを使用するので、その作業はほとんどありません。

そう、残念ながら「ほとんど」です。

枠で囲う文字が多かったり、少なかったりすると 枠のサイズを変更したい時ってあると思うんです( ̄▽ ̄;) そんな時は、「テキストエディタ」と 「ビジュアルエディタ」を行ったり来たりしながら サイズの変更が必要になります。

そら
CSSはつかいません
テーマをいじるなんてしませんので、 初心者さんでも大丈夫です。
基本コピペ作業です♪
目次

【wordpress】文章の囲み枠で使うプラグイン

使うプラグインは「 AddQuicktag 」です。

設定を初めにしておけば、簡単に囲み枠ができます。

このプラグインに外枠内枠の2つを設定して使用します(^^♪

【wordpress】文章の囲み枠で使うプラグインを登録

画面左側の「プラグイン」→「新規登録」をクリックしてください。

【wordpress】文章の囲み枠で使うプラグインを登録

 

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」

「プラグインを追加」の画面が表示されます。

画面右上 ①キーワードを入力する所に「 AddQuicktag 」と打ってください。

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」をインストール

②「今すぐインストール」をクリックしてください。

インストールが終わりましたら、「有効化」をクリックしてください。

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」をインストール

次に設定をしていきます。

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」の設定

画面左側の「設定」→「 AddQuicktag 」をクリックしてください。

文章の囲み枠で使うプラグイン「AddQuicktag」の設定

AddQuicktagの設定画面が表示されます。

【wordpress】文章の囲み枠で使うプラグインでタグの設定

ここに囲み枠の「外枠のタグ」と「内枠のタグ」を設定しておきます。

うみ
2つのタグを指定できる場所が作られていますが、 2つ目を記入すれば、また下に白紙のタグを記入する場所が できますので何個でも設定可能です。

 

そら
外枠と内枠の2段セットで使います♪ では例として、1段目の外枠部分の記入部分の説明します(^^)/

 

 

【wordpress】文章の囲み枠で使うプラグインでタグの設定

【wordpress】文章の囲み枠(外枠)で使うプラグイン「ボタン名」を設定

①にはボタン名を記入します。

名前は何でもいいです。

自分がわかるような名前を付けてください。

ここでは例としてピンクの外側枠とわかるように「枠線ピンク外」としてあります。

画像でわかるかと思いますが、下に ピンクの内側枠とわかるように「枠線ピンク内」としてあります。

【wordpress】文章の囲み枠(外枠)で使うプラグイン「タグ」を設定

②にはタグを記入します。 ここにコピペ文を張り付けてください。

<div align=”center”>

<div style=”padding: 20px; background: #fff0f5; width: 350px; height: 190px;”>

☆コードの説明

div align=”center”

枠を画面中央に表示させます

padding: 20px;

これは線と文字のなかの空白の指定になります。 数字が大きいほど、線と文字の空間が広がります。

background: #fff0f5;

背景色の指定になります。

width :350px;

線の横幅を指定します。 数字が大きいほど枠が広がります。

height: 190px;

これは、外枠の高さの指定になります。

これで1文です。 文の終わりには必ず”;”が付きます。

【wordpress】文章の囲み枠(外枠)で使うプラグイン終了の「タグ」を設定

③に終了のタグを記入します。

</div></div>

【wordpress】文章の囲み枠(外枠)で使うプラグインの順番を設定

④エディタで表示される順番を指定します。

【wordpress】文章の囲み枠(外枠)で使うプラグインの表示のチェック

⑤チェック項目を左から2つチェックしてください。 (すべてチェックしてもOKです)

【wordpress】文章の囲み枠(内枠)プラグインの設定

①~⑤の記入が終わりましたら、下の段に、内枠も同じように記入してください♪

2段目①に「枠線ピンク内」

2段目②部分に記入

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

2段目③部分に </div> を記入

2段目④部分に「表示順の番号」を記入

2段目⑤部分の左から2つをチェック

【wordpress】文章の囲み枠で使うプラグイン変更を保存

外枠、内枠の2つの記入が終わりましたら、 最後に、下に画面をスクロースし「変更を保存」をクリックして下さい。 これで設定が終わりました。

【wordpress】文章の囲み枠で使うプラグイン変更を保存

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」の使い方

投稿画面を開いてください。

 Quicktags 」という項目がメニューに追加されていると思います。 (「Quicktags」の横の▼をクリックすると先ほど登録した 「ボタン名」が指定した甚番通りに表示されます。 外枠と内枠を2つ登録したので2個並んでいます。)

上で説明したボタン名が違っていてごめんなさい! は?となった方ごめんなさい! 気が付いたら、ピンクをpで終わらせていた( ̄▽ ̄;)

【wordpress】文章の囲み枠で使うプラグイン「AddQuicktag」の使い方

プラグイン【wordpress】囲み枠で囲みたい文章を選択する

囲みたい文章を、マウスでドラッグするか、 クリックを連続3回して選択する。

☆お役立ち情報

このクリックを連続3回で文章が選択できるやり方は覚えると便利です。

クリック1回で場所を選択。クリック2回で文字を選択。 クリック3回で文章選択と覚えましょう。

 

 

プラグイン【wordpress】文章を選択した後

「 Quicktags 」をクリックして下さい。

プラグイン【wordpress】外の囲み枠の名前を選択

使いたい囲み枠の名前をクリックしてください。 これで外枠の中に文章が入ります。

プラグイン【wordpress】囲み枠からの抜け出し方

枠の中の文章変更時の時など、枠の中から抜け出す時は 連続2回クリックしてください。

プラグイン【wordpress】内囲み枠の名前を選択

外囲み枠の中の文章をマウスでドラッグするか、 クリックを連続3回して選択してください。 選択後「 Quicktags 」をクリックして、 内囲み枠を選択してください。

内枠で囲み終わってから、 文章を治してください♪

 

 

プラグイン【wordpress】囲み枠の文章の多さ

枠の中に、もう1つ枠を設定する関係上 プラグイン設定時に、枠の大きさを決めてしまっています。

 

うみ
外枠で文章を囲った時に、文章が半分くらいのサイズ感が ちょうど良いかもしれません。

プラグイン【wordpress】囲み枠のサイズ変更

囲み枠と文章の表示が気に入らない時は、サイズを変更しちゃいましょう♪ 下の画像の赤丸で囲った「テキスト」エディタをクリックして

プラグイン【wordpress】囲み枠のサイズ変更
テキストタブをクリック

枠部分のコードを探してください。 外枠と内枠の「width 」「height」部分を見つけて、 数値を、同じ数だけ減らすか増やすかしてください(^^)/

ここで注意があります。 この大きさを気を付けてください。 スマホで見るときなど、大きすぎると 見切れてしまったり、中央に表示の指示が 無視されてしまいます 。 このサイズでiphone8の画面で中央に表示されています。

 

【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 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 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 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;”>
——————————————————————

【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 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 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 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 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 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 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 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;”>
——————————————————————

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

この枠ってすごくつかいますよね(;^_^A

プラグインを使って使用の方が楽でした。

大きさを%で指定は無視されるのが残念です( ̄▽ ̄;)

大きさ固定したくないんだけどなぁ スマホで小さい画面で見る方もいらっしゃると思いますので、 この枠サイズだと5.5インチ位まで大丈夫だと思います。

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

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

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

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

コードの<>で囲っている中はすべて半角文字で記述してください。 全角文字は無視されます。

 

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

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

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

 

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