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

ブログを書いていて　この部分の文章を目立たせたいなぁと思った時に使える、プラグインを使っての【文章の周りを線で囲む】やり方を紹介いたします。

この上の画像に見えるのは、メディアを追加したわけではありません。

プラグインもCSSも使わないでも枠の中に、枠をはめ込むと

こんなことも出来ちゃいます♪

しかし、この記事では「こんな便利なプラグインもあるよ」紹介ということで、プラグインを使っての囲み枠を作る方法を紹介します♪

こちらの方が使い勝手がいいかも(^^)/

もちろん、この記事でもCSSはつかいません。

テーマをいじるなんてしませんので、初心者さんでも大丈夫です。

☆

準備：文章の囲み枠で使用したい色のコードを確認しておく

文章の囲み枠を何色にするのか。

私が選んだ色でOKならコピペでいいのですが、もし違う色がいいという時に、色のコードが必要になります。

使いやすい色と色コードの一覧の記事を作成いたしました。

その記事中にwordpress(ワードプレス）での色と色コードの検索の仕方も紹介してあります。

必要なかたは、確認しておいてください。

＜ PR ＞

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

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

使うプラグインは「　AddQuicktag　」です。
設定を初めにしておけば、簡単に囲み枠ができます。
エディタを行ったり来たりしないので、こちらの方がおすすめですね(;^_^A

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

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

＜ PR ＞

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

「プラグインを追加」の画面

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

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

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

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

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

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

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

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

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

ここにあらかじめ囲み枠の「タグ」を設定しておくのです。

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

最大何個までというのは、まだ試してないのでわかりません。

すみません(￣▽￣;)

では記入していきましょう。

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

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

名前は何でもいいです。

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

ここでは例として黒の枠線なので「枠線ｂ」としました。

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

②にタグを記入します。
ここが大事です。

例）角が丸い薄いグレーの1px幅の線で横幅が50％

<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; width: 50%;”>

☆ひとつづつ説明

border: 1px solid #CCC;

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

1pxが線の幅になります。

次の”solid ”が線種になります。

線種については下に詳しく記載してあります。

（【wordpress】囲み枠の線種例）

”#ccc”が線の色になります。

padding: 20px;

これは線と文字のなかの空白の指定になります。

数字が大きいほど、線と文字の空間が広がります。

border-radius: 20px;

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

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

width : 70%;

線の横幅を指定します。

数字が大きいほど枠が広がります。

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

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

</div>

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

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

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

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

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

最後に、記入が終わりましたら、下に画面をスクロースし「変更を保存」をクリックして下さい。

これで設定が終わりました。

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

次は使い方です。

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

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

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

私は、黒とピンクを2つ登録したので２個並んでいます。）

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

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

☆お役立ち情報

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

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

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

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

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

使いたい囲み枠の名前をクリックしてください。

プラグイン文章の囲み枠からの抜け出し方

枠線の中に文章を何行か書いた後、枠線から抜け出したい時は連続クリック2回です。
記入して選択中の場合は、まずクリックをして選択を決定にしてから、クリック連続2回をしてください。

プラグイン【wordpress】文章の囲み枠の線 種薄いグレーの例

枠の下にコピペ文を記述しておきますので、気に入ればコピーして②の箇所に張り付けて使用してください。

プラグイン【wordpress】実線の囲み枠で文章を囲む

solid

<div style=”padding: 10px ;  margin-bottom: 10px; border: 3px solid #ccc; border-radius: 10px; “>

プラグイン【wordpress】二重線の囲み枠【ボックス】で文章を囲む

double

プラグイン【wordpress】立体的に窪んだ線の囲み枠【ボックス】で文章を囲む

groove

<div style=”padding: 10px ;  margin-bottom: 10px; border: 8px groove #ccc; border-radius: 10px;”>

プラグイン【wordpress】立体的に隆起した線の囲み枠【ボックス】で文章を囲む

ridge

<div style=”padding: 10px; margin-bottom: 10px; border: 8px ridge green; border-radius: 10px;”>

線の色を緑に指定してみました。

プラグイン【wordpress】文章の囲み枠【ボックス】その他

inset

<div style=”padding: 20px :  margin-bottom:20px; border: 8px inset blue; border-radius: 20px; “>

outset

<div style=”padding: 10px ; margin-bottom: 10px; border: 8px outest red; border-radius: 10px; “>

プラグイン【wordpress】種薄いグレーの囲み枠の中の色を付ける方法

background: #ffcccc;

背景色の指定をしています。
囲み枠の中の色を付けたい時に使用します。

color: #66333;

文字色を指定します。
文字色を変更したい時に使用します。

プラグイン【wordpress】種薄いグレーの文章囲み枠の中の色をピンクに文字色を茶色に変更

枠の下にコピペ文を記述しておきますので、気に入ればコピーして②の箇所に張り付けて使用してください。

プラグイン【wordpress】種薄いグレーの文章囲み枠の中の色をに水色に変更

プラグイン【wordpress】種薄いグレーの文章囲み枠の中の色をに緑に変更

プラグイン【wordpress】種薄いグレーの文章囲み枠の中の色をにオレンジに変更

プラグイン【wordpress】同系色の文章囲み枠に変更

プラグイン【wordpress】同系色の文章囲み枠オレンジに変更

プラグイン【wordpress】同系色の文章囲み枠オレンジに変更（暗）

プラグイン【wordpress】同系色の文章囲み枠ピンクに変更

プラグイン【wordpress】同系色の文章囲み枠ピンクに変更（暗）

プラグイン【wordpress】同系色の文章囲み枠青に変更

プラグイン【wordpress】同系色の文章囲み枠青に変更（暗）

プラグイン【wordpress】同系色の文章囲み枠ピンクに変更

【wordpress】プラグインを使って簡単に文章を囲み枠で装飾♪まとめ

>>>【wordpress】文章を囲み枠で装飾する簡単なやり方を紹介♪コピペOK

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

この記事は、画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。

　HTMLのみで画像を枠で囲む方法は追加情報として記載しました(^^♪