『プルダウン』と『ボタン』のどちらかを利用します。プルダウンは選択し直す手間がかかため、ボタンの方が使いやすいかもしれません。

　導入にはユーザスクリプト推奨（Firefox、Chrome）です。IEはブックマークレット推奨です。IE6は動作対象外です。

　プレビューバーを表示しないバージョンは、テンプレート編集プレビューでトップページ以外を表示からインストールしてください。また、同バージョン（FC2tmpPreviewB、FC2tmpPreviewP）を既にインストールしている場合は、無効にするか、アンインストールしてください。

ブックマークレット

※とりあえず試すだけであれば、こちらを利用します。

　お気に入りに登録して使用します。下記リンクを（右）クリックして、リンクをお気に入り（ブックマーク）に追加します。Chromeはメニューからブックマークバーを表示させ、リンクをドラッグします。

プルダウン : FC2tmpPf | ボタン: FC2tmpBf

　テンプレート編集ページを開き、お気に入りに追加された上記リンクをクリックするとプレビューのメニューバーが上部に表示されます。

ユーザスクリプト - Greasemonkey

プルダウン : FC2tmpPf | ボタン: FC2tmpBf

　Firefoxは上記リンクのどちらかをクリックしてスクリプトをインストールします。両方インストールする場合は片方を無効にしてください。Greasemonkeyをインストールしていない場合は、アドオンからインストールします。インストール後、ブラウザを再起動するとユーザスクリプトをインストールできるようになります。
　Greasemonkeyのインストール、ユーザスクリプト無効化の方法については、Greasemonkeyの使い方をご覧ください。

　Google Chromeはリンクを（右）クリックして「リンク先を保存」を選択して適当な所にファイルを保存。ブラウザメニューの[ツール][拡張機能]で拡張機能ページを開いて、保存したファイルを拡張機能ページ内にドラッグ＆ドロップします。

　Operaはリンクを（右）クリックして「リンク先のコンテンツを保存」を選択します。保存先は、ブラウザメニューの[ツール][設定][詳細設定][コンテンツ-JavaScriptを有効にする][JavaScriptオプション]の「ユーザーJavaScriptフォルダ」を指定します。フォルダが指定されていない場合は、適当な場所に『userscript』といった名前のフォルダを作成し、それを指定します。そして、改めて保存します。

　IEはTrixieやIE7Pro（利用方法）を使います。

　スクリプトを更新するときは、以前のスクリプトをアンインストールして、再インストールします。

---

　PCからの確認は、実際のスマートフォン表示とは異なる部分があります。ユーザエージェントを変更すれば、近い表示になるかもしれませんが、編集途中でUAを変更して更新すると、FC2側のUA判定により、正常に更新されない場合があります。

• 使い方 - 各ボタンの説明
• 携帯・スマートフォン用 - サイズ指定、小窓・インラインフレームで開く

使い方 - 各ボタンの説明

[＠]ボタン

　クリックすると、プレビューのバーが最上部・中央・最下部に移動します。

[name]ボタン

　編集している現在のタブ・ウインドウで更新する[更新]ボタンです。元からある[更新]ボタンと同じです。テンプレートの名前を変更するときに使います。通常の更新はできるかぎり[update]で行います。ページが更新されるのでブックマークレットを利用している場合は再度起動させる必要があります。

　名前を変更した後は、テンプレート一覧から変更したテンプレートの[編集]リンクをクリックして再読み込みします。そのまま編集を続けると、FC2側の仕様により白紙保存される可能性があります。

[update]ボタン

　更新後のページを別タブ・ウインドウで開く[更新]ボタンです。更新する度にブックマークレットを読み込むのが面倒なときや管理サーバが不安定なときの保険として利用できます。

　更新後のページに「テンプレートのHTML、CSSを更新しました。」のメッセージが表示されていれば更新は完了です。編集を続けるときは、最初に編集していたウインドウに戻って編集します。更新後のページが重いときは更新後のページを閉じます。

[index]ボタン

　プレビューボタンと同じです。トップページのプレビューを表示します。

個別ページのプレビュー

（プルダウン）

1. プルダウンで[no]を選択。
2. [左のテキストボックス]に表示したい記事ページの番号を入れて[preview]ボタンをクリック
   [10]→[preview] blog-entry-10.html を表示

（ボタン）

1. [左のテキストボックス]に表示したい記事ページの番号を入れて[no]ボタンをクリック
   [10]→[no] blog-entry-10.html を表示

[form][res][tb]ボタン

※携帯版とスマートフォン版のみ利用可能。

　[form]はコメントフォームページ（コメントを許可している記事番号指定）、[res]はコメント一覧ページ（コメントのある記事番号）、[tb]はトラックバックページ（トラックバックのある記事番号）を表示します。

（プルダウン）

1. プルダウンで[form][res][tb]のいずれかを選択。
2. [左のテキストボックス]に表示したい記事ページの番号を入れて[preview]ボタンをクリック
   [10]→[preview] blog-entry-10.html のコメントorトラックバックページを表示

（ボタン）

1. [左のテキストボックス]に表示したい記事ページの番号を入れて[form][res][tb]のいずれかをクリック
   [10]→[no] blog-entry-10.html のコメントorトラックバックページを表示

トップからの送りページのプレビュー

（プルダウン）

1. プルダウンで[page]を選択。
2. [右のテキストボックス]に表示したいページの番号を入れて[preview]ボタンをクリック
   [2]→[preview]　page-2.html を表示

（ボタン）

1. [右のテキストボックス]に表示したいページの番号を入れて[page]ボタンをクリック
   [2]→[page]　page-2.html を表示

カテゴリページのプレビュー

（プルダウン）

1. プルダウンで[cat]を選択。
2. [左のテキストボックス]に表示したいカテゴリの番号を入れて[preview]ボタンをクリック
   [1]→[preview]　blog-category-1.html を表示
   ページ数を指定するときは、[右のテキストボックス]に表示したいページ数を入れます。
   [1][3]→[preview]　category1-3.html を表示（カテゴリ番号1の4ページ目）

（ボタン）

1. [左のテキストボックス]に表示したいカテゴリの番号を入れて[cat]ボタンをクリック
   [1]→[cat]　blog-category-1.html を表示
   ページ数を指定するときは、[右のテキストボックス]に表示したいページ数を入れます。
   [1][3]→[cat]　category1-3.html を表示（カテゴリ番号1の4ページ目）

年月日ページのプレビュー

※2011年9月6日現在、スマートフォン版は対応していません。そのうち利用できるようになると思います。

（プルダウン）

1. プルダウンで[date]を選択。
2. [左のテキストボックス]に表示したい年月日を入れて[preview]ボタンをクリック
   [201001]→[preview]　blog-date-201001.html を表示（2010年1月）
   [20100101]→[preview]　blog-date-20100101.html を表示（2010年1月1日）
   ページ数を指定するときは、[右のテキストボックス]に表示したいページ数を入れます。
   [201001][3]→[preview]　blog-date-201001-3.html を表示（2010年1月の3ページ目）

（ボタン）

1. [左のテキストボックス]に表示したい年月日を入れて[date]ボタンをクリック
   [201001]→[date]　blog-date-201001.html を表示（2010年1月）
   [20100101]→[date]　blog-date-20100101.html を表示（2010年1月1日）
   ページ数を指定するときは、[右のテキストボックス]に表示したいページ数を入れます。
   [201001][3]→[date]　blog-date-201001-3.html を表示（2010年1月の3ページ目）

ユーザタグページのプレビュー

※携帯版とスマートフォン版はtag変数に対応していないため、利用不可。

（プルダウン）

1. プルダウンで[tag]を選択。
2. [左のテキストボックス]に表示したいタグを入れて[preview]ボタンをクリック
   [news]→[preview]　?tag=news を表示
   ページ数を指定するときは、[右のテキストボックス]に表示したいページ数を入れます。
   [news][3]→[preview]　?tag=news&page=3 を表示（newsタグの3ページ目）

（ボタン）

1. [左のテキストボックス]に表示したいタグを入れて[tag]ボタンをクリック
   [news]→[tag]　?tag=news を表示
   ページ数を指定するときは、[右のテキストボックス]に表示したいページ数を入れます。
   [news][3]→[tag]　?tag=news&page=3 を表示（newsタグの3ページ目）

各ページのJavaScriptオフページをプレビュー

　直前に表示したページがプレビューされます。

1. オフで表示したいページをJavaScriptオンでプレビューする
2. JavaScriptをオフにする
3. [off]ボタンをクリック

　別のページも確認するときは、JavaScriptをオンにしてから、1～3の手順を繰り返します。トップページのオフプレビューは1で[index]ボタンをクリックします。

▲

携帯・スマートフォン用 - サイズ指定、小窓・インラインフレームで開く

　携帯とスマートフォン用のテンプレート編集ページでは、プレビューページの開き方やそのウインドウサイズを指定できます。

表示形式

　[ blank ]は別タブ・ウインドウでプレビューします。
　[ iframe ]はHTML入力エリアの下にフレームでプレビューします。
　[ window ]は小窓でプレビューします（ブラウザなどの設定により表示されない場合があります）。開かれたウインドウをドラッグして元のウインドウと重ならないように外に移動させると、確認が楽です。

ウインドウ・フレームサイズ指定

　[ text box ]を選択すると、右横のテキストボックス[ 横幅 ][ 高さ ]で指定されたサイズが反映されます。初期値の[ 320 ][ 416 ]では、横幅320px・高さ416pxになります。
　既に小窓を開いている場合は、一度閉じて再度プレビューする必要があります。あるいはウインドウの角にカーソルを合わせて直接リサイズします。

　[ 320x480 ]などを選択すると、[ 横幅x高さ ]の固定サイズになり、テキストボックスの値は無視されます。

　チェックボックス[  ] は、スクロールバーを非表示にします。スクロールはマウスの中ボタンのクリックからのホイール操作などで行います。IEは正常に反映されません。

　右端のテキストボックス[ 17 ]には縦スクロールバー分の横幅を指定します。Windows7の『Firefox6』『Chrome13』は17px程度です。
　IEはフレームの枠線が表示されるため、[ 21 ]を指定するといいかもしれません。
　数値は[ + ][ - ]ボタンで1増減します。

　インラインフレームの上部に表示される灰色のバーの横幅が、テキストボックス[横幅]に入れた数値になります。フレーム内の表示領域がバーの横幅と同じくらいになるように調整します。

　また、この灰色のバーをクリックすると、フレームが非表示になります。再度表示する場合は、もう一度クリックします。

IEのモード変更

※モードを変更することによって、管理ページ全体のレイアウトや機能に支障が出る恐れがあります。

　IE9以上は、F12キーからドキュメントモードをIE9に変更することで、「スクロールバーの非表示」や「フレームの枠線（スクロールバー横幅=17）」が正常に反映されるようになります。ただし、モードを変更するとページがリロードされるため、必ず最初に変更してから、テンプレートを編集するようにします。

---

　不具合はできるかぎり対応しますが、ご利用は自己責任でお願いします。テンプレートの複製や名前の変更後にテンプレートが正常に更新されない場合がありますが、FC2の仕様です。変更後はテンプレート一覧から、テンプレートの[編集]をクリックして、再読み込みしてみてください。

関連記事

• 共有テンプレートを強制的にダウンロードさせる　コンテスト審査方法
• Firefoxで管理画面テキストエリアの米印などの記号が表示されない
• FC2ブログログインページの仕様変更、FC2IDのログアウト忘れずに
• FC2ブログスマートフォンテンプレート編集 プレビュー用スクリプト
• 最初の記事下に広告などのコンテンツを表示する方法
• ツイッターがFC2ブログ『blog.fc2.com』を危険サイト指定　ツイートボタン使用不可
• スマートフォン最適化のテンプレートが選択できるように