教えてください♪
「Facebookもチェック」の四角い欄を
私もブログ内に入れたいのですが
どうやったらできるのでしょうか?プリザーブドフラワーの教室をしている
美希さんからのご質問です
美希さんはアメブロを使っているので
今回は、アメブロを例にご説明いたしま~す
![メモ](https://stat.ameba.jp/blog/ucs/img/char/char2/131.gif)
facebookバナーをサイドバーに設置する方法1.Fabebookバナーのサイトでバナーの種類を選ぶfacebookにログインした状態で、
Fabebookバナーのサイトを開きます
![女性のための音声編集講座♪](https://stat.ameba.jp/user_images/20121129/20/coqua/b8/3c/p/o0400019712308585236.png?caw=800)
■ Fabebookバナー
⇒
https://www.facebook.com/badges/バナーの種類は4つありますので、
設置したいものをを選んでクリック!
・ プロフィール用バナー
・ 「いいね!」バナー
・ 写真バナー
・ facebookページ用バナー
個人ページのプロフィールのバナーを設置したい場合は
こちらの 「 プロフィール用バナー 」
フェイスブックページのバナーを設置したい場合は
こちらの 「 facebookページ用バナー 」
![女性のための音声編集講座♪](https://stat.ameba.jp/user_images/20121129/20/coqua/dd/07/p/o0372010812308585232.png?caw=800)
クリックすると、コードを取得するページが表示されます(^_^)b
2.バナー設置用のコードを取得するクリックして開いたページには、このようなボタンが並んでいるので
右側の「 Other 」をクリックして、表示されたコードをコピーします
![女性のための音声編集講座♪](https://stat.ameba.jp/user_images/20121129/20/coqua/14/9f/p/o0361012712308585234.png?caw=800)
コピーしたコードを、アメブロのサイドバーの
「 フリースペース 」 貼り付ければOK!
これで、facebookバナーの設置が完了です♪カンタンですね~
![ドキドキ](https://stat.ameba.jp/blog/ucs/img/char/char2/031.gif)
↓ ここからは、自分好みにカスタマイズする方法です♪ ↓
表示する内容を変更したいコード取得画面の右上にある「 このバナーを編集 」をクリックすると
表示項目を変更することができます
![女性のための音声編集講座♪](https://stat.ameba.jp/user_images/20121129/20/coqua/4b/58/p/o0400010212308585235.png?caw=800)
設定を変更しても、コードは同じままでOKなので
必要に応じて内容を変えてみましょう
![女性のための音声編集講座♪](https://stat.ameba.jp/user_images/20121129/20/coqua/a0/00/p/o0378044912308585452.png?caw=800)
サイドバーの中でバランスよく配置したいコピーしたバナーのコードを
<div style="text-align:center"> と </div> ではさむと
中央寄せになるので、サイドバーの中でバランスが良くなります
バナーの上下にあるリンクを外したいコードの前半のこの部分を削除すると
バナーの上にある名前のリンクを消すことができます
<a href="https://www.facebook.com/coquatv" 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="Coqua Net">Coqua Net</a><br/>
後半のこの部分を削除すると
バナーの下にある「バナーを作成」というリンクを消すことができます
<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>
あっ!という間にできますので
ぜひぜひチャレンジしてみてくださいね
![ニコニコ](https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif)
『 設置できました~! 』 のご報告
また、ご質問などは、コメント欄までお気軽にどうぞ♪
⇒ 設置できましたぁ~!
⇒ 質問がありまぁ~す!