こんにちは、ぜんです。
ワードプレスに標準で備わっている機能で文字を太くしたり、
下線を引いたり、色をつけたりすることはできますが、
それだけだと少し物足りないですよね。
今回は、ワードプレス記事の文章をHTMLタグで
装飾する方法についてお話していきたいと思います。
記事の文章をHTMLタグで装飾する方法
ワードプレスの記事の文章をHTMLタグで囲えば、色々な装飾を施すことができます。
文字の装飾をしないと殺風景な記事になってしまいますし、
逆に適切な装飾を施せば強く伝えたいことをハッキリと示すことができたり、
わかりやすい記事に仕上げることができます。
HTMLタグの装飾を活用していきましょう。
文章の背景に色をつける
まずは、文章の背景に色をつける方法についてです。
文章の背景に色をつけたい時は、
上記HTMLタグを使っていきます。
「background-color:色;」の色の部分にはカラーコードを入力します。
基本的にhtmlやcssなどで色を指定する際は、このカラーコードを使用します。
どの色がどのコードになるのかについては、
カラーコードをまとめているサイトを参考にしてください。
カラーコードをまとめているサイト↓
例えば、背景の色を黄色にしたかったら、
黄色のカラーコードは#ffff00なので、
と入力します。
実際にやるとこんな感じです。
グレーだったらこんな感じです。
オレンジだったらこんな感じです。
背景色をつけるだけでもかなり文章を強調させることができますね。
ちなみに、この装飾に限った話ではないですが、
ワードプレスのブログ記事内でHTMLタグを使う場合は、
ビジュアルモードではなく、一度テキストモードに切り替えて、
HTMLタグを挿入するようにしてください。
テキストモードで記述しないとタグが反映されませんのでご注意ください。
文章を枠線で囲う
文章を枠線で囲いたい時は、
上記HTMLタグを使っていきます。
<div>タグ内のスタイル設定で色々といじれるので、
細かく説明していきます。
①枠線の設定
<div>の中の「border:」の部分をいじることで枠線の設定を変更することができます。
例えば、
とすると、
こんな感じになります。
この「solid」の部分が実線を表しています。
とすると、
こんな感じですね。
線の種類はそれぞれ、
solid・・・実線
dotted・・・点線
dashed・・・破線
double・・・二重線
none・・・線無し
を表しています。
また、枠線の色を変えることも可能です。
とすると、
こんな感じに線の色を変えることができます。
そして、枠線の太さも変えることができます。
とすると、
こんな感じに線が太くなります。
②余白の設定
「padding: 余白;」の余白の部分をいじると、余白の設定をすることもできます。
例えば、
とすると、
こんな感じに文章と枠線の間に余白ができます。
paddingの値は、左から上、右、下、左の値を示しています。
③枠の背景色を変える
「background: 枠の背景色;」の背景色の部分をいじると、枠の背景色を変更できます。
例えば、
とすると、
こんな感じに枠の背景色を変えることができます。
プラグイン「AddQuicktag」の活用
ワードプレスのプラグイン「AddQuicktag」を使えば、
ワンタッチでHTMLタグを挿入するショートカットキーを作成することができます。
いちいちHTMLを打ち込む作業をしていたらキリがないので、
HTMLの装飾を頻繁に使うようならAddQuicktagを活用するようにしましょう。
AddQuicktagについては、↓の記事で使い方を解説しています。
⇒よく使うHTMLタグを登録！AddQuicktagの使い方
今回の記事のまとめ
今回はワードプレスブログの記事の文章を
HTMLタグで装飾する方法についてまとめさせていただきました。
色々とタグの数値を変更することでオリジナルの装飾を施すことができます。
自分で色々とスタイルの設定をいじってみて、
自分のブログ記事に合うHTMLタグを作成してみてください。
そして、作成したHTMLタグは簡単に記事編集画面で挿入できるように、
AddQuicktagというプラグインを導入しておくと良いでしょう。
HTMLタグの装飾を上手く活用して、魅力的な記事を仕上げていってくださいね。
