※今月からのタイムライン導入により、過去記事を追加修正しました。2012/04/04
まずはfacebookにログイン！
①ログイン後、画面左上の自分の名前か、右上のプロフィール（写真）をクリック
②プロフィールページ、カバー写真下の※印をクリックし「バナーを追加」を選択
③ボタンクリック後、
④表示されるコードをアメブロのフリープラグインorフリースぺースにコピペ
プロフィールバナーをカスタマイズ①
サイズ自体は使用しているプロフ写真によって様々だと思いますが、基本的に以下の画像がデフォルトのバナーになります。これを見た目よく、少しカスタマイズしてみます。
まずは上下にある余計な「青いリンクテキスト」を削除します。下記のソースの中から、グレー部分を削除した上で貼り付けてみましょう。
<!-- Facebook Badge START --><a href="https://www.facebook.com/copyself" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Jiro Abe">Jiro Abe</a><br/><a href="https://www.facebook.com/copyself" target="_TOP" title="Jiro Abe"><img src="https://badge.facebook.com/badge/100002372196244.719.1207710785.png" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="自分だけのバナーを作成しましょう。">バナーを作成</a><!-- Facebook Badge END -->
コピペするソースも以下のように、スッキリと短くなりました。
<!-- Facebook Badge START --><a href="https://www.facebook.com/copyself" target="_TOP" title="Jiro Abe"><img src="https://badge.facebook.com/badge/100002372196244.719.1207710785.png" style="border: 0px;" /></a><!-- Facebook Badge END -->プロフィールバナーをカスタマイズ②
バナー自体をカスタマイズしたい方は、バナー編集画面を利用してください。
⑤プロフィール用バナーページ、画面右上の「このバナーを編集」をクリック
⑥左サイドの表示項目を選択後、⑦「保存」ボタンをクリック
※プレビュー画面のバナー下に、選択した「名前」と「出身地」が追加されました。
レイアウトの表示方法も「縦」の他に「横」や「2列」がありますが、あまり使い道はないかもしれません。サイドバーに設置するには「縦」が一番適していると思うので。
以上、プロフバナーの設置方法を簡単にご紹介してみました。始めたばかりでまだ慣れていない方にとっては、facebookの画面はかなり使いづらいと思いますが、使っているうちに少しずつわかってくるので、長い目で取り組んでいきましょう！
以上、アメブロカスタマイズ＆ホームページ制作*Mydesignの*Copyselfでした。
アメブロカスタマイズ料金プラン＆過去の制作実績はコチラからご覧いただけます。