初心者向け！FC2ブログのテンプレートをカスタマイズする方法と編集手順

Web制作
Macbook Proと白いノート

FC2ブログを始めて、デザインをそろそろ自分好みに変えてみたい。そう思って管理画面を開いたものの、「テンプレートの編集って、どこをどう触ればいいの？」と固まってしまった経験、ありませんか。HTMLとCSSが画面いっぱいに並んでいて、最初は私もどこから手を付ければいいのか分かりませんでした。

Web制作の仕事を25年ほどやってきましたが、それでも初めて触るブログサービスは管理画面の構造を理解するまでが地味に大変です。FC2ブログは無料で使える老舗サービスで今も現役。HTMLとCSSをかなり自由にいじれるのが魅力なのですが、その自由度の高さが初心者には逆に「どこを編集すればいいの？」という壁になりがちです。

この記事では、FC2ブログの管理画面でテンプレートを選んで適用し、HTMLとCSSを編集してデザインをカスタマイズするまでの流れを、初心者がつまずきやすいポイントとあわせて順番に解説します。

テンプレートの選び方や共有テンプレートの追加、プレビューでの確認、編集前のバックアップの取り方、そして「保存したのに変更が反映されない！」というありがちなトラブルの対処まで、ひと通りカバーしています。コードの例も実際に使える形で載せているので、コピーして試しながら読み進められます。難しい専門用語はなるべく避けて、管理画面のどのボタンを押せばいいのかという具体的なところから説明していきます。読み終わるころには、自分のブログのデザインを安心して触れるようになっているはずです。

FC2ブログのテンプレートとは何か

FC2ブログでは、ブログ全体の見た目を決めている設計図のことを「テンプレート」と呼びます。具体的にはHTML（ページの骨組み）とCSS（色や余白などの装飾）の2つで構成されていて、この2つを書き換えることで、レイアウトや配色を自由に変えられる仕組みです。

WordPressでいう「テーマ」に近い存在ですね。ただFC2の場合、編集画面でHTMLとCSSのコードがそのまま全部見えるので、慣れるとかなり細かいところまで手を入れられます。逆に言えば、一文字消すだけでデザインが崩れることもあるので、後述するバックアップが大事になってきます。

なお、FC2にはたくさんのテンプレートが公開されていますが、配布元によっては「カスタマイズ禁止」「再配布禁止」といった利用規約が設定されているものもあります。編集に入る前に、選んだテンプレートの規約をざっと確認しておくと安心です。

関連記事：ブログや動画で有名な「FC2」は何の略？衝撃の真実が判明！

STEP1：テンプレートを選んで適用する

まずは土台になるテンプレートを決めるところから。FC2ブログの管理画面にログインし、左側のメニューから「設定」→「テンプレートの設定」を開きます。ここがデザイン関連の操作をまとめて行う場所です。

公式テンプレート・共有テンプレートを追加する

テンプレートの設定画面には、最初からいくつかのテンプレートが入っていますが、もっと選びたいときは新しく追加します。画面上部にある以下のボタンから探せます。

  • 公式テンプレート追加：FC2が用意した公式デザインの一覧
  • 共有テンプレート追加：ユーザーが作って公開してくれているデザインの一覧

共有テンプレートは数が膨大で、シンプルなものからおしゃれなものまでよりどりみどりです。気に入ったものが見つかったら「詳細」を開き、「追加」ボタンを押します。

このとき確認のダイアログが出るので、「OK」を押すと追加してそのまま適用、「キャンセル」を押すと追加だけ（適用はしない）という挙動になります。「とりあえずストックしておきたい」というときはキャンセル側を選ぶと、いま表示中のデザインを変えずに保管できます。

適用するテンプレートを切り替える

追加したテンプレートは「テンプレートの設定」の一覧に並びます。実際にブログへ反映させたいテンプレートの「適用」を選べば切り替え完了です。一覧の各テンプレートには「プレビュー」もあるので、適用する前に自分のブログでどう見えるか確認しておくと失敗が減ります。

初心者がつまずきやすいのが、PC版とスマホ版のテンプレートが別管理になっている点です。スマホ表示を変えたいときは「スマートフォン」用のテンプレート設定を開く必要があります。PC側だけ直して「スマホで見たら変わってない」と慌てるのは、私もやりがちなミスです。

参考：FC2ブログ公式マニュアル：テンプレートの設定

STEP2：編集する前に必ずバックアップを取る

カスタマイズの作業に入る前に、これだけは先にやっておいてほしいのがバックアップです。HTMLやCSSをいじっているうちにデザインが崩れて元に戻せなくなる、というのは初心者あるあるで、ここでバックアップがあるかどうかが天国と地獄の分かれ目になります。

方法はシンプルで、おすすめはテンプレートの「複製」です。テンプレートの設定一覧で、いま使っているテンプレートの「複製」をクリックすると、中身（HTMLとCSS）がそっくりそのままコピーされた予備のテンプレートが作られます。編集して取り返しがつかなくなっても、複製しておいた方を適用すれば元のデザインに戻せます。

もうひとつの方法は、編集画面のHTMLとCSSのコードを全選択（編集欄をクリックして Ctrl + A）し、メモ帳などのテキストエディタに貼り付けて保存しておくやり方です。HTMLとスタイルシートは別々の入力欄になっているので、それぞれコピーしておきましょう。ファイルとして手元に残るので、より安心したい人向けです。

STEP3：HTMLとCSSを編集する

準備ができたら、いよいよ編集です。テンプレートの設定一覧から、編集したいテンプレートの「編集」をクリックすると、編集画面が開きます。この画面が、FC2カスタマイズの本丸です。

HTML編集とスタイルシート編集の場所

編集画面は大きく2つの入力欄に分かれています。上側がHTML編集欄、下側（スクロールした先）がスタイルシート（CSS）編集欄です。この「CSSは下のほう」というのが、初心者が最初に迷うポイントその1。画面を一番下までスクロールすると、CSSをまとめて書く広い入力欄が見つかります。

たとえば「記事タイトルの文字色を変えたい」なら、CSS編集欄に次のような一文を追加します。テンプレートによってクラス名は違うので、変えたい部分のクラス名に置き換えてください。

.entry_title {
    color: #2b6cb0;
    font-size: 22px;
}

HTML側を触る例も挙げておきます。FC2には「変数」と呼ばれる独自のタグがあり、表示する場所をページ単位で出し分けできます。たとえばトップページにだけ何かを表示したいときは、HTML編集欄で次のように変数で挟みます。

<!--index_area-->
  <p>この部分はトップページにだけ表示されます</p>
<!--/index_area-->

逆に「トップ以外に表示したい」なら <!--not_index_area--> ～ <!--/not_index_area--> で挟みます。個別記事だけなら permanent_area、カテゴリーページだけなら category_area と、用途に応じた変数が用意されています。タイトルタグの最適化にもよく使われるテクニックです。

関連記事：HTML5マークアップの心得と作法｜初心者にやさしい基本と書き方のコツ

プレビューで確認してから保存する

編集したら、いきなり保存せずに編集画面の「プレビュー」で見た目を確認するのがコツです。崩れていないか確かめてから、問題なければ「適用」や「更新」ボタンで保存します。少しずつ書いては保存、を繰り返すと、どの変更で崩れたのかが分かりやすく、原因の切り分けがラクになります。

参考：FC2ブログ公式マニュアル：テンプレートの編集

変更が反映されないときのチェックポイント

「保存したのに、ブログを見ても変わってない」。カスタマイズしているとほぼ必ず一度はぶつかるトラブルです。原因はだいたい決まっているので、上から順に確認してみてください。

  1. ブラウザのキャッシュを削除する：古い表示が残っているだけのことが多いです。スーパーリロード（Ctrl + F5）や、ブラウザのキャッシュ削除で直るケースが大半。まずはここを疑います。
  2. 編集したテンプレートが「適用中」か確認する：複製した予備のほうを編集していて、ブログには別のテンプレートが適用されている、というすれ違いがよくあります。
  3. PC版とスマホ版を間違えていないか：前述のとおり別管理です。直したい表示と編集した側が一致しているか確認します。
  4. CSSの書き方が正しいか：セミコロン ; や閉じカッコ } の抜けがあると、それ以降の指定がまるごと効かなくなります。崩れたら、直前に追加したコードを見直しましょう。

それでも直らないときは、追加したブログパーツやプラグインが干渉している場合もあります。怪しいものを一時的に外して、ひとつずつ切り分けると原因にたどり着きやすいです。

まとめ

FC2ブログのテンプレートカスタマイズは、最初こそ「HTMLとCSSの海」に圧倒されますが、流れ自体はとてもシンプルです。「テンプレートの設定」でデザインを選んで適用し、編集の前に複製でバックアップを取り、HTML編集欄とCSS編集欄を書き換えて、プレビューで確認してから保存する。この一連のリズムさえつかめば、あとは少しずつ手を入れていくだけです。

大事なのは、いきなり大きく変えようとしないこと。色をひとつ変える、余白を少し広げる、といった小さな一歩から始めると、崩れても原因がすぐ分かって立て直せます。たくさんのクラス名を一度に書き換えると、どこで崩れたのか追いきれなくなって、結局やり直しになりがちです。一行直してプレビュー、また一行直してプレビュー、という地味な進め方が、遠回りに見えて一番の近道だったりします。そしてバックアップさえ取っておけば、何度失敗してもやり直せます。複製を一つ残しておくだけで、「最悪これに戻せばいい」という安心感が生まれ、思い切って手を入れられるようになります。失敗を恐れず触れるのが、デザインを自分のものにしていく一番の近道です。

FC2ブログは無料で使えて、しかもHTMLとCSSをここまで自由に編集できるサービスはなかなかありません。せっかくの自由度を活かさない手はないので、まずは複製でバックアップを取って、CSSを一行だけ書き換えるところから試してみてください。自分の手で見た目が変わる感覚がつかめると、カスタマイズが一気に楽しくなりますよ。

CSS HTML Web制作

関連する記事