こんにちは、はっしーです。
この記事ではタイトル通り、「WordPress上で、文章を枠で囲む方法」を紹介します。
ブログを読んでいると、
- なんとかこんとか
- あーだこーだ
- うんとかすんとか
こんな囲み枠を見かけますよね。この記事ではブログ初心者でもわかるように、この枠を付ける方法と、おすすめのテンプレートを紹介します。
記事の最後では、枠のデザインを自分で1から作る方法も解説しています。
これがマジで簡単なので、一度やってみてください。
文章に囲み枠を付ける方法
まずは文章に囲み枠を付ける方法からです。プラグインを1つインストールして、チョイチョイっと設定してやるだけで出来ます。
手順を1つ1つ追っていきます。
1.「AddQuickTag」をインストールする
まずはプラグイン「AddQuickTag」をインストールします。




上の画像の「新規追加」でプラグインを探しに行きます。
そしたら検索で「addquicktag」と打ってみてください。下のマークのプラグインが出てきます。




このプラグインを「今すぐインストール」でインストールしましょう。これでプラグインのインストール完了です。
2.使いたい囲み枠をセッティングしてみる
プラグインのインストールが終わったので、次は自分が使いたい囲み枠をセッティングしてみましょう。
WordPressのサイドメニュー「プラグイン」の、「インストール済みプラグイン」をクリックしてみてください。下の画像の所です。




すると、インストール済みプラグインの一覧が表示されます。
そしたら「AddQuickTag」の「設定」をクリックし、設定画面に行きましょう。下の画像の通り。




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




ここでイジる必要があるのは
- ボタン名
- 開始タグ
- 終了タグ
- チェックボックス(一番右)
の4つです。
まず①のボタン名ですが、自由に決めちゃってください。例えば
こんな枠が欲しければ、「ブルー点線」とでも打っておきましょう。
次に②の開始タグです。ここで囲み枠のデザインを決定します。今回は下記のコードをコピペして、②に貼り付けてみてください。尚、このコードを自作する方法は、記事の最後で解説しています。
因みにコピーは文を選択して「Ctrl」+「C」、貼り付けは「Ctrl」+「V」で出来ます。
続いて③の終了タグですが、下記のコードを貼り付けてください。
最後は④のチェックボックス(一番右)にチェックを入れましょう。
一番右のチェックボックスにチェックを入れれば、すべてのチェックボックスにチェックがつきます。これでおkです。
ここまで完了したら、「変更を保存」して、セッティング完了です。お疲れさまでした。
実際に囲み枠を付けてみる
設定が終わったので、次は実際に囲み枠を使ってみましょう。とりあえず「投稿」→「新規追加」で記事の編集画面にいきます。
次にクラシックブロックを表示させましょう。こんなやつです。




「そんなの出せないよ!」という方は、「TinyMCE Advanced」というプラグインを使ってみてください。これで「classic paragraph」というブロック使用できます。
話を戻します。上の画像の左側に、「QuickTags」という枠が見えますよね。そこをクリックすると、先ほど設定した「ブルー点線」が選択できます。
その「ブルー点線」をクリックしてみましょう。下の画像のようになります。




あとはその枠の中にカーソルを当てて、打ちたい文字を打ち込みます。これで、囲み枠で文を囲む作業は完了です。
複数行をまとめて囲みたい
一行の文だけでなく、複数行をまとめて囲む方法も解説します。下のようなやつです。
- 一行の文だけでなく、複数行をまとめて囲む方法も解説します。
- 一行の文だけでなく、複数行をまとめて囲む方法も解説します。
- 一行の文だけでなく、複数行をまとめて囲む方法も解説します。
こんな風に、箇条書きなどを枠でまとめて囲みたいときは、まず全文を打ち終えてから囲み枠を付けます。
順番としては
- 全文打ち込む
- 全文を選択する(カーソルで文の初めの文字をクリックしたまま、最後の文字まで引っ張る
- 「QuickTags」で、自分が付けたい枠の種類をクリック(今回は「ブルー点線」)
- ←こんな感じで行の先頭に1. 2. 3. …と連番を振ったりしたいときは、最後に連番を振る
こんな感じです。
おすすめテンプレート紹介
僕が使っている、おすすめテンプレートを紹介します。
今のところ僕は2種類のパターンしか使っていません。あまりバリエーションが多くても、選ぶのに時間がかかるので・・・。
まずはさっきから何回も登場してい青い点線の枠です。コードはこれです。
次は枠線と枠の中がグレーになるコードです。下記のコードをプラグイン「AddQuickTag」の設定画面に入り、「開始タグ」の所に突っ込んでみましょう。終了タグは変わりません(「</div>」と打つだけです)。
ちょうど↑のような囲み枠が出来ます。ブログの背景が白だと、結構メリハリがつくのかなと。
これら以外の枠デザインが欲しい【テンプレ置き場を紹介】
上で紹介した枠だけでも、大分見やすい記事になると思います。
しかし、自分のブログデザインによって、枠線の種類や色は変えたいですよね。そんな方にはコピペ枠わくさんがおすすめです。このサイトに行けば、大体の枠のテンプレートが手に入ります。
テンプレによって、線種を破線にしたり、ドットにしたり出来ます。
自分でデザイン(色、太さ、線種など)を作る方法
上で紹介したサイトのテンプレを使うのではなく、自分でデザインを決めたい!という方は、下記のコードをベースにしましょう。開始タグのところに突っ込むコードですね。
<
div
style
=
"border: △px (線種) #(枠の色); border-radius:△px; padding:△px; background:#(背景色)"
>
上記のコードについて解説します。
まず「border」の後の△ですが、ここで枠の太さを決めます。数字が大きくなるほど太くなります。色々試してみてください。
次に(線種)の部分です。この部分で線種を指定する文字を打ち込みます。線種は以下の通り。
実線 : solid
点線 : dotted
破線 : dashed
二重線 : double
へこんだ線 : groove
内側が浮いた線 : outset
外側が浮いた線 : inset
立体的な線⇒ridge
次に枠の色の指定です。「#○○○○○○」←この○6つに入る数字とアルファベットの組み合わせで、色を決定します。
この色を決定するコードをカラーコードといいます。使いたい色のカラーコードは原色大辞典さんを参考にすればOKです。
次です。カラーコードの続きのコードに、「 border-radius:△px
」とありますよね。このコードを追加すると、枠線の4つ角に丸みが出ます。
もうお分かりだとは思いますが、丸みの半径を「△px」の△部分で指定します。
△の数字を大きくするほど、丸みが大きくなります。
そして次に「padding:△px」です。このコードを追加すると、枠線と、中の文字の間隔を指定できます。
最後に「background:#○○○○○○」です。単語からお察しの通り、枠内の背景色を決定します。この色も 原色大辞典さんを参考にしてください。
上記の通りにコードを「AddQuickTag」の設定で「開始タグ」に打ち込めば、囲み枠を自作出来ます。お疲れさまでした。
コメント