━━━━━━━━━━━━━━━━━
■四角い枠を付ける↓
━━━━━━━━━━━━━━━━━
↓===の中をコピペ
=======================================
<div style="border:1px solid #ccc; border-radius:10px; padding:5px; margin:5px;　background:#fff; color:#000;>
★ここに入れたい内容を入れる。
</div>
=======================================
【コードの意味】
■　枠線
border:1px solid #ccc; 

border:線の太さ　線の形状　線の色;

↑線の太さ　線の形状（普通の線ならsolid、点線はdotted、二本線はdouble、破線はdashed）、最後が色。とわみらのカラーコードから好みの色絵お選んでコピペ、頭に#を付ける。）※末尾の;は忘れずに！

■　角を丸くする
border-radius:10px;
↑角を丸くする。2pxとかだとちょびっと丸くなる　10pxは結構丸い感じ。

■　内側の余白
 padding:5px; 
↑枠線の内側の余白。

■　外側の余白
margin:5px;
↑枠線の外側の余白

■　背景色
background:#fff;
↑背景の色。#fffは白。とわみらのカラーコードから好みの色を選んで頭に#付ければ背景の色が変えられる。

■　文字の色
color:#0066CC;
↑文字の色
━━━━━━━━━━━━━━━━━
■プロフの中に画像を入れる
━━━━━━━━━━━━━━━━━
=======================================
<img src="★ここにろだとかにUpした画像のURLを入れる">
=======================================
━━━━━━━━━━━━━━━━━
■一番上にメニューを付ける
━━━━━━━━━━━━━━━━━
<a href="#aaa">★ここにキャラの名前1</a>
<a href="#bbb">★ここにキャラの名前2</a>
<a href="#ccc">★ここにキャラの名前3</a>

<a name="aaa">★リンクさせたいキャラの項目1</a>
内容
内容
内容

<a name="bbb">★リンクさせたいキャラの項目2</a>
内容
内容
内容

<a name="ccc">★リンクさせたいキャラの項目3</a>
内容
内容
内容

━━━━━━━━━━━━━━━━━
★編集する時はリンクが消えちゃうのでバックアップは取っておいてください！