カスタマイズ用のCSSを作成する

はじめに

まずはカスタマイズをするための下準備です。

inosh blogのWordPressテーマは「賢威6.1コーポレート版」をインストールしていますが、あくまでも１からテーマを作成するのが面倒だったので、賢威の中で最もシンプルであるコーポレート版を土台としてインストールしたというのが理由です。

そのため、これからオリジナルのデザインにするために、跡形もなくカスタマイズしていく予定です。賢威の元ファイル（デフォルトのphpファイルなど）もガンガンいじっていきます。

賢威7、賢威8と新しいバージョンが公開されてもバージョンアップしないことが前提となっていますので、もしも新たな賢威が出た時にバージョンアップしたいという方は【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-などを参考に子テーマを作成することをオススメします。

オススメというか、絶対にそうしてくださいｗ

それでは以下、私がまず最初にしたことを書き連ねていきたいと思います。

上書き用のCSSを作成し、header.phpに読み込ませる

現在、私がインストールしている賢威6.1コーポレート版では、合計で７個のCSSファイルが読み込まれています。

header.php

<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/design.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/mobile_layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/advanced.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/print.css" type="text/css" media="print" />

common.css、layout.css、design.css、mobile.css、mobile_layout.css、advanced.css、print.cssの７個ですね。

これらのスタイルシートを直接編集しても良いのですが、効率やメンテナンス性を考えると、新たなスタイルシートを作成した方が効率が良いでしょう。

今回は「mystyle.css」としてCSSファイルを保存し、header.phpにそれを読み込ませます。

mystyle.css

@charset "UTF-8";

img{ max-width:100%; }
.img_b{ border:1px solid #ccc; }

header.php

<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/design.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/mobile_layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/advanced.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/mystyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/print.css" type="text/css" media="print" />

header.phpにこのスタイルシートを読み込ませる際、既に記述されているスタイルシートの１番下に記述してください。
※印刷用スタイルシートのprint.cssを除く。

php（html）は上から順番に読み込まれていきますので、１番下に記述することで自分のスタイルシートが１番最後に読み込まれ、デフォルトのスタイルを上書きして優先的に適用されるようになります。

ただ、印刷用のスタイルシートは１番最後になるようにして下さい。
今回の場合は、advanced.cssとprint.cssの間に記述する形になります。

ちなみに、mystyle.cssに記述してあるコード（max-width:100%）は、画像ファイルの横幅がコンテンツエリアをはみ出るほどのサイズだった場合、強制的にコンテンツエリアの幅に合わせるためのスタイルです。

max-width:100%を設定しないで大きな画像を使った場合はこのようになります↓

max-width:100%を設定しておくとこうなります↓

もしも幅がはみ出てしまうほどの画像だった場合に、自動的に包括するコンテンツエリアの幅に合わせてくれます。

基本的に、画像などはコンテンツエリアの幅に合わせて作ることになると思いますが、事故防止のためにも私はどのサイトにもimg{ max-width:100% }を設定しています。

レスポンシブデザインでも必須となるコードですね。

話はそれましたが、これで上書き用のスタイルシートを読み込ませることが出来ましたので、次回以降は少しずつ当ブログをカスタマイズしていきたいと思います。