新着記事
2010年12月06日

FC2拍手ブログパーツのカスタムモードをSeesaaブログに設置

FC2拍手はFC2ブログではないブログユーザーでも利用できます。また、自分のブログで拍手数が多い記事を表示する「ランキングブログパーツ」があり、ブログに設置すればいわゆる“このブログの人気記事”を閲覧者にアピールすることができますね。ところがブログパーツのデザイン選択肢はピンクとブルーの2種類だけです。デザインをカスタマイズできる「カスタムモード」もあるのですが、FC2サービスの管理内でスタイルシートの設定ができるのは、FC2ブログユーザーに限られます。ピンクやブルーのブログパーツは自分のブログのテンプレートに合わないからと、設置を諦めてしまっていませんか?

でもスタールシートが公開されているので、Seesaaブログなどカスタマイズの自由度が高いブログサービスなら、カスタムモードが設置できるのです。Seesaaブログでのカスタムモードの設置の仕方を、スタイルシートがわからない人でもできるように、順を追って解説します。

CSS(スタイルシート)ファイルを作成する
《FC2拍手の管理ページで》
自分のブログ内記事のランキングを取得するには、「FC2拍手ランキング」に参加が前提です。まずFC2拍手の管理ページの〔拍手の管理〕から〔拍手の設定〕と進み、「拍手ランキングの参加」の項目を「参加する」にしておきます。

FC2拍手管理画面

次に〔拍手タグ/ブログパーツ〕→〔ブログパーツ作成〕と開き、「ブログパーツの色」の項目の「CSSの説明はこちらから」をクリックします。ブログパーツのスタイルシートのソースが書かれたページが開きますので、上部の点線の罫線に囲まれた説明文「以下のソースは……そちらに追加してください。」を省いた下の、ソースを全てコピーし、パソコンの「メモ帳」などのテキストエディタに貼り付けます。ちなみに上部説明文も含めたとしても、実際はデザイン指定に影響はしません。次にスタイルシートの変更箇所の説明をします。

スタイルシートソースのカスタマイズ
スタイルシートの前半部分左の画像はスタイルシートの前半部分に説明を加えたものです。画像をクリックすると拡大します。
(1) 赤枠部分は必要ありません。
(2) ブログパーツの横幅サイズの変更について
 ブログパーツはサイドカラム(サイドバー)に設置する場合がほとんどですが、使っているテンプレートによっては横幅200pxではサイドカラムに収まりきれないこともあります。幅200pxに満たないサイドカラムに、このまま貼るとサイドカラム自体がメインカラムの下に落ちてしまうので、その場合はサイズを変更します。
(3) 表のタイトル行背景色を変えたい場合は
 「上部拍手ランキングタイトル」の『background-color: #FF99CC;』部分で表題の背景色をピンク色に指定してあります。ここを変えたければ、「#FF99CC」をお好みの色のコードに変更します。ここを変更すると最下段の行の色も変更されます。カラーコードがわからない場合は、Web Safe Color一覧表/カラーチャートカラーコード [WEBデザイン用] を参考に。

(3) 表のタイトル行背景色の変更について
 表のタイトル行背景色をもし淡い色に変更すると、タイトルのフォントが「white」なのでタイトルが目立たず見難くなってしまいます。その場合は「下部拍手ランキングタイトル」の『color: #FFFFFF;』部分でフォントの色指定を変更します。ちなみに『#000000』がblackです。

スタイルシートの前半部分←スタイルシートの後半部分の解説付き画像。画像をクリックすると拡大します。オリジナル画像は大きいので、最大に拡大した画像をマウスでつかんでぐりぐり動かしながらご覧下さい。
上記と同様にして、「見出し内背景色」「順位欄背景色」「順位数・拍手数のフォント色」「ランキングタイトル文字色」を変更できます。図解では省きましたがテーブル(表)の罫線の色も変更可能です。カラーコードをコピー&ペーストする際に、カラーコードの数字の次にあるセミコロンを消してしまわないように気をつけましょう。

このスタイルシートでは罫線の太さやセルの配分も指定してあり、もちろん変更可能です。また行間指定に関しては指定のソースを追加しないと、ブログのテンプレート自体のスタイルシートが反映されます。しかし下手に変更するとバランスが崩れますから、スタイルシートを理解していない人は、背景色と文字色の変更だけにとどめた方が良いでしょう。

カスタマイズが終わったら、(Windowsの場合なら)「メモ帳」に例えば“fc2clap”などの適宜な名前をつけて保存します。そのとき拡張子を「css」と変更します。つまり「メモ帳」なら .txt を .css とします。

CSS(スタイルシート)ファイルをSeesaaにアップロード
《Seesaaブログの管理ページで》
作成したCSSファイルをファイルマネージャでアップロードします。画像をアップロードするディレクトリ「image」でも別に構わないのですが、新しいディレクトリが作成できるのですから、例えば「css」や「file」などの名前をつけたディレクトリを作ってそちらにアップロードした方が良いでしょう。後々ブログテンプレートを変更してランキングブログパーツの色も変えたいときに探し出しやすいです。新しいディレクトリの作成は、ファイルマネージャの「オプションを表示」をクリックして行います。

Seesaaブログに新しいコンテンツを追加
次にブログパーツをサイドカラムに表示させるためのコンテンツを作成します。
〔デザイン〕→〔コンテンツ〕で、「自由形式」のコンテンツを追加します。
ブログ管理画面
ちなみにこのブログではコンテンツタイトルを表示したいため、「自由形式」ではなく「リンク集」コンテンツを使っています。

ブログパーツタグを取得
《FC2拍手の管理ページで》
FC2拍手管理の〔拍手タグ/ブログパーツ〕→〔ブログパーツ作成〕でタグを生成します。「設置するブログURL」を入力、「ブログパーツの色」項目ではカスタムを選択。「ランキング形式」と「表示件数」はお好みで。「ブログパーツ横幅」は無視でいいです。タグ作成をクリックして生成されたタグをコピーします。

ブログパーツタグをコンテンツに貼る
《Seesaaブログの管理ページで》
コピーしたタグを追加したコンテンツの「自由入力欄」に貼ります。タグの上下に独自のタイトルなり説明文を書き込むことも可能です。
次にアップロードしたCSSファイルをタグに適用させるためのHTMLを書き込むのですが、その前にCSSファイルのURLを取得しておきます。「http://△△△.up.seesaa.net/○○ディレクトリ/□□.css」になるのですが、記事編集欄でCSSファイルのサムネイルをクリックし貼り付けられたコードからURL部分をコピーすると良いです。

コンテンツの自由入力欄の一行目に以下のソースを貼ります。
この記事の横幅サイズの条件下ではソースが2行に表示されていますが、実際は段落なしの一行です。
<link rel="stylesheet" href="ttp://△△△.up.seesaa.net/△△△/fc2clapranking.css" type="text/css">

貼り付けた後『href="ttp://△△△.up.seesaa.net/△△△/fc2clapranking.css"』の部分のURLを、あなたのCSSファイルのURLに置き換えてください。
ちなみに、
・ 赤字の「」は表示の都合上全角hにしてあります。
△△△の部分はあなたのブログのURLになります。△△△のディレクトリ名も同様。
fc2clapranking.css 部分は実際はあなたがアップロードしたCSSファイル名になります。

コンテンツを保存し、サイドカラムのお好みの場所に移動して(ノーマルモードの場合)、「設定を反映する」をクリック。エキスパートモードの場合はお好みの位置の番号に変更して「変更」をクリック。以上です。


【関連記事】
FC2拍手のスパムやらbotやら
新機能がついたFC2拍手をSeesaaブログに設置

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 11:20 | Comment(0) | TrackBack(0) | Seesaaブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック