ブログカスタマイズの雑談BLOG

前回の記事＜■FC2ブログ【basic_white】（7）＞で触れていた「プレビュー画面」の利用方法について説明したいと思います。



前回の記事では、テンプレート「basic_white」の「プレビュー画面」を利用して、ヘッダー下の「タブ」（リンク設定しているボタン的なヤツ）をクリックしたら別のテンプレートで作成していたアーカイブページ（しかもカテゴリ別に表示させた記事リスト）を表示させるようにする、という方法を紹介してみました。



ヘッダー下の「タブ」というのは、この画像の「TOP」や「記事一覧」部分のことです。





私の場合は「記事一覧タブ」では記事の「リスト表示」を、「SITEMAPタブ」では記事の「カテゴリ別表示」を表示させるように設定していました。「SITEMAPタブ」に対して「別のテンプレートをプレビューさせる」という方法を使っていたわけです。



この「別のテンプレートをプレビューさせる」というのは、「basic_white」というテンプレートだけができる、というわけではありません。
確かに「basic_white」には「タブ」があるのでリンク設定がラクなんですけど、他のテンプレートでもできます。


私も詳しくは知りませんが、FC2ブログにはプラグインとして「リンク」がありますよね？
そこに別テンプレートのURLを入れ込めば問題ありませんので、どのテンプレートでも「プレビュー画面」を表示させることで、別バージョンのテンプレートを表示させることができます。
つまり、どのテンプレートでも、記事一覧ページ（アーカイブページ）を「リスト表示」と「カテゴリ別表示」の両方で表示することができる、ということです。しかも同時に表示、ね！！


でもまあ、「ボタン」的な感じで表示可能なのは「basic_white」だと思うんですよね。（他のテンプレートを確認していないので詳しくは知りませんけど）
だから視覚的にも違和感なく表示できるのは「basic_white」なんじゃないだろうか？とは思います。




1つのブログに「リスト表示」と「カテゴリ別表示」の2つの「アーカイブページ」を同時に表示させる方法ですが、これはもう、前回の記事を読んでいただければそれでいいのではないでしょうか。
私はテンプレート「basic_white」でやりましたが、別のテンプレートでやる場合も同じ手順です。


まずは1つ完璧なテンプレートを作っておいて、それをコピーする。
コピーした2つ目のテンプレートには、カテゴリ別にした記事一覧ページを作っておく。
あとは、プレビュー画面として2つ目のテンプレートをリンクしてあげればいいだけです。（ざっくりした説明ｗ）


もちろん、詳しいやり方はご自分でお調べくださいね。私は自分のテンプレート以外のやり方を調べるほど優しくはありませんので（笑）
（でも前回の記事ではしつこいくらいに説明しましたので、長文なんですけどね、アレを読んだら理屈はわかるんじゃないでしょうか？）

プレビュー画面の利用方法

さて、今回はテンプレートの「プレビュー画面」の利用方法について書いておきます。
リンクを貼って「プレビュー画面」を表示させる、という利用方法の他にこの「プレビュー画面」が活躍するのはテンプレートの編集をしている時です。
これはもう、間違いなく、利用できます！！



テンプレートを選択してそのまま使うのなら無関係なお話ですが、まあ、テンプレートをいじりたいと思う時があると思うんですよね。
管理画面の「テンプレートの編集」をクリックしてHTMLやCSSをいじったり、そうですね、例えば記事ページの余白（marginやpadding）をいじったりとか、背景色を変えたりとか、そういうことをやってみて、いざ「プレビュー」ボタンを押したら、なんとまあ！トップページしか表示してくれない！！（´・ω・｀）


違うの！！
私は個別記事のページをいじったのよ！！


とか思ってもFC2ブログのプレビューボタンはトップページしか表示してくれないのだから、しょうがない。
とりあえず「更新」ボタンを押して今まで編集したものを確定させてから該当ページを開いて、見た目をチェックしなくては！！



なんてことは、したくないの！！
だってさ、「更新」ボタン押したらもう「確定」しちゃうじゃん？
ということはもう公開されてるってことじゃん？
「border」を表示させるようにして「div」の範囲を確認して‥‥とかやってたらさ、そのわけのわからない線が入ったブログが公開されてるってことになるじゃん？
思いっきり制作途中のものを公開してるってことじゃん？
自分が意図した見た目じゃないんだから、なんかイヤじゃん？
イヤじゃん？（´・ω・｀）



このような場面で役に立つのが「プレビュー画面」なのです！！（´∀｀*）

前回の記事のおさらい！

では前回のおさらいです。
前回は「アーカイブページ」をプレビュー画面で表示させる方法を紹介しました。
コレです。


＜アーカイブページのプレビュー画面URL＞




私のブログのアドレスは「http://□□□.blog.fc2.com/」ですので、まずはこのアドレスを「自分のブログのアドレス」部分に入れます。
「テンプレート名」にはメインテンプレートをコピーして作ったカテゴリ別表示にしたテンプレート「basic-01copy」を入れます。


別テンプレート「basic-01copy」に作っておいたアーカイブページ（カテゴリ別表示）をプレビュー画面として表示させるURLは以下のようになるわけです。


＜別テンプレートのアーカイブページのプレビュー画面＞



この「プレビュー画面」のアドレス、よく見たら一番後ろに「&all」がありますよね？
この「&all」がアーカイブページ（「archives.html」）を指定しているわけです。


じゃあ、この「&all」の部分に別の文字を入れたら色々できるんじゃね？
とか思いませんか？（´∀｀*）



もう全くその通りでして、この「&all」の部分を指定すると個別記事のプレビュー画面を表示させることができるんですよ。さっき書いたように個別記事ページのHTMLやCSSをいじった時にリアルタイムでブラウザ上で確認ができるんです。
管理画面でテンプレートをいじっている時には通常はトップ画面しかプレビューしてくれないことを考えると、このやり方はものすごく役に立つと思います。


ただし、「プレビュー画面」を使うためには2つほど絶対にやっておくべきことがあります。

プレビュー画面を使う前にやっておくべきこと

1つは、何か記事をアップしておくということです。
「ブログを始めました」でもかまいませんので、何か1つは記事を投稿しておいてください。
記事ができていないと、プレビューしたい個別記事を指定できません。



もう1つは、必ずテンプレートをコピー（複製）したものをいじる、ということです。
テンプレートを「公開していない状況」でいじりたいわけですよね？（制作過程を非公開状態でいじりたい）
でも通常はテンプレートを「適用」しておかないと記事をアップできないわけですよ。



なので、まずは使用したいテンプレートでブログを公開しておいてください。（テンプレートを「適用」しておく）
そして使用したいテンプレートをコピー（複製）してテンプレート名を付けておき、その複製したテンプレートを自分の好きなようにいじっていきます。コレはどんだけいじっても「適用」していませんので、公開されることはありません。

テンプレートを編集したいのであれば、必ずコピー（複製）したテンプレートを編集していってください。
編集している間、公開しているのはあくまでも「適用」している元テンプレートになりますので、他人様から見られてもまともなブログなはずです。



ということで、上記の2つは必ずやってください。
その上で、「プレビュー画面」を使って自分のブログの個別記事ページを編集するための表示方法を紹介します。

個別記事をプレビューさせて確認する

とりあえずここでは、「個別記事」をプレビューさせる方法を説明します。
テンプレートを編集する際に、個別記事にどのように反映されるのかを確認するためには、個別記事のプレビュー画面のURLが必要になります。
自分のブログアドレスとテンプレート名を以下のように設定しておいて、話を進めます。






では、準備をします。
手順は以下の通りです。





2番で記事を投稿しましたが、この時に記事番号が付きます。
記事を投稿したら投稿順に勝手に数字が割り振られていきますので、最初に記事を投稿したら記事番号は「1」です。
もちろん10個目の記事の記事番号は「10」になります。
この記事番号を指定して個別記事のページをプレビューさせたいと思います。



個別記事をプレビューさせるためのURLアドレスはこちらです。


＜個別記事のプレビュー画面URL＞



先ほどは「アーカイブページ」をプレビューさせるURLアドレスを紹介しましたが、それは
『 自分のブログのアドレス?template=テンプレート名&all 』
でしたよね？

この「&all」の部分が「&no=記事番号」になるだけです。
1個目の記事を表示させたかったら「no=1」になります。
10個目の記事は「no=10」です。



ではブログのテンプレートBBBBBの10個目の記事をプレビュー表示したいと思います。


＜テンプレートBBBBBの個別記事10個目のプレビュー画面URL＞



「テンプレートBBBBB」をいじっているわけですが、公開（適用）しているテンプレートは「テンプレートAAAAA」ですので、どんだけ「テンプレートBBBBB」を編集しても他の人には見えません。
なので思う存分編集してください。
で、個別記事の様子を確認したかったら上記のURLアドレスで確認したらいいんです。
ブラウザの「お気に入り」にこのURLを登録しておくと、簡単にアクセスできて便利です！！
（自分だけがテンプレート名を知っていますので、誰からも見られることはありません）



これが「プレビュー画面」を利用する最大の利点ですね！！
編集過程を知られずにテンプレートを好きなだけいじれます。
そして全部出来上がったら、そのテンプレートを「適用」すればいいのです！！
（最終的には「テンプレートBBBBB」が適用されることになる）

プレビューで確認する（まとめ）

以下にまとめておきますので、編集した結果をプレビューで確認したい場合にご利用ください。
テンプレート名は「BBBBB」で表示しています。


他にも色々とあるんでしょうが、とりあえず私が利用したのはこんなもんなので、これだけ掲載しておきます。他のページをプレビューしたい場合は、ご自分で調べてください（オイ！ｗ）
（そう、私はそんなに優しくないのだよ！！ｗ）



トップページをプレビューする



記事一覧ページ（アーカイブページ）をプレビューする【&all】



個別記事ページ（記事番号10）をプレビューする【&no=10】



カテゴリ別ページ（カテゴリ番号3）をプレビューする【&cat=3】



月別アーカイブ（2014年1月）をプレビューする【&date=201401】




次の記事の紹介

次の記事では、FC2ブログのテンプレート「basic_white」のタブ「記事一覧」について、横幅を変更する方法を説明しています。