【自作可能】WordPressで文に囲み枠を付ける手順【おすすめテンプレートも紹介】

こんにちは、はっしーです。

この記事ではタイトル通り、「WordPress上で、文章を枠で囲む方法」を紹介します。

ブログを読んでいると、

 

 

こんな囲み枠を見かけますよね。この記事ではブログ初心者でもわかるように、この枠を付ける方法と、おすすめのテンプレートを紹介します。

記事の最後では、枠のデザインを自分で1から作る方法も解説しています。

これがマジで簡単なので、一度やってみてください。

文章に囲み枠を付ける方法

まずは文章に囲み枠を付ける方法からです。プラグインを1つインストールして、チョイチョイっと設定してやるだけで出来ます。

手順を1つ1つ追っていきます。

1.「AddQuickTag」をインストールする

まずはプラグイン「AddQuickTag」をインストールします。

上の画像の「新規追加」でプラグインを探しに行きます。

そしたら検索で「addquicktag」と打ってみてください。下のマークのプラグインが出てきます。

このプラグインを「今すぐインストール」でインストールしましょう。これでプラグインのインストール完了です。

2.使いたい囲み枠をセッティングしてみる

プラグインのインストールが終わったので、次は自分が使いたい囲み枠をセッティングしてみましょう。

WordPressのサイドメニュー「プラグイン」の、「インストール済みプラグイン」をクリックしてみてください。下の画像の所です。

すると、インストール済みプラグインの一覧が表示されます。

そしたら「AddQuickTag」の「設定」をクリックし、設定画面に行きましょう。下の画像の通り。

設定画面に入ったら、囲み枠が使えるようになるまであと少しです。設定画面に、下のような部分がありますよね。

ここでイジる必要があるのは

 

の4つです。

まず①のボタン名ですが、自由に決めちゃってください。例えば

こんな枠が欲しければ、「ブルー点線」とでも打っておきましょう。

次に②の開始タグです。ここで囲み枠のデザインを決定します。今回は下記のコードをコピペして、②に貼り付けてみてください。尚、このコードを自作する方法は、記事の最後で解説しています。

因みにコピーは文を選択して「Ctrl」+「C」、貼り付けは「Ctrl」+「V」で出来ます。

続いて③の終了タグですが、下記のコードを貼り付けてください。

最後は④のチェックボックス（一番右）にチェックを入れましょう。

一番右のチェックボックスにチェックを入れれば、すべてのチェックボックスにチェックがつきます。これでおｋです。

ここまで完了したら、「変更を保存」して、セッティング完了です。お疲れさまでした。

実際に囲み枠を付けてみる

設定が終わったので、次は実際に囲み枠を使ってみましょう。とりあえず「投稿」→「新規追加」で記事の編集画面にいきます。

次にクラシックブロックを表示させましょう。こんなやつです。

「そんなの出せないよ！」という方は、「TinyMCE Advanced」というプラグインを使ってみてください。これで「classic paragraph」というブロック使用できます。

話を戻します。上の画像の左側に、「QuickTags」という枠が見えますよね。そこをクリックすると、先ほど設定した「ブルー点線」が選択できます。

その「ブルー点線」をクリックしてみましょう。下の画像のようになります。

あとはその枠の中にカーソルを当てて、打ちたい文字を打ち込みます。これで、囲み枠で文を囲む作業は完了です。

複数行をまとめて囲みたい

一行の文だけでなく、複数行をまとめて囲む方法も解説します。下のようなやつです。

 

こんな風に、箇条書きなどを枠でまとめて囲みたいときは、まず全文を打ち終えてから囲み枠を付けます。

順番としては

 

こんな感じです。

おすすめテンプレート紹介

僕が使っている、おすすめテンプレートを紹介します。

今のところ僕は2種類のパターンしか使っていません。あまりバリエーションが多くても、選ぶのに時間がかかるので・・・。

まずはさっきから何回も登場してい青い点線の枠です。コードはこれです。

次は枠線と枠の中がグレーになるコードです。下記のコードをプラグイン「AddQuickTag」の設定画面に入り、「開始タグ」の所に突っ込んでみましょう。終了タグは変わりません（「</div>」と打つだけです）。

ちょうど↑のような囲み枠が出来ます。ブログの背景が白だと、結構メリハリがつくのかなと。

これら以外の枠デザインが欲しい【テンプレ置き場を紹介】

上で紹介した枠だけでも、大分見やすい記事になると思います。

しかし、自分のブログデザインによって、枠線の種類や色は変えたいですよね。そんな方にはコピペ枠わくさんがおすすめです。このサイトに行けば、大体の枠のテンプレートが手に入ります。

テンプレによって、線種を破線にしたり、ドットにしたり出来ます。

自分でデザイン（色、太さ、線種など）を作る方法

上で紹介したサイトのテンプレを使うのではなく、自分でデザインを決めたい！という方は、下記のコードをベースにしましょう。開始タグのところに突っ込むコードですね。

<div style="border: △px （線種） #(枠の色); border-radius:△px; padding:△px; background:#（背景色）">

上記のコードについて解説します。

まず「border」の後の△ですが、ここで枠の太さを決めます。数字が大きくなるほど太くなります。色々試してみてください。

次に（線種）の部分です。この部分で線種を指定する文字を打ち込みます。線種は以下の通り。

 

次に枠の色の指定です。「#○○○○○○」←この○6つに入る数字とアルファベットの組み合わせで、色を決定します。

この色を決定するコードをカラーコードといいます。使いたい色のカラーコードは原色大辞典さんを参考にすればOKです。

次です。カラーコードの続きのコードに、「 border-radius:△px」とありますよね。このコードを追加すると、枠線の4つ角に丸みが出ます。

もうお分かりだとは思いますが、丸みの半径を「△px」の△部分で指定します。

△の数字を大きくするほど、丸みが大きくなります。

そして次に「padding:△px」です。このコードを追加すると、枠線と、中の文字の間隔を指定できます。

最後に「background:#○○○○○○」です。単語からお察しの通り、枠内の背景色を決定します。この色も 原色大辞典さんを参考にしてください。

上記の通りにコードを「AddQuickTag」の設定で「開始タグ」に打ち込めば、囲み枠を自作出来ます。お疲れさまでした。