これから紹介するHTMLとCSSを使えば文字を大きくしたり色を付けたり、線を付ける事などが簡単にできます。
ページの装飾にぜひご利用ください。

はじめに

Pタグについて

これから紹介するもののほとんどにPタグが使用されています。文字を挟むようにして使うPタグ（<P>）ですが、このPタグは段落を指定するためのタグとなります。
<p>～</p>で囲まれたテキストは1つの段落であることを示し、次にくる文字などの間に1行の隙間ができるのが特徴です。

カラーについて

文字色や背景色などを決める時の参考サイトは以下となります。
カラーサイト.com

基本

【文字を赤色にする】

【文字を大きくする】

文字の大きさを指定する場合は、100％を基準としてここから〇％大きくするかという％（パーセント）使いや、ピクセル（20px）使い、1文字を基準として表示するem表示などがあります。好みでお選びください。

【文字を太くする】

【文字を大きくて赤い太文字にする】

文字の後ろに背景色を設定する

【赤い背景を設定する】

【文字の周りに隙間を設定する】

「padding」というタグが文字の周りに隙間を設定するものです。上の例では20pxにしていますが、この20pxというのは「上下左右に20pxの空間を設定してね！」というもので、細かく設定したい場合はpadding:10px 20px 30px 40px;とします。
「10px＝上に10px」「20px＝右に20px」「30px＝下に30px」「40px＝左に40px」となります。
数字は、上から時計周りと覚えるとわかりやすいかと思います。

線を設定する

線の幅を変えてみたり、線をグラデーションにしてみたりと線にはたくさんの種類がありますのでお好みで使用してみてください。

HTMLエディター内のショートコードで簡単装飾

詳細を入力する箇所にhtmlEditorというものがあり、このボタンを使用することで簡単に装飾したり文字の位置などを決定することができます。ここでは代表的なものを紹介します。

【H3見出しa】～【H5見出しa】ボタン

こちらで用意したすでに装飾されている見出しです。

H3見出しa

H4見出しa

H5見出しa

【改行】ボタン

改行したい時に使用します。
入力した見た目では改行されていても、仕様によって改行されない場合がありますので積極的にご利用ください。

【Layout1/2A】ボタン

左に画像／右にテキストなどのように配置したいときに使用します。

【Layout1/2B】ボタン

上で紹介した【Layout1/2A】ボタンの左右の比率を変更することができます。

【Layout1/3】ボタン

さらに分割することもできます。例）左にタイトル（テキスト）／真ん中に画像／右に詳細（テキスト）など

【Youtube動画】ボタン

Youtube動画のURLを入れるだけで、簡単にレスポンシブ対応のYoutube動画が挿入できます。

【横タブ】ボタン

押すと、そのタブに対応した内容表示されます。

【縦タブ】ボタン

【スポイラーa】ボタン

押すと下に開閉しテキストが現れます。

【スポイラーb】ボタン

その他いろいろ

上で紹介したもの以外にもたくさんのタグがあり装飾できますので、ぜひご利用ください。