ブログで記事を書いていると、文字を大きくしたり色を付けたり下線を引いたりといろいろと装飾したり強調したくなりますよね。ワードプレスでは「TinyMCE Advanced」というプラブインを入れることで簡単に文字の強調や装飾などが出来るようになります。
しかし、記事の一部の文章を枠で囲んだり色をつけて強調するにはHTMLタグを使う必要があります。 誰もが一度は枠で囲って強調したい、と考えたことがあるのではないでしょうか？
そこで今回は、ワードプレスで使える文章を枠で囲む方法をご紹介します。 この方法はワードプレスだけでなく、無料ブログで記事を書くときにも使えます。
コピペで使えるのでぜひ使ってみてくださいね。
HTMLとは
「そもそもHTMLってなに？」
という人も多いのではないでしょうか？
HTMLとはワードプレスや無料ブログなども含めたWEBページを構成する半角英数字の文字列です。 文字を大きくしたり色を付けたりするにはHTMLをいじらないと出来ません。
ワードプレスでは「TinyMCE Advanced」のプラグインを使うことで、文字を装飾するときにHTMLタグを入力する必要がありません。
しかし、記事内の文章の一部を枠で囲んだり色をつけたりするには「TinyMCE Advanced」だけでは設定することができないので、HTMLタグを入力する必要があります。
では早速、文章を枠で囲む方法をご紹介していきます。
ワードプレス記事を枠で囲んで色をつける方法
例として、赤い枠とピンク色の背景で文章を囲んでみました。
こちらが上記の赤い枠とピンク色の背景のHTMLコードになります。 コピペして使うことができます。
HTMLの解説
こちらでは上記のHTMLの色や枠の太さなどの変更する方法をご紹介していきます。
◆padding:
枠の幅を表す数値です。 padding: ○pxの○部分の数字を上げることで枠が広がります。
◆border:
枠の種類を表しています。
上記のHTMLではborder: solid 2px #FF0000
solidは上記のような一般的な枠
dottedは点線
doubleは二重線
dashedは幅広の点線
noneは枠線なし
2pxは枠線の太さを表し、＃FF0000は枠線の色を表しています。
◆border-radius:
枠の角を丸くします。数値を上げることでより角が丸くなります。 角を丸くしたくない場合は、border-radius自体を消してください。
◆background-color:
背景色を表します。
◆margin-topとmargin-bottom
枠の余白部分の幅を表します。 数値を上げることで余白の部分が広がります。
※色の設定は原色大辞典を参考にしてください。
まとめ
記事の装飾をすることで、読んでもらいたい部分をしっかり読んでもらうことができますし、読者もメリハリが出て読みやすくなるという、両者にとってメリットが出てきます。
色や枠の太さ、種類は各自好みが分かれるので、いろいろと数値や色を変更して使ってみてくださいね♪
