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

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

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

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

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

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

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

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

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

枠で囲う文字が多かったり、少なかったりすると、 枠のサイズを変更したい時ってあると思うんです(￣▽￣;)

そんな時は、「テキストエディタ」と 「ビジュアルエディタ」を行ったり来たりしながら サイズの変更が必要になります。

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

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

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

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

＜ PR ＞

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

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

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

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

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

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

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

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

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

＜ PR ＞

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

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

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

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

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

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

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

名前は何でもいいです。

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

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

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

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

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

<div align=”center”>

<div style=”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】文章の囲み枠で使うプラグイン「AddQuicktag」の使い方

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

「　Quicktags　」という項目がメニューに追加されていると思います。

（「Quicktags」の横の▼をクリックすると先ほど登録した 「ボタン名」が指定した甚番通りに表示されます。

外枠と内枠を2つ登録したので２個並んでいます。）

上で説明したボタン名が違っていてごめんなさい！

は？となった方ごめんなさい！

気が付いたら、ピンクをｐで終わらせていた(￣▽￣;)

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

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

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

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

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

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

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

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

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

選択後「　Quicktags　」をクリックして、 内囲み枠を選択してください。

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

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

プラグイン【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;”>

ワードプレス♪文章を水色の四角い囲み枠で可愛く♪

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

ワードプレス♪文章をピンクの角丸囲み枠で可愛く♪

ワードプレス♪文章をピンク角丸囲み枠で可愛く（濃）

ワードプレス♪文章を紺色の角丸囲み枠で可愛く♪（濃）