賢威が読み込んでいる複数のCSSを1つにまとめる

公開日: 2014年03月10日
最終更新日: 2014年06月09日

CSS圧縮

賢威では合計7個のCSSファイルが読み込まれているため、これらを1つのCSSファイルとしてまとめます。コード量やリクエスト数を減らすことで、見た目スッキリ!ページ表示速度向上!管理者にもユーザーにも優しく、良いことばかりです。

もくじ

はじめに

賢威では、デフォルトで7つのCSSファイルが読み込まれています。

カスタマイズ前のheader.phpには、以下のように記述されていました。

header.php

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/design.css" type="text/css" media="all" />
<?php if (the_keni('mobile_layout') == "y") { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/mobile_layout.css" type="text/css" media="all" />
<?php } ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/advanced.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

ちなみに、4行目のif文「if (the_keni(‘mobile_layout’) == “y”)」は、レスポンシブデザインを有効にしているか無効にしているかの判断をしています。

「賢威の設定」の中にある「レスポンシブデザインWebデザイン」のことですね。
賢威の設定

これを有効にしていればmobile.cssとmobile_layout.cssの2つのCSSファイルを読み込む、無効にしていれば読み込まない、という処理をしています。

私は今後、これを無効にする予定はありませんし、もしもモバイルでの表示を変えたくなった場合には再度PHPなりCSSなりを直接カスタマイズするので、この分岐は必要ありません。

よって、print.css以外は全て1つのファイルにまとめたいと思います。
※print.cssは印刷用のCSSファイルなので、一緒にしない。

CSSファイルを1つにまとめるメリットは、コードの見やすさ向上・ページ速度向上(大して変わらないと思うけど)・フォルダ内のファイル整理整頓、などです。

SEO的にも微々たる影響があるかないか程度の効果があるかもしれません。

ちなみにinosh blogでは、mystyle.cssというCSSファイルを作成して、ブログ内の装飾は全てそのCSSファイルで行なっておりますので、デフォルトのCSSファイルはインストール直後そのままの状態です。

CSSファイルを1つにまとめる

まずは、任意の名称(私は今回「keni_style.css」にしました)で新しいCSSファイルをフォルダ内に作成します。この際、ファイルの中身は空でOKです。
賢威のインストールフォルダー

作成したら、header.phpで読み込んでいるCSSファイルの上から順番に、中身のコードをkeni_style.cssにコピーしていきます。

順番は、以下の通りです。

  1. common.css
  2. layout.css
  3. design.css
  4. mobile.css
  5. mobile_layout.css
  6. advanced.css

まずはcommon.cssを開き、中身のコードを全部コピーします。
common.css

次に、中身が空の状態のkeni_style.cssを開きます。
keni_style.css

この中に、先ほどコピーしたcommon.cssのコードを貼り付けます。
コードの貼り付け

次は、同じようにlayout.cssを開いて中身のコードを全部コピーします。
※1番上の@charset “UTF-8″;はコピーしない。
layout.css

コピーしたコードを、keni_style.cssの1番下にカーソルを持って行き、そこに貼り付けます。
※この際、何らかのコメントを入れておくと、いつか役に立つ時が来るかもしれません。
keni_style.cssの1番下にコメントを書いておく

下矢印

keni_style.cssの1番下にコードを貼り付け

これを繰り返し、design.css、mobile.css、mobile_layout.css、advanced.cssのコードたちも追加していきます。

全てが終わったら、header.phpを以下のように書き換えます。

header.php

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/keni_style.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

そして、keni_style.cssと、header.phpをFTPでアップロードしたら、完了です。

ちなみにinosh blogの場合は、オリジナルのCSSファイル(mystyle.css)を作っているので、以下のようにデフォルトCSSとprint.cssの間に読み込ませています。

header.php

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/keni_style.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/mystyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

一連の作業が終了したら、パソコンやスマホなど様々な媒体で、念の為に表示崩れなどがないかチェックしておいた方が良いでしょう。もしかすると、コピペの作業中に何らかのミスをしているかもしれません。

また、一応ソースも確認しておきましょう。

ブログを開いて、右クリックから「ページのソースを表示(Google Chromeの場合)」をクリック。
ページのソースを表示

CSSファイルの読み込み部分を確認。
ページのソースを表示

ちゃんと読み込まれていますね。
これで、CSSファイルのまとめ作業は完了です。

\(^o^)/ ぼっけぇシェア \(^o^)/

この記事へ8件のコメント

  1. MomoTaro
    2014年7月14日 18:12

    勝手ながらinosh blog様の記事を参考に、
    自分のブログのコメント欄をカスタマイズ(LINE風にする)
    させて頂きました。

    価値のある素晴らしい情報をありがとうございます。

    今後もまた参考にさせて下さい。
    宜しくお願い致します。

    • inosh
      2014年7月14日 19:25

      コメントありがとうございます。
      いえいえ!お役に立てて幸いですー(゚∀゚)
      こちらこそ、inosh blogを今後ともよろしくお願い致します!

  2. ともいち
    2015年12月8日 1:01

    こんばんは、inoshさん。

    はじめまして、ともいちです。

    今回、LINE風のコメント形式を取り入れたくて、
    こちらにお邪魔しました。

    コメントでのご質問をご了承ください。

    mystyle.cssを作らない場合はdesign.cssに
    入れれば反映されるのでしょうか?

    よろしくお願いいたします。

    • inosh
      2015年12月9日 10:05

      こんにちは。
      コメントいただきありがとうございます。

      design.cssの最下部にそのまま貼り付けていただけたら問題なく反映されると思いますよ!

      よろしくお願いいたします。

  3. ともいち
    2015年12月9日 14:45

    こんにちは、inoshさん。

    度々、すみません。
    functions.phpを最下部に入れるとエラーになります。

    入れる場所が間違っているのでしょうか?

    • inosh
      2015年12月9日 15:09

      いえいえ。
      入れる場所が間違っているのかどうか、私に原因はわからないのですが、例えばPHPの閉じタグの後ろに貼り付けている場合にはエラーになるかと思います。

      ?>

      functions.phpの最終行に上記の閉じタグがあるかと思いますので、その上に貼り付けて試していただけると幸いです。

  4. ともいち
    2015年12月9日 15:24

    こんにちは、inoshさん。

    丁寧に対応していただきありがとうございます^^

    無事、設定できました。
    感謝です。

    見事に原因は閉じタグでした。
    cssカスタマイズは難しいですね。

    この度はありがとうございました。
    もっと勉強します。

    • inosh
      2015年12月9日 15:34

      お役に立てたようで良かったです。

      私もまだまだつまづくことが多く、Webは奥が深いですね。
      頑張りましょう~(^-^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む