FC2バトンのデザイン変更方法｜おすすめ　マイベスト映画 & DVD

2009.05.28

FC2のバトンをやってみましたが、デザインを変えることができないんですよねぇ。
もう少しデザイン性のあるバトンにしたかったので、
前回私が作ったバトン「あなたが映画監督になったら・・・バトン」では
テンプレートのスタイルシートを使ってデザインをカスタマイズしてみました。

ということでFC2のバトンのデザインのカスタマイズ方法をご紹介したいと思います。
興味のある方はみなさんもやってみてください。

テンプレートのスタイルシート

まずはみなさんがお使いのテンプレートのスタイルシート部分に
あるものを挿入しなくてはいけないので、順を追ってやってみましょう。

管理画面を開く。
項目「環境設定」の中にある「テンプレートの設定」を開く。
「HTML編集」と「スタイルシート編集」の２つの編集画面がありますよねっ。
2つ目の「スタイルシート編集」の画面を見てください。
暗号みたいなのがずら～っと並んでいますよねっ。
右のスクロールバーを使って、一番下までスクロールしてください。
一番下に、あるものを挿入するのですが、
少し離して挿入した方が管理しやすくなるので
「改行」を２～３回ほどしてください。
その場所に下記のグレー部分に書かれているものを
コピーして貼り付けてください。
貼り付けたら、「更新」ボタンをクリックして終了です。

　↓　これをコピーして貼り付けてください　↓

/* バトンのタイトル部分 */
.baton_title{
text-align : center ;
font-weight : bold ;
padding: 3px 0px 3px 0px ;
margin : 30px 0px 30px 0px;
border-left: solid 10px #b59c8a;
border-bottom: solid 1px #b59c8a;
}

/* バトンのタイトル以外の全体 */
.blog_baton{}

/* 質問部分 */
.baton_q{
color: #8a5a47;
font-weight : bold ;
background: #cccccc;
padding: 1px 0px 2px 3px ;
}

/* 質問の番号（Q1）*/
.q_number{
font-weight : bold ;
color: #ac204e;
margin : 0px 10px 0px 0px;
}

/* 回答の部分 */
.baton_a{
margin : 10px 0px 20px 35px;
}

/* 回答の番号（A1） */
.a_number{
font-weight : bold ;
color: #659cbf;
margin : 0px 10px 0px 0px;
}

デザイン変更完了

どうですか？うまくいきましたか？
これでFC2のバトンに挑戦した場合、
私のバトンと同じようなデザインで自動的に表示されます。
もしもっとこのようなデザインにしたいという要望などありましたら、
あと分かる範囲でお教えしたいと思いますので、気軽に質問してくださいねっ。

あと挿入した後に、テンプレートを変更されると
バトンのデザインはなくなってしまいますので、
テンプレートを変えたら、変えた新しいテンプレートにも
先ほどのグレイの中のものをコピーして貼り付けてください。

ということで
みなさんもどんどんバトンに挑戦してみてください。
あと、バトンを作ってみるのも楽しいですよっ。