プロフィールのページにバナーを貼ってみよう！ ＋ぷちカスタマイズ日記＋

ファンブログ　カスタマイズ　シンプル系スキン限定

---

前回の５枚のHTMLファイルの活用法のお話で、プロフィールページの有効活用のお話をしましたが、実はこの「プロフィール」のHTMLは１番単純に作られていますので、カスタマイズを始めるにはもってこいのＨＴＭＬなんです。

HTMLファイルは、カンタンに説明しますとブロックの集合体です。このプロフィールの構造は非常に単純で、大きく分けると「ヘッダー」「記事欄」の２つで、「記事欄」には「プロフィールタイトル」と「プロフィールの表」の２つしかないので、とってもわかりやすいんです。

このHTMLファイルの、どの記述が「プロフィールタイトル」や「プロフィールの表」なのかがわかれば、自分の好きな場所にバナーを貼ることができます。

---

バックアップを取ってから作業を始めれば安心ですし、構造は単純なので、ちょっと幅の広いサイドバーくらいの感覚で気楽にやってみましょう。

CSSやHTMLファイルのバックアップの方法

---

---

プロフィールのHTMLを開いたら、<div id="content">という記述を探してください。単純な構造なので、少し下にスクロールすればすぐ見つかります。

---

以下に説明をつけましたので、自分な好きな場所にバナータグを貼ってください。サイドバーと同じように文章も入力することができます。

---

<div id="content"> タイトルの上に貼りたい場合はココ！ <h2>{$ContentsTitle$}</h2> タイトルと表の間に貼りたい場合はココ！ {$ContentsBody$} 表の下に貼りたい場合はココ！ </div><!-- /content -->

◄　ここから下に貼ってください。 　 ◄　プロフィールタイトル 　 ◄　プロフィールの表（table） 　 ◄　ここから上に貼ってください。

---

HTMLの編集では「プレビュー(P)」がありますので、「保存(S)」さえしなければ、何度でも見ながらやり直すことができまし、「保存されている内容に戻す」を押せば、元に戻すこともできますので、サイドバーより編集しやすいと思います。レイアウトに納得できたら、「保存(S)」を押して終了です。

---

いかがでしたか？プレビューできないサイドバーよりカンタンだったのではないでしょうか。
このプロフィールのHTMLは「経歴を見る」を押したときも見に行くHTMLなんで、経歴が何も記載されていなくてもバナーは表示されますから、経歴を公開する設定にして確認してみてくださいね。

見栄えを良くするために、文字を装飾したり、中央揃えにするのもイイと思います。ただし、使用した開始タグは必ず終了タグで命令を止めてください。HTMLはつながっているので、終了タグを入れないと、隣のサイドバーまでひたすら命令が実行されますので注意してくださいね。

---

※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

---

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります