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

公開日: 2014年01月12日
最終更新日: 2014年02月16日

CSS

賢威をオリジナルのデザインにするため、カスタマイズ用のCSSファイルを読み込ませます。賢威のヘッダー部分のデフォルトPHPファイル(header.php)へ、自分が作成したCSSファイルを読み込ませるための記述方法などをご紹介します。

はじめに

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

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

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

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

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

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

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

現在、私がインストールしている賢威6.1コーポレート版では、合計で7個の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の7個ですね。

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

今回は「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にこのスタイルシートを読み込ませる際、既に記述されているスタイルシートの1番下に記述してください。
※印刷用スタイルシートのprint.cssを除く。

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

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

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

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

max-width:100%を設定しておくとこうなります↓
トップページの画像

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

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

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

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

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

コメントを残す

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