FC2ブログ用の無料テンプレート

素材屋!! > ホームページ(HP)・ブログ用の無料テンプレート > FC2ブログ用の無料テンプレート

FC2ブログ用の無料テンプレート・左メニュー型

2カラム・左メニュー・黒ベース

FC2ブログ用の無料テンプレート・右メニュー型

2カラム・右メニュー・白ベース・単色グラデーションヘッダ

2カラム・右メニュー・白ベース・単色(ピンク系)グラデーションヘッダ

2カラム・右メニュー・黒ベース・単色グラデーションヘッダ

2カラム・右メニュー・白ベース・ミニヘッダ(シンプル系)

2カラム・右メニュー・白ベース・単色屋根型ヘッダ

2カラム・右メニュー・白ベース・模様ヘッダ

2カラム・右メニュー・白ベース・文字ヘッダ(小)

2カラム・右メニュー・黒ベース・文字ヘッダ(小)

FC2ブログ用テンプレートの使い方

  • 圧縮ファイル(ファイル名.zip)をダウンロードする
  • ダウンロードした圧縮ファイルを解凍する
  • 「index.html」と「style.css」をテキストエディタで開く
  • FC2ブログにログインする
  • 「index.html」と「style.css」の内容をコピーして所定の箇所に張り付ける
  • 「画像ファイル」をFC2ブログのサーバーにアップロードする
  • スタイルシート内の画像へのリンクを修正する
  • テンプレートを修正する
  • テンプレートを適用させる

圧縮ファイルのダウンロード

お好みのテンプレートを選んで、
圧縮ファイルのダウンロードを行います。

ダウンロードした圧縮ファイルの解凍

圧縮ファイルをダウンロードしたら、次に圧縮ファイルの解凍を行います。
OSに解凍機能が付属している場合はOSの解凍機能を使うと便利です。
OSに解凍機能が無い場合は専用のオンラインソフトを使う事になると思います。
解凍すると「index.html」、「style.css」といくつかの「画像ファイル」が現れます。

「index.html」と「style.css」をテキストエディタで開く

解凍したファイル群の中から
「index.html」と「style.css」をテキストエディタで開きます。

(「index.html」と「style.css」は文字コードが「EUC-JP」になっていますので、
「EUC-JP」に対応したテキストエディタを使わないと文字化けが起こります。)

FC2ブログにログインする

WebブラウザでFC2ブログにアクセスしてログインします。

「index.html」と「style.css」の内容を貼り付ける

メニューの「環境設定」から「テンプレートの設定」を選びます。

「テンプレートの設定」のページが開いたら、
「テンプレート名の書かれているテーブル」の中から
(どれでもいいので)1つテンプレートを選んで、その「複製」を行います。

複製を行うと複製されたテンプレートの内容が下部に現れますので、
「～のテンプレート名変更」の欄に適当な名前を入れて、
「～のHTML編集」と「～のスタイルシート編集」の欄を空にします。
そして空になった「～のHTML編集」の欄に「index.html」の内容を、
「～のスタイルシート編集」の欄に「style.css」の内容を全て貼り付けます。
貼り付けが終わったら更新ボタンを押して内容の更新を行います。

画像ファイルをアップロードする

次にメニューの「ツール」から「ファイルのアップロード」を選び、
解凍したファイル群の中にある画像ファイル(*.jpg, *.gif)をアップロードをします。
アップロードしたファイルには適当なファイル名をつけておきます。

スタイルシート内の画像へのリンクを修正する

画像ファイルのアップロードが終わったら
再びメニューの「環境設定」から「テンプレートの設定」を選びます。
「テンプレートの設定」のページが開いたら、テンプレート名が表示されている
テーブルの中から先ほど名前をつけて保存(更新)を行ったテンプレートを探し、
そのテンプレートの行にある「編集」をクリックして編集ページを開きます。

編集ページを開いたら「～のスタイルシート編集」内から
「要変更」と書かれている箇所を探し、その下に書かれているアップロード前の
「画像ファイルのURI」を適切なもの(アップロード後のURI)へと書き換えます。
全ての「要変更」箇所の変更を終えたら内容の更新を行います。

「アップロードした画像ファイルのURI」は
「ファイルのアップロード」のページから画像ファイルを選択して、
「右クリック - プロパティ」で確認する事が出来ます。
(プロパティに出る「画像ファイルのURI」は
「URI」じゃなくて「URL」になってると思います…。)
あと「アップロードした画像ファイルのURI」は
「ファイルのアップロード」のページにある画像ファイルを
左クリックしたあとブラウザのアドレスバーで確認する事もできます。

テンプレートの修正を行う

スタイルシートの編集が終わったら次に「～のHTML編集」内から
「<!--index_area-->」と「<!--/index_area-->」を探し、
2つの間に挟まれている内容(テンプレートの表示サンプル)を全て削除します。
(表示サンプル部分はインフォメーションとして使えるようにもなってますので、
必要なら全て消さずに書き換えて使うのもいいかも。)
表示サンプル部分の削除後、テンプレートの内容の更新を行います。

テンプレートを適用させる

最後にテンプレートの名前の書いてあるテーブルからテンプレートを選択して
テンプレートを適用させたら全作業の完了です。

FC2ブログ用テンプレートの使い方 その2

プラグイン機能非推奨

公開・配布中の全てのテンプレートはXHTML+CSS型
(文章構造とデザインに関する記述が分離した状態)になっています。
ですが、(2008年2月現在)FC2ブログでプラグイン機能を有効にした場合、
初期の状態のままだとFC2ブログ側の仕様によって文章構造ファイル中に
デザインに関する記述が書き込まれるようになっているようです。
構造ファイルの中にスタイルの記述を紛れ込ませないための方法としては
FC2ブログのプラグインを無効にするか、各プラグインの記述内容を
テンプレートの文書型宣言に合わせて個別に書き直すかが考えられます。
HTMLの記述方法がよく分からないと言う人はプラグイン機能を無効に、
HTMLの記述が出来ると言う人は各プラグインの内容の適切な書き換えを
行う事をお勧めします。

<ul>～</ul>間が空になる場合

FC2ブログでは、例えば、カテゴリーが1つも無いと言う場合は
<!--category-->～<!--/category-->の内側(<li>～</li>)が書き出されません。
そのため、その前後にある<ul>～</ul>の内側が空の状態になってしまいます。
記事(<!--recent-->～<!--/recent-->)、
コメント(<!--rcomment-->～<!--/rcomment-->)、
トラックバック(<!--rtrackback-->～<!--/rtrackback-->)、
アーカイプ(<!--archive-->～<!--/archive-->)、
リンク(<!--link--->～<!--/link-->)についても
書き出す内容が無い場合は同じように<ul>～</ul>の内側が空になります。
これを避けるためには(<ul>～</ul>の内側は空であってはいけないので)
書き出す内容の存在しない間だけ<ul>～</ul>を手動で削除しておくか、
同じく書き出す内容の存在しない間だけ<ul>～</ul>の内側にある
<!--○○○-->、<!--/○○○-->を<ul>～</ul>の両外側に移動させて
<ul>～</ul>を書き出させないようにする…などの対処を行う必要があります。
(どちらも書き出す内容が1つ以上存在する状態になったら
元に戻すようにします。)

<ul>～</ul>間が空になる件に関しては
新しいタグが出るなどしてテンプレート側で対処が出来るようになったら、
テンプレート側で解決させるようにしたいと思います…。