記事・文章の文字サイズと色変更方法について

皆さん、本日（2015年9月3日）は何の日でご存知でしょうか？

マヤの予言によると、本日2015年９月３日は人類が滅亡するかもしれなそうです。
だとすると、一度きりの人生、思う存分に楽しまないと損ですよね。

WordPress（ワードプレス）サイトもそうです。

なので今回は、思う存分に文章の装飾について紹介したいとおもいます。

 

---

ご存知だと思いますが、[ビジュアル]画面であれば簡単に文章の文字サイズや色をカスタマイズすることが可能なんです。

ただし、より細かくカスタマイズしたい場合には、[テキスト]画面でタグを利用した記述ができないと難しいです。

ここでは、まずは記事・文章の文字サイズと色変更する際に多く使われたタグをいくつご紹介いたします。

---

①文字の色を変える

 

文字の色を変える場合には「font color=」タグを使って色を指定します。

赤<font color="red">赤</font>
<font color="blue">青</font>
<font color="green">緑</font>
<font color="yellow">黄色</font>
<font color="Fuchsia">ピンク</font>

 

②文字のサイズを変える

 

文字のサイズを変えるにはスタイルシートを使った％での変更方法などもありますが
ここでは簡単にできる「font size=」タグを使ったサイズ指定方法を紹介します。
サイズ指定は数字の１～７までで、数字が大きいほど大きな文字になります。

フォントサイズ１　⇒<font size="1">フォントサイズ１</font>

フォントサイズ4　⇒<font size="4">フォントサイズ4</font>

フォントサイズ7　⇒<font size="7">フォントサイズ7</font>

 

③その他文字の装飾

 

<del>文字に取り消し線を付ける</del>　　⇒　文字に取り消し線を付ける

<u>文字に下線を付ける</u>　　⇒　文字に下線を付ける

<font  style="background-color:#FFFF00">文字に背景色を付ける</font>　
⇒　文字に背景色を付ける

 

④補足内容：記事文章を枠線で囲む方法

 

枠で囲むタグはこちらになります。

[html] <div style=”padding: 20px; border: solid 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;”> ■ここに文章を入力する■</div> [/html]

下記にそれぞれのCSSの設定内容を参考して、色々と設定してみてください。

• padding — 枠と文章の余白
• border — 枠線の種類、太さ、色
• border-radius — 角丸の半径
• background-color — 背景色
• margin-top・margin-bottom — 枠の上下の余白

最後に、参考サイトを二つをご案内いたします。

＊カラーコード参考サイト：原色大辞典

＊HTML＆CSSタグ参考サイト：HTMLクイックリファレンス

 

次に、プラグインによるフォント指定や文字装飾

 

弊社では、カンタンに記事・文章のフォントスタイルやサイズ、色変更できるプラグインも用意しています。

GMO Font Agentは、GoogleウェブフォントをWordPress(ワードプレス)サイトで利用することを可能にしたプラグインで、671のスタイルを利用することができます。（2015年2月現在）

詳細の設定方法は下記に確認ください。

GMO WP Cloudプラグイン 【GMO Font Agent】

このプラグインをご利用すると、カンタンに記事の中身・タイトル・ヘッダーなどページの見出しを一箇所で編集することができます。

個性があるサイトを作成することが可能となります。

 

＊下記は編集後のページイメージ

 

 

また、このプラグインをご利用すると、[ビジュアル]（一般編集）環境で400種類以上のアイコン・マークが使用可能となります。

 

---

 

まとめ

 

 

人類はそんなにカンタンに滅亡しないことを信じ、WordPress（ワードプレス）を思い存分で楽しもう！

---