上の様に枠を表示させて、その中に文字を表示させるには

１　コンテンツ追加でを追加します。

２　四角型か丸角型、どれかのサンプルコードをコピー＆ペーストします

■四角型のサンプルコード

<div style="border:5px solid #66CC00;padding:10px;">

■■

</div>

■塗りつぶし四角型のサンプルコード

<div style="background-color:#66CC00;padding:10px;">

■■

</div>

■丸角型のサンプルコード

<div style="border:5px solid #66CC00;padding:10px;border-radius:10px;">

■■

</div>

■塗りつぶし丸角型のサンプルコード

<div style="background-color:#66CC00;padding:10px;border-radius:10px;">

■■

</div>

３　青文字の「■■」部分に、表示させたい文字を入力「保存」ボタンクリックして保存します

4　枠のカスタマイズ

■線の太さ

<div style="border:5px solid #66CC00;padding:10px;">
四角型の枠
</div>

「border:5px」の数字を修正します。

■色

<div style="border:5px solid #66CC00;padding:10px;">
四角型の枠
</div>

青文字部分の「#66CC00」の部分をお好きな色のコードを修正します。
http://www.colordic.org/
のサイトを参考にしてください。

■塗りつぶしの色

<div style="background-color:#66CC00;padding:10px;">
四角型の枠
</div>

青文字部分の「#66CC00」の部分をお好きな色のコードを修正します。
http://www.colordic.org/

のサイトを参考にしてください。 

■丸角の大きさ
<div style="border:5px solid #66CC00;padding:10px;border-radius:10px;">
四角型の枠
</div>

青文字部分の「border-radius:10px;」の数字を変更します。

数字が大きくなると、丸角が大きくなり、小さくなると丸角も小さくなります。

■文字の表示位置（中央表示）

<div style="border:5px solid #66CC00;padding:10px;text-align:center;">
四角型の枠
</div>

■文字の表示位置（右揃え）

<div style="border:5px solid #66CC00;padding:10px;text-align:right;">
四角型の枠
</div>