どうも、ゆきけーです。
今回は、ワードプレスの記事で、文字に囲いを付ける方法について
お話ししていきます。
記事を作っていると、特定の文章を
例としてピックアップしたかったり、
重要な部分を囲ったりしたくなりますよね。
毎回、太文字や色文字、下線ばかりが続いても
記事の印象が単調になってしまいますし。
手描きのノートなら、マーカーやボールペンで
簡単に文章を線で囲えるのに・・・と思いますよね。
でもhtmlで文字囲いとか難しそう、と思われるかもしれませんが、
慣れれば簡単ですし、別記事にまとめている、
htmlタグを登録してボタンひとつで呼び出せるプラグインを使えば
簡単に使い放題できるようになります。
なのでまずは、文章を囲う線をhtmlで見てみましょう。
文章を線で囲えるhtmlタグ
では実際に線で囲ったものを見てみましょう。
これが文章を線で囲った状態です。
・
・
・
改行にも対応していて、改行すればその分だけ
線が伸び縮みします。
そしてこれが、上の囲う線のhtmlタグです。・
・
・
改行にも対応していて、改行すればその分だけ
線が伸び縮みします。
1 |
<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。</div> |
上のコードは間違って認識されるのを防ぐため
<を < に、
>を > に置き換えています。
実際にワードプレス画面のテキストモードに入力する時は
これらを<>に変えてください。
このままではどのコードが何の情報や設定に対応しているのか分からないので、
ひとつずつ説明していきますね。
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です。
・
・
・
bottomが5pxです。
topが5px、
・
・
・
bottomが60pxです。
・
・
・
bottomが60pxです。
これらが、枠線を文章で囲うhtmlタグです。
そしてこのhtmlタグを登録してボタン1つで呼び出す
プラグインについては、こちらの記事で説明しています。
「AddQuicktag」好きなhtmlタグを登録して一発で出すプラグイン【☆】