文字サイズや色を変更する


【お知らせ】
2014.8.13NewUIになり、文章コンテンツに機能が追加され、下記のHTML編集をしなくても簡単に文字変更ができるようになりました。


以下、過去の紹介内容です。ご参考まで。




文章項目内で「文字サイズの変更方法」と「文字サイズ&色の変更方法」をご紹介します。

 

これは、文字の大きさを16pxにした例です。

これは、文字の色を赤にしてみました

これは、文字の大きさを18pxにして、色を赤にしています。

【変更方法】

1)HTMLが編集できる画面(HTMLソースエディタ)に切り替えます。

2)下記のHTMLソースを“コピペ”して使ってください。

 

文字のサイズを変える


font-size(フォントサイズ)の右の数字でサイズ指定します。pxは、ピクセルと読みます。

 

<span style="font-size: 18px;">サイズを変えたい文字</span>

 

↓ここから【コピペ】どうぞ♪

<span style="font-size: 10px;">11px</span>

<span style="font-size: 11px;">11px</span>

<span style="font-size: 12px;">12px</span>

<span style="font-size: 13px;">13px</span>

<span style="font-size: 14px;">14px</span>

<span style="font-size: 16px;">16px</span>

<span style="font-size: 18px;">18px</span>

<span style="font-size: 21px;">21px</span>

<span style="font-size: 24px;">24px</span>

<span style="font-size: 28px;">28px</span>


文字の色を変更する


色のみの変更は、HTML画面を開かなくても、
文章の編集画面「A」をクリックすると指定できますので、通常はそれを使えばOKです。

 

ここでは、文字サイズを変えたらカラー設定がうまくいかない、なんて場合の参考まで、HTML編集画面での変更方法を紹介します。

パターンは、2つ。カラーネームの指定と16進法でコードを指定です。

 

パターン1:カラーネームで指定する。

colorの右にカラーネームを記入し、色指定します。

 

<span style="color:black;">色を変えたい文字</span>

 

↓ここから【コピペ】どうぞ♪

 

<span style="color:red;">ここに色を変えたい文字・文章を入力</span>

<span style="color:blue;">ここに色を変えたい文字・文章を入力</span>

<span style="color:green;">ここに色を変えたい文字・文章を入力</span>

<span style="color:yellow;">ここに色を変えたい文字・文章を入力</span>

<span style="color:navi;">ここに色を変えたい文字・文章を入力</span>

<span style="color:purple;">ここに色を変えたい文字・文章を入力る</span>

<span style="color:maroon;">ここに色を変えたい文字・文章を入力</span>

 

パターン2:RGBの16進法で指定する。

RGBの16進数値で、色指定します。

colorの右にある#000000と、#と6桁の英数がコードになります。

 

<span style="color:#000000;">色を変えたい文字</span>

 

↓ここから【コピペ】どうぞ♪

 

<span style="color:#666666;">ここに色を変えたい文字・文章を入力</span>

<span style="color:#0066FF;">ここに色を変えたい文字・文章を入力</span>

<span style="color:#FF0000;">ここに色を変えたい文字・文章を入力</span>

 

これは、沢山のパターンがあります。

その一部ですが、こちらの一覧でコードを確認して、#右の6桁を書きかえてご利用ください。

____ 000000 ____ 111111 ____ 222222 ____ 333333 ____ 444444 ____ 555555
____ 666666 ____ 777777 ____ 888888 ____ 999999 ____ aaaaaa ____ bbbbbb
____ cccccc ____ dddddd ____ eeeeee ____
____ 000000 ____ 000033 ____ 000066 ____ 000099 ____ 0000CC ____ 0000FF
____ 003300 ____ 003333 ____ 003366 ____ 003399 ____ 0033CC ____ 0033FF
____ 006600 ____ 006633 ____ 006666 ____ 006699 ____ 0066FF ____ 0066FF
____ 009900 ____ 009933 ____ 009966 ____ 009999 ____ 0099CC ____ 0099FF
____ 00CC00 ____ 00CC33 ____ 00CC66 ____ 00CC99 ____ 00CCCC ____ 00CCFF
____ 00FF00 ____ 00FF33 ____ 00FF66 ____ 00FF99 ____ 00FFCC ____ 00FFFF
____ 330000 ____ 330033 ____ 330066 ____ 330099 ____ 3300CC ____ 3300FF
____ 333300 ____ 333333 ____ 333366 ____ 333399 ____ 3333CC ____ 3333FF
____ 336600 ____ 336633 ____ 336666 ____ 336699 ____ 3366CC ____ 3366FF
____ 339900 ____ 339933 ____ 339966 ____ 339999 ____ 3399CC ____ 3399FF
____ 33CC00 ____ 33CC33 ____ 33CC66 ____ 33CC99 ____ 33CCCC ____ 33CCFF
____ 33FF00 ____ 33FF33 ____ 33FF66 ____ 33FF99 ____ 33FFCC ____ 33FFFF
____ 660000 ____ 660033 ____ 660066 ____ 660099 ____ 6600CC ____ 6600FF
____ 663300 ____ 663333 ____ 663366 ____ 663399 ____ 6633CC ____ 6633FF
____ 666600 ____ 666633 ____ 666666 ____ 666699 ____ 6666CC ____ 6666FF
____ 669900 ____ 669933 ____ 669966 ____ 669999 ____ 6699CC ____ 6699FF
____ 66CC00 ____ 66CC33 ____ 66CC66 ____ 66CC99 ____ 66CCCC ____ 66CCFF
____ 66FF00 ____ 66FF33 ____ 66FF66 ____ 66FF99 ____ 66FFCC ____ 66FFFF
____ 990000 ____ 990033 ____ 990066 ____ 990099 ____ 9900CC ____ 9900FF
____ 993300 ____ 993333 ____ 993366 ____ 993399 ____ 9933CC ____ 9933FF
____ 996600 ____ 996633 ____ 996666 ____ 996699 ____ 9966CC ____ 9966FF
____ 999900 ____ 999933 ____ 999966 ____ 999999 ____ 9999CC ____ 9999FF
____ 99CC00 ____ 99CC33 ____ 99CC66 ____ 99CC99 ____ 99CCCC ____ 99CCFF
____ 99FF00 ____ 99FF33 ____ 99FF66 ____ 99FF99 ____ 99FFCC ____ 99FFFF
____ CC0000 ____ CC0033 ____ CC0066 ____ CC0099 ____ CC00CC ____ CC00FF
____ CC3300 ____ CC3333 ____ CC3366 ____ CC3399 ____ CC33CC ____ CC33FF
____ CC6600 ____ CC6633 ____ 6CC6666 ____ CC6699 ____ CC66CC ____ CC66FF
____ CC9900 ____ CC9933 ____ CC9966 ____ CC9999 ____ CC99CC ____ CC99FF
____ CCCC00 ____ CCCC33 ____ CCCC66 ____ CCCC99 ____ CCCCCC ____ CCCCFF
____ CCFF00 ____ CCFF33 ____ CCFF66 ____ CCFF99 ____ CCFFCC ____ CCFFFF
____ FF0000 ____ FF0033 ____ FF0066 ____ FF0099 ____ FF00CC ____ FF00FF
____ FF3300 ____ FF3333 ____ FF3366 ____ FF3399 ____ FF33CC ____ FF33FF
____ FF6600 ____ FF6633 ____ FF6633 ____ FF66999 ____ FF66CC ____ FF66FF
____ FF9900 ____ FF9933 ____ FF9966 ____ FF9999 ____ FF99CC ____ FF99FF
____ FFCC00 ____ FFCC33F ____ FFCC66 ____ FFCC99 ____ FFCCCC ____ FFCCFF
____ FFFF00 ____ FFFF33 ____ FFFF66 ____ FFFF99 ____ FFFFCC ____

FFFFFF

 

文字のサイズと色をかえる


font-size:14px;color:#0000;という風に2つ繋げて記述します。

 

<span style="font-size:14px;color:#FF0099;">ここに色とサイズを変えたい文字・文章を入力</span>