MS Access Tips/Sample and VBA and Blog customize etc...

FC2ブログのテンプレートを失敗なく効率的にカスタマイズする方法

タイトル画像

適用中のテンプレートを編集していて、レイアウトがおかしくなったが元に戻せなくなったというのうは経験はありませんか。また、テンプレートを更新して、結果をブログ画面で確認して、と両者をいったり、きたり、面倒だと思ったことはありませんか。

このような悩みを解消する効率的なテンプレートのHTMLとスタイルシートの編集方法を紹介します。

難易度:

編集はテンプレートの複製で行う

適用中のテンプレートを編集しているなんてことはしてませんか。これをすると、ミスでおかしな結果になっても元に戻せないという失敗をしかねません。また、編集途中の無様な画面を、その時アクセスしてきたユーザーに見られなんてことにもなります。

適用中のテンプレートの複製を作成して、そこで編集作業をするようにしましょう。

テンプレートの複製

テンプレート管理の画面で、適用中のテンプレートの[複製]をクリックします。適用中のテンプレート名の最後に1がついた複製テンプレートが出来ますので、その[編集]をクリックしてから、HTMLやスタイルシートの編集作業に入ります。

hatenaの場合は、テンプレート名には更新した日付と、主に何を修正・追加したかが分かるワードを追加しています。画像の「AUDRY150831month」というのは、ベースのテンプレートがAUDRYで更新日が2015/08/31、月の英語表示の方法を変更したという意味になります。テンプレート名は最大20文字なので、それ以内に収まるようにしなければならないので、最低限の情報しか含められませんので、詳細な変更点は、HTMLかスタイルシートにコメントとして埋め込んでおくといいでしょう。

これなら、編集に失敗して、元に戻せなくなっても、また、適用中のテンプレートの複製を作成して、やり直すことができます。

適用中でないテンプレートのトップページ以外を確認するには

HTMLとスタイルシートの編集エリアの下に[更新] [プレビュー] ボタンがあります。この [プレビュー] で保存する前に編集結果を確認できますが、この画面では、スクリプトが実行されなかったり、実際の画面表示とは異なる場合が多いので、ほとんど使いません。

[更新]をクリックして一旦保存してから、上記の画像のテンプレート名「AUDRY150831month1」をクリックします。これで、実際の画面表示と同じになります。

で、ここで表示されるのは、トップページの画面ですが、それ以外のページも確認したいですよね。プラウザのURLボックスを見てください。今回の場合だと、下記のURLになっています。

 http://hatenachips.blog34.fc2.com/?template=AUDRY150831month1&index

ブログのルートURL/?template=テンプレート名&index というフォーマットだと分かります。この、& 以降を修正することで、トップページ以外も表示させることができます。

例えば、記事番号125の個別記事ページを表示したければ下記のように変更して、Enterキーを押してください。

ブログのルートURL/?template=テンプレート名&no=125

下記の一覧を参考にしてください。

表示ページと & 以降に記述する文字との対応
表示ページ& 以降の文字
個別記事ページno=記事番号
カテゴリ別ページcat=カテゴリ番号
検索結果ページq=検索文字
タグ別ページtag=タグ名
月別ページdate=201508
全記事一覧ページall
コメント編集ページmode=edit&rno=コメント番号
ページ番号指定page=ページ番号(先頭ページは0です)

ページ番号指定は、カテゴリ別、タグ別、検索結果、月別 の指定と組み合わせて使用することもできます。
例えば、下記の場合は、カテゴリー番号10の4ページ目が表示されます。

ブログのルートURL/?template=テンプレート名&cat=10&page=3

全記事一覧だけは、なぜか仕様が違うようで、一覧の4ページ目を表示したい場合は、下記のようになります。

ブログのルートURL/?template=テンプレート名&all&p=3

これでほぼすべてのページが確認できます。例えば個別記事に表示される部分の更新の場合は、

ブログのルートURL/?template=テンプレート名&no=125

というプレビューページを表示させておいて、テンプレートを編集したら[更新]ボタンをクリックして保存したあと、プレビューページをリロードすれば結果が確認できます。これを繰り返して、希望のものになったら、このテンプレートの左のラジオボタンを選択して[適用]ボタンをクリックします。

テンプレートの適用

これで更新済みのテンプレートでブログが表示されるようになります。

大規模な編集はテキストエディターも併用する

細かい部分の編集はテンプレート管理画面で上記の方法でいいのですが、フレーム構成の変更とか、複数箇所に関連する変更など、大規模な場合は、管理画面の編集エリアは狭いので、編集しづらいです。

その場合は、HTMLやCSSをコピーしてテキストエディターに貼り付けて、そこで編集すると楽ですね。フリーのテキストエディタが多くありますし、たいていのものは、HTML や CSS に合わせてタグなどをハイライトする機能が付いています。愛用のエディターがあればそれを使用すればいいでしょう。

hatena の場合は、下記を愛用しています。

mFactory - テキストエディタ gPad 公式サイト

下記もお勧めです。

Mery - 窓の杜ライブラリ

複数の箇所を変更する場合も、検索や置換をつかえば効率的に編集できます。エディターでの編集が終わったら、Ctrl+Aで全文選択 Ctrl + C でコピー、テンプレート管理画面に戻って、編集エリアでctrl+Aで全文選択 Ctrl + V で貼付け後、[更新]クリック、プレビュー画面リロードで結果を確認します。希望とことなれば、エディターに戻り、また編集しなおします。アンドゥーで任意の時点に戻せますので、そこからやりなおすということもできます。

まとめ

html、css、 javascript などの編集を楽するツール等はいろいろありますが、今回はFC2ブログに関する部分のみの方法を取り上げました。FC2ブログは、HTML も CSS もほとんど自由に編集できますし、javascriptも自由に使えるので、カスタマイズの自由度は限りなく高いです。

その分、複雑になりますので、失敗する取り返しのつかないことになります。また、しばらくして不具合が見つかる場合もあります。更新した過去のテンプレートも上記のように日付を名前に含めて残しておいて、任意の時点に戻すことができるようにしておくといいでしょう。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/482-e16b2b74
該当の記事は見つかりませんでした。