ブログを書いていると文字を太くしたり大きくしたりしたくなるものですよね。ワードプレスではプラグイン「TinyMCE Advanced」で簡単に文字の装飾が出来るのですが、記事内の一部の文章を枠で囲み色をつけてわかりやすくするにはHTMLタグによる記述が必要になります。
今回はブログで使える文字を枠で囲む方法をご紹介します。
コピペして使えますのでぜひご利用くださいませ。
HTMLとは
HTMLって言われても何が何だか分からないって人も多いと想います。HTMLとはWEBページを構成する文字列です。文字を装飾するにはHTMLに手を加えないといけません。ワードプレスではプラグインTinyMCE Advancedを使えばいちいちHTMLタグを入力する必要はありません。
▶TinyMCE Advanced の設定方法と使い方-バズ部
文章を枠で囲みさらに装飾を施す場合はTinyMCE Advancedだけでは設定できませんので、今回の記事をぜひ参考にしてみてくださいね。
文字装飾の基礎
文字を飾るにはまず基本的なマークアップの仕方を覚えましょう。マークアップは開始タグと終了タグで文字を囲むことを言います。
| 開始タグ | <span> |
| 終了タグ | </span> |
| 開始タグと終了タグで文字を囲む | <span>文字</span> |
文字の装飾は<span></span>内にさまざまな要素を記入することで見た目にも反映されます。
文字を装飾してみる
例えば文字に色を付ける場合は<span style=”color:カラーコード ;”>文章</span>と記述します。
文字の背景に色を付ける場合は<span style=”background-color:カラーコード;”>文章</span>です。
例
| <span style=”color:#4169e1 ;”>青い文字</span> | 青い文字 |
| <span style=”background-color:#4169e1;”>背景が青い</span> | 背景が青い |
＃で始まる6ケタの英数字を記入することで文字を好きな色に装飾することができます。
カラーコードは原色大辞典で調べるのがおすすめですよ。
文字を太くしたり、大きくすることもできます。
| <span style=”font-weight: bold;”>文字を太くする</span> | 文字を太くする |
| <span style=”font-size: 25px;”>文字を大きくする(px数を変更すると大きさが変わる)</span> | 文字を大きくする(px数を変更すると大きさが変わる) |
| <span style=”font-style: oblique”>文字を斜めにする</span> | 文字を斜めにする |
ブログ記事を枠で囲み色を付ける
文字装飾のHTMLが分かったところで、今度はブログ記事内の一部の文字を枠で囲んで色をつけてみましょう。
青い枠で文章を囲んでみました。文章の背景も色を付け、記事にメリハリをつけています。
↓こちらが記事を枠で囲むHTMLコードになります。コピペしてご利用いただけます。
<div style=”padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力します。</div>
HTMLの概要
●paddingの数値は文章と枠の幅です。広げたいときは数値を上げてください。
●border:は枠の種類です。solidは一般的な枠(実線)になります。
solid の部分を変更することで枠の見た目も変わります。
■dotted(点線)
■double(二重線)
■dashed(幅広の点線)
■none(無し)
●border-radiusは枠の角を丸くする記述です。数値を上げることでより丸みが出ます。角があったほうが良い方は消してください。
●background-colorは背景色です。
●margin-topとmargin-bottomは枠の余白部分の幅になります。
●色の設定は＃○○○○○○の部分です。原色大辞典を参考に好きな色を選んでくださいね。
まとめ
記事の装飾をすることでより見やすく、わかりやすい表現ができるようになります。見た目には好みがあるはずなので、お好きな色や幅等を設定してご利用くださいね。