テンプレートの手動アップデート作業効率化

更新
2013年03月06日(水)

テンプレートのアップデートをできるだけ効率良くする方法です。現時点での最善の方法を載せています。当サイト作者が作成した次のテンプレートについてです。

概要

  1. テンプレートの手動アップデートの工程を減らせます。そのための準備をします。

  2. テンプレートをアップデートしていきたい人向けです。別にアップデートするつもりはないという人には不要な設定です。

メリット・デメリット

メリット

  1. テンプレートのアップデート時に旧バージョンの設定をある程度引き継げます。当サイト作者はテンプレートを時々アップデート(改訂)します。旧バージョンをお使いの方が新バージョンでも同じカスタム仕様で利用するとなると、最初からカスタムする必要があります。この時の工程を減らせます。

  2. 管理画面のCSS編集を見れば、どこをカスタムしたのかすぐにわかるようになります。管理画面のCSS編集では、カスタムしたコードしか表示されなくなるからです。

  3. 外部CSSファイル合計の容量が3~4割ほど減っているので、ほんの少しだけ表示速度が早くなります。(多分)

デメリット

  1. 旧バージョンの設定を完全に引き継げるというわけではありません。

  2. HTMLは引き継げません。最初からカスタムする必要があります。

  3. CSSの改訂が少なければ、CSSの設定は概ね引き継げます。しかし、アップデートするわけですから旧バージョンと相違が生じ、CSSも調整が必要になる場合もあります。新旧で変更がない部分のみそのまま引き継げる、ということです。

  4. CSS編集に慣れている人向けです。このページに記載している内容で戸惑うようであれば、このページで述べる方法でカスタムしていくのは困難です。また、CSSで編集する部分を把握していない(自分で調べられない)ようなら、このページで述べる方法はやめておいたほうがいいでしょう。

  5. デフォルトよりも外部CSSファイルの読み込み(HTTPリクエスト)が1つ増えるので、ほんの少しだけ表示速度が遅くなります。メリットで挙げたファイル容量の削減で早くなるのと相殺すると、早くなるのか遅くなるのかは未検証です。

効率良くテンプレートをアップデートするために

手順の流れ(子テーマ化)

  1. やること自体はシンプルです。ここでは、理由やメカニズムを一応解説しているだけなので、興味ない方はテンプレートのHTMLを編集まで飛ばせます。

  2. ブログ管理画面のCSS編集で表示されているデフォルトのコードを別の外部ファイルにします。(作者が用意しておきましたのでそれをご利用いただけます。)

  3. 別の外部ファイルにする際に、コメントアウトやスペースなどを取り除きできるだけ容量を圧縮します。(作者が用意した別の外部CSSファイルは既に圧縮済みです。)

  4. テンプレートのCSSをカスタムする時は、編集する部分だけをブログ管理画面のCSS編集で追加していきます。

  5. テンプレートのアップデート時は、CSSに関しては次のとおりします。

    1. 新バージョンの外部CSSファイルを読み込む設定(新バージョンの外部CSSも用意しておく予定)
    2. 自分で追加したCSSを新バージョンのCSS編集部分にコピペ
    3. 新旧で相違がある部分の調整(相違点を改訂履歴で記載しておく予定)
  6. 上記方法は、WordPressの子テーマの概念と似たようなものだと思っていただければ、分かりやすいかと思います。

    基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。
  7. 上記引用部分をこのページ内で述べる方法に当てはめて書き直すと次のとおりです。

    基本的にはテンプレートのデフォルトCSS自身にはまったく手を加えないで、テンプレートのデフォルトCSSのスタイルやレイアウトを好きなだけ変更することができます。そのため、テンプレートのデフォルトCSSがアップデートされてもCSS編集の変更は保持されます。

  8. HTMLに関しては、必ずしも対応しきれるわけではないので見送ります。iframeなどで外部ファイル化しようと思えばできますが、SEOの観点から推奨しません。

テンプレートのHTMLを編集

  1. HTML編集で次のコードを探します。下図で反転している部分です。ここではcustomtemplate ver1.3.0のキャプチャーで例示しています。

    <link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
    121114efficient-update-1.png
  2. 上記コードの上に次のコードの内、ご利用のテンプレート用コードを追加します。下図で反転している部分が追加後です。赤文字部分はご利用のテンプレートやバージョンによって異なります。

    • customtemplate ver1.3.0 → customtemplate130
      <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate130-min.css" media="all" />
    • valid-seo-3c ver1.2.0 → valid-seo-3c120
      <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/valid-seo-3c120-min.css" media="all" />
    • valid-seo-2c ver1.2.0 → valid-seo-2c120
      <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/valid-seo-2c120-min.css" media="all" />
    121114efficient-update-2.png
  3. 上で記載しているバージョンよりも新しいテンプレートの場合、 customtemplate140 という具合にファイル名をそのバージョンに対応させればいいようにしておく予定です。

テンプレートのCSSを編集

  1. デフォルトのCSSを別の外部CSSファイルで読み込む設定が完了すれば、管理画面のCSS編集にあるコードはすべて削除しても問題ありません。むしろ、削除しないと重複してCSSを読み込むので削除した方がいいです。

  2. コードが全くないCSS編集部分に、カスタムに必要なコードを追加していきます。たとえば、customtemplateをご利用で、カテゴリページの固定表示スペースを非表示にする場合は次のコードを追加します。

    #each-category{display:none;} /*カテゴリーページ別上部*/
    121114efficient-update-3.png
  3. 上記カスタムのみであれば、上図のとおりCSS編集内にコードが1行しかなく、とてもすっきりしています。アップデート時にカスタムした部分を一つ一つ確認する作業を省けます。

  4. テンプレートのアップデート時には、旧バージョンのCSS編集内のコードを新バージョンのCSS編集内にコピペします。ブログの表示に問題なければ完了です。

  5. 表示に問題があれば、そのテンプレートの説明ページにある改訂履歴を参照し、調整します。改訂履歴に記入漏れがあれば、ご指摘いただけると可能な限り対応します。

外部CSSファイル一覧

  1. customtemplate ver1.5.0

    • 圧縮前:32,543B
    • 圧縮後:21,763B
    • 圧縮率:66.9%
    <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate150-min.css" media="all" />
  2. customtemplate-3c ver1.5.0

    • 圧縮前:33,868B
    • 圧縮後:22,629B
    • 圧縮率:66.8%
    <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate-3c150-min.css" media="all" />
  3. customtemplate ver1.4.0 と ver1.4.1

    <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate140-min.css" media="all" />
  4. customtemplate-3c ver1.4.0 と ver1.4.1

    <link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate-3c140-min.css" media="all" />

補足

  1. 外部CSSファイル名の -min を省けば、圧縮前のデフォルトCSSファイルを確認できます。圧縮前のCSSを確認しないとCSSのカスタムは難しいので、圧縮前CSSをいつでも参照できるように外部ファイル化しておきました。

    
    
       、ゞヾ'""''ソ;μ,
      ヾ  ,'3     彡
      ミ         ミ
      彡        ミ
      /ソ,, , ,; ,;;:、ヾ`
    
      圧縮前
       ______
     / //    /|
     | ̄/  ̄ ̄,:|//!
     |/_,,..,,,,_ ./ .!/|
     | ./ ,' 3/`ヽ::|っ.!
     | l /⊃ ⌒.|つ|
     |/ー---‐'''''"|/
       ̄ ̄ ̄ ̄ ̄
      圧縮後
  2. CSSの圧縮は CSS Compressor で行なっています。圧縮後のコードは稀にコード順序が入れ替わり、スタイルの一部が機能しなくなることがあります。作者が気づけば補正しますが、お気づきの点がありましたらご連絡いただきたいです。

  3. 上記説明では管理画面のCSS編集を活用する例を挙げました。別の方法としては、ご自身のカスタム用CSSコードを外部ファイル化し、それを読み込むのもありです。

以上です。

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