どうも、ゆきけーです。

 

今回は、ワードプレスの記事で、文字に囲いを付ける方法について
お話ししていきます。

 

 

記事を作っていると、特定の文章を
例としてピックアップしたかったり、
重要な部分を囲ったりしたくなりますよね。

 

毎回、太文字や色文字、下線ばかりが続いても
記事の印象が単調になってしまいますし。

 

手描きのノートなら、マーカーやボールペンで
簡単に文章を線で囲えるのに・・・と思いますよね。

 

でもhtmlで文字囲いとか難しそう、と思われるかもしれませんが、
慣れれば簡単ですし、別記事にまとめている、
htmlタグを登録してボタンひとつで呼び出せるプラグインを使えば
簡単に使い放題できるようになります。

 

なのでまずは、文章を囲う線をhtmlで見てみましょう。

 

文章を線で囲えるhtmlタグ

 

では実際に線で囲ったものを見てみましょう。

 
これが文章を線で囲った状態です。



改行にも対応していて、改行すればその分だけ
線が伸び縮みします。
そしてこれが、上の囲う線のhtmlタグです。

 

上のコードは間違って認識されるのを防ぐため

<を  &lt; に、
>を &gt; に置き換えています。

実際にワードプレス画面のテキストモードに入力する時は
これらを<>に変えてください。

 

このままではどのコードが何の情報や設定に対応しているのか分からないので、
ひとつずつ説明していきますね。

 

 

padding: これは文章と枠線の間の、「横部分」の余白の間隔です。
これがの数値が少なくなるほど文章と枠線の間が狭くなり、
多くなるほど間隔が空きます。

 

30pxです。
 
5pxです。
 

 

border: これは枠線の線のタイプです。3箇所設定できます。
上ではsolidですが、色々とパターンがあり、変えることが出来ます。
また、3pxのところは線の太さですね。
#4169e1のところは、枠線の色です。htmlコードの色を入力します。

 
none これは枠線が無しのコードです。
 
dotted これは点線です。6pxです。色は#228b22です。
 
double これは二重線です。10pxです。色は#ff0000です。
 
dashed 幅が広めの点線です。15pxです。色は#ff00ffです。
 

 

 

border-radius: これは、枠線のカドの丸さです。数字が大きくなるほど
カドが丸くなります。逆に少なくすると鋭角になりますね。

 
30pxです。
 
1pxです。
 

 

 

background-color: これは文字通り、枠線の中の文章の
背景の色です。枠線と同様、htmlのカラーコードを入れて変更できます。

 

 

 

margin これはtopとbottomがありますが、topは文章の上の余白、
bottomは下の余白の多さになります。
topが60px、



bottomが5pxです。
 
topが5px、



bottomが60pxです。
 

これらが、枠線を文章で囲うhtmlタグです。

 

そしてこのhtmlタグを登録してボタン1つで呼び出す
プラグインについては、こちらの記事で説明しています。

 

「AddQuicktag」好きなhtmlタグを登録して一発で出すプラグイン【☆】