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

画像不使用型のテンプレートです。
HTMLファイルとCSSファイルの内容をコピーして張り付けるだけで使用出来ます。
(CSS3対応ブラウザを対象にしてデザインしています。)

■2カラム/右メニュー/白ベース

• 青系 (XHTML + CSS3)
  • fc2-01r-whtdbl-010a [ sample ]
• 緑系 (XHTML + CSS3)
  • fc2-01r-whtdgr-010c [ sample ]
• ピンク系 (XHTML + CSS3)
  • fc2-01r-whtpnk-010b [ sample ]
  • fc2-02r-whtpnk-010b [ sample ]
  • fc2-03r-whtpnk-010b [ sample ]
  • fc2-04r-whtpnk-010b [ sample ]
  • fc2-05r-whtpnk-010b [ sample ]
  • fc2-06r-whtpnk-010b [ sample ]

画像使用型のテンプレートです。
画像のアップロードとソースの書き換えが必要になります。
(CSS3対応ブラウザを対象にしてデザインしています。)

■2カラム/右メニュー/白ベース

• 青系 (XHTML + CSS3)
  • fc2-01r-whtdbl-131b [ sample ]
  • fc2-01r-whtdbl-130a [ sample ]
• 緑系 (XHTML + CSS3)
  • fc2-01r-whtdgr-131b [ sample ]
• 赤系 (XHTML + CSS3)
  • fc2-01r-whtdrd-131b [ sample ]
• ピンク系 (XHTML + CSS3)
  • fc2-01r-whtpnk-131b [ sample ]
• 黒系 (XHTML + CSS3)
  • fc2-01r-whtblk-130a [ sample ]

■2カラム/右メニュー/黒ベース

• 黒系 (XHTML + CSS3)
  • fc2-01r-blkblk-111a [ sample ]

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

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

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

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

圧縮ファイルをダウンロードしたら、次に圧縮ファイルの解凍を行います。
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」の内容を全て貼り付けます。
貼り付けが終わったら更新ボタンを押して内容の更新を行います。

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

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

• 圧縮ファイル(ファイル名.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」になってると思います。)
また、「ファイルのアップロード」のページにある画像ファイルを左クリックして
画像を単独表示させた後のアドレスバーでも確認する事が出来ます。

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

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

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

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

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

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

<div id="module-banners">
<div class="module-content">
<div class="banner">
<a href="http://リンク先1/">
<img src="http://～/banner1.gif" alt="代替" width="88" height="31" />
</a>
</div>
<div class="banner">
<a href="http://リンク先2/">
<img src="http://～/banner2.gif" alt="代替" width="88" height="31" />
</a>
</div>
<div class="banner">
<a href="http://リンク先3/">
<img src="http://～/banner3.gif" alt="代替" width="88" height="31" />
</a>
</div>
</div>
</div>

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