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

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

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

■2カラム/右メニュー/白ベース/単色ヘッダ

fc2-0d3-0111-e00-17b-201 [ sample ]

■2カラム/右メニュー/黒ベース/単色ヘッダ

fc2-193-0111-100-17b-201 [ sample ]

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

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

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

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

■プラグイン機能非推奨

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

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

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

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

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

■親子カテゴリーに対応させる(プラグイン無効の場合)

FC2ブログの親子カテゴリー(カテゴリー > サブカテゴリー)機能に
対応させるためには次のようなコードの書き換えが必要になります。

1. 「index.html」のソースから以下の部分を探します。
(既にFC2に保存してあるテンプレートを対象とする場合は、
FC2にログイン後、「テンプレートの設定」ページを開き、
該当するテンプレートを選び、「～のHTML編集」内のソースから探す。)

<ul>

<li>
<a href="<%category_link>" title="<%category_name>">
<%category_name> (<%category_count>)</a>
</li>

</ul>

2. 発見したらその部分を以下のコードと丸ごと置き換えます。

<ul>


<ul>


<li>


<li>


<li>


<li>

<a href="<%category_link>" title="<%category_name>">
<%category_name> (<%category_count>)</a>

</li>


</li>


</li>
</ul>
</li>


</ul>

■親子カテゴリーに対応させる(プラグイン有効の場合)

1. ログイン後、プラグインの設定ページへと進み、
カテゴリーのプラグインの箇所にある「詳細」から
カテゴリーのプラグインの詳細ページへと進みます。

2. 詳細ページの「HTMLの編集」を押してコードを書くスペースが出て来たら、
そこに前出の「プラグイン無効の場合」の「2.」にあるコードを上書きします。

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

■サイドバーへのバナーの貼り方

以下はサイドバーにバナーを貼る際のコード記述の一例です。

リンク先やバナーまでのパス、バナー(画像)のファイル名、
代替テキスト、横幅、高さはそれぞれの必要に合わせて変えるようにします。