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


文章を簡単に囲む

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

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

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

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

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

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

文章を囲み枠で装飾♪プラグイン新規追加

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

すみません( ̄▽ ̄;)

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

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

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

名前は何でもいいです。

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

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

【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つ登録したので2個並んでいます。)

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

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

☆お役立ち情報

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

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

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

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

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

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

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

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

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

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

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

solid

”solid”に変更すると実線になります。

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

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

double
”dotted”を”double”に変更すると二重線になります。
<div style=”padding: 10px  ; margin-bottom: 10px;  border: 3px double #ccc;  border-radius: 10px; “>

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

groove
”dotted”を”groove”に変更すると立体的に窪んだ線になります。

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

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

ridge

”dotted”を”ridge”に変更すると立体的に隆起した線になります。
色は緑を指定してみました。

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

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

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

inset

線の色を青に指定してみました。
角も20pxにしたので丸みが大きくなりました。

上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。
ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。

<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】種薄いグレーの文章囲み枠の中の色をピンクに文字色を茶色に変更

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

ピンクの背景に茶色の文字はどうですか?
黒文字の方がいいと思った時は最後に記入してある、
「color : #663333」を削除してくださいグレーの枠が嫌だという方は
「solid #ccc」の「#ccc」を「#fff」に変更してください。
枠線が白に変更されます。横幅も小さくしないのであれば「width: 70%;」を削除してください。
<div style=”padding: 10px  margin-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; width: 70%; background: #fff0f5; color: #66333;”>

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

水色の背景に茶色の文字はどうですか?
黒文字の方がいいと思った時は最後に記入してある、
「color : #663333」を削除してください。グレーの枠が嫌だという方は
「solid #ccc」の「#ccc」を「#fff」に変更してください。
枠線が白に変更されます。横幅も小さくしないのであれば「width: 70%;」を削除してください。
<div style=”padding: 10px ; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; width: 70%; background: #f0ffff; color: #66333;”>

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

緑の背景です
<div style=”padding: 10px ; margin-bottom: 10px; border: 1px solid  #ccc; border-radius: 10px; width: 70%; background: #ccffcc ;”>

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

 

オレンジの背景です。
<div style=”padding: 10px ; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; width: 70%; background: #fdf5e6 ;”>

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

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

囲み枠が濃いオレンジ+背景色が薄いオレンジです
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #fab45f; width: 70%; background: #fcfaf7;“>

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

囲み枠が濃いオレンジ+背景色が薄いオレンジです(ダークタイプ)
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #e08946; width: 70%; background: #fcfaf7;“>

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

囲み枠が濃いピンク+背景色が薄いピンクです
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #ff99cc; width: 70%; background: #fcf7fb;”>

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

囲み枠が濃いピンク+背景色が薄いピンクです(ダークタイプ)
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #b81f70; width: 70%; background: #fcf7fb;”>

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

囲み枠が濃い青+背景色が薄い青です
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #635ea8; width: 70%; background: #f5f9fc;“>

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

囲み枠が濃い青+背景色が薄い青です(ダークタイプ)
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #635ea8;  width: 70%; background: #f5f9fc;“>

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

囲み枠が濃い緑+背景色が薄い緑です
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #339966;width: 70%; background: #f5fcf6;“>

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

囲み枠は一つ一つの指定の組み合わせで出来ています。
線と文字の空間はどのくらいあけるのか。
どんな線の枠線にするのか。
その枠線の色は?
枠線の太さは?
枠線の中の色は?
枠線の中の文字色は?
というように細かく要素を指定していって、囲み枠ができます。
どの枠を使うか決めて、指定していくのに時間がかかるかもしれませんが一度指定が終われば、簡単に使用できるようになりますので
頑張ってみてください♪
☆注意☆
自分の希望に変更する時は、小文字で書いてください♪
もし、エラーで無視される時は、文字の空白が混じっていないか。
【 : 】  と【 ; 】が間違っていないか。
反対に、記入しなくていい所に【 : 】が入っていないかをチェックしてください。
以上が、私がやらかすミスです(笑)
*** 関連ページ ***
>>>【wordpress】文章を囲み枠で装飾する簡単なやり方を紹介♪コピペOK
ワードプレス【wordpress】プラグインのインストールしないでの囲み枠での装飾の方法を紹介しています。
>>>ブログ装飾しましょ♪囲み枠&トリミング

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

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

 

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

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