fc2blog共有テンプレートでhtml内説明コメントアウト非表示で高速化

公開
2012年06月24日(日) 16:26

管理画面のHTML編集ではコメントアウトが表示され、ブラウザでソースを見た時はコメントアウトが非表示になる設定です。fc2blog用テンプレートであればどれでも可能なテクニックです。

概要

  1. 「エリア（モード）変数」でどのページにも出力されないように操作するだけです。

メリット

  1. ブログ閲覧時に出力される際のHTMLソースコードの説明用コメントアウトを減らせます。

  2. これにより通信量を削減でき、結果、多少の表示速度高速化が図れます。

  3. 説明用コメントアウト部分を削除しないので、テンプレート編集時にはそれらのコメントアウトを見れます。

  4. HTMLソース内に説明用コメントアウトを表示しないようにすれば、ソースコードが美しくなり自己満足できます。

テンプレートのHTMLを編集

  1. 「エリア（モード）変数」を２組使うだけです。

  2. たとえば、タグエリア内でのみ表示する変数(<!--tag_area--> ～ <!--/tag_area-->)の中に、タグエリア以外で表示する変数(<!--not_tag_area--> ～ <!--/not_tag_area-->)を入れ子にし、その中にコメントアウトします。これだけです。

    
<!--tag_area--><!--not_tag_area-->
このように上下２組のfc2変数で挟む。
<!--/not_tag_area--><!--/tag_area-->

  3. 下図はテンプレート valid-seo-2c のHTML編集画面キャプチャーです。赤丸で示した部分が上記変数です。反転している部分が非表示になるコメントアウトです。

    fc2blog-comment-out-1.png

非表示になるメカニズム

  1. タグエリア内でのみ表示する変数(<!--tag_area--> ～ <!--/tag_area-->)１組の中にコメントアウトすると、タグのページではそのコメントアウトがHTMLに出力されます。そういう役目の変数なのですから当たり前です。

  2. また、タグエリア以外で表示する変数(<!--not_tag_area--> ～ <!--/not_tag_area-->)１組の中にコメントアウトすると、タグ以外のページではそのコメントアウトがHTMLに出力されます。これも当然です。

  3. よって、上記２組の変数で挟まれると、タグエリア内かつタグエリア以外を満たすことは矛盾して不可能なので、結局どのページでも何も出力されません。下図はクロームでHTMLソースコードを表示したものです。

    fc2blog-comment-out-2.png

  4. 互いに矛盾しあうタグ２組ならタグエリア用のものに限りません。タグエリア用のエリア（モード）変数が一番文字数が少ないので、テンプレートのHTML編集時にもっとも邪魔になりにくいかなって思う次第です。

その他

  1. 当サイト作者が公開しているテンプレートへの導入についてです。次回改訂時(ver1.1.2以降)にこのページで取り上げた方法によるコメントアウト記述に切り替える予定です。1～2行程度の短いコメントアウトはそのままにし、割と長い説明用コメントアウト部分に導入する予定です。

  2. テンプレートCSS内の説明用コメントアウト部分も、出力時に非表示にできないものかと思います。今のところ、当サイト作者には分かりかねます。

  3. お気づきの点などありましたら、ご指摘頂けますとありがたいです。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
⇧ ⊕ ㊉ ☯ ⇤ ⇩