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

WordPressで文章を枠で囲む方法 ブログ
広告

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

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

ブログを読んでいると、

 

  1. なんとかこんとか
  2. あーだこーだ
  3. うんとかすんとか

 

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

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

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

広告

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

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

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

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

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

サイドメニュー → プラグイン → 新規追加をクリック

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

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

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

広告

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

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

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

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

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

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

addquicktag設定

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

 

  1. ボタン名
  2. 開始タグ
  3. 終了タグ
  4. チェックボックス(一番右)

の4つです。

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

この文を囲っている枠

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

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

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

<div style=”border:1px dashed #0CF;padding:10px;border-radius:10px;”>

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

</div>

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

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

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

広告

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

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

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

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

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

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

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

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

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

 

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

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

順番としては

 

  1. 全文打ち込む
  2. 全文を選択する(カーソルで文の初めの文字をクリックしたまま、最後の文字まで引っ張る
  3. 「QuickTags」で、自分が付けたい枠の種類をクリック(今回は「ブルー点線」)
  4. ←こんな感じで行の先頭に1. 2. 3. …と連番を振ったりしたいときは、最後に連番を振る

こんな感じです。

広告

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

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

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

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

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

<div style=”border:1px solid #CCC;padding:10px;border-radius:10px;background:#EEE;”>

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

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

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

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

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

広告

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

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

<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」の設定で「開始タグ」に打ち込めば、囲み枠を自作出来ます。お疲れさまでした。

広告
ブログ
広告
シェアする
はっしーをフォローする
はしブロ

コメント