「Stinger3」導入編
前回でレンタルサーバー「ミニバード（現：スターサーバー）」へWordPressを新規インストールをするところまで解説しました。 今回はテーマ「Stinger3」のインストールと設定、そしてカスタマイズです。
【追記】 その後、当ブログは WordPressテーマ「Stinger3」から「Simplicity」に変更、そして「はてなブログ」へと移行しました。
ご了承くださいm(__)m
「Stinger3」のインストール
公式サイトの上段メニューバー、“ダウンロード”から最新版をダウンロードします。（今回は20140327版です。）
WordPress管理画面、外観→テーマ→新規追加→テーマのアップロードからさきほどDLした「stinger3ver20140327」Zipファイルをアップロード、インストール。
また、今回ボクはStinger3の子テーマとして「CANDY CRAZY」を使用させていただきました。
【第3弾】10分でSTINGERを自分色に！カスタマイズ用子テーマ「CANDY CRAZY」を作成しました
ページ中程からダウンロードします。
ただし、このままインストールして管理画面テーマから子テーマCANDY CRAZYを有効化しても、子テーマが反映されません。Stinger3のバージョンとCANDY CRAZYのバージョンが異なっている為です。そこでCANDY CRAZYのstyle.cssを書き換えて使えるようします。ダウンロードした「stinger3child_r9_003_for1216.zip」を解凍し、style.cssをテキストエディタなどで開きます。
/*--------------------------------------------------------- Theme Name: stinger3 child theme -room9 custum 003 "CANDY CRAZY"- Template: stinger3ver20131216 Description: Customize css for stinger3 Auther: Qtaro Author URI: http://room9.jp License: License URI: Version: 20131216 (for stinger3ver20131216) ---------------------------------------------------------*/ @charset "UTF-8"; @import url("../stinger3ver20131216/style.css");
3、9、12行目の“20131216”計4ヶ所をすべて“20140327”に書き換えます。
/*--------------------------------------------------------- Theme Name: stinger3 child theme -room9 custum 003 "CANDY CRAZY"- Template: stinger3ver20140327 Description: Customize css for stinger3 Auther: Qtaro Author URI: http://room9.jp License: License URI: Version: 20140327 (for stinger3ver20140327) ---------------------------------------------------------*/ @charset "UTF-8"; @import url("../stinger3ver20140327/style.css");
smart.cssも同様に書き換えます。
/*--------------------------------------------------------- [SP CSS] for stinger3 child theme -room9 custum 003 "CRAZY GIRL's HOUSE"- Version: 20131216 (for stinger3ver20131023) ※このCSSは上記verのオリジナルのsmart.cssから 変更が必要な部分を修正し、作成しています。 オリジナルのsmart.cssがアップデートされた場合は 合わせて修正する必要がある場合がありますので、予めご留意ください。
こちらは4行目、2ヶ所ですね。
/*--------------------------------------------------------- [SP CSS] for stinger3 child theme -room9 custum 003 "CRAZY GIRL's HOUSE"- Version: 20140327 (for stinger3ver20140327) ※このCSSは上記verのオリジナルのsmart.cssから 変更が必要な部分を修正し、作成しています。 オリジナルのsmart.cssがアップデートされた場合は 合わせて修正する必要がある場合がありますので、予めご留意ください。
書き換えたら再度Zipに圧縮し、先ほど同様、WordPress管理画面からインストールし、「CANDY CRAZY」を有効化します。
これで、子テーマ「CANDY CRAZY」が適用されますが、作者さんのサイトにも書かれているとおり、スマホ用の子テーマを使用できるようにするために、親テーマのheader.phpを一行修正する必要があります。 親テーマのheader.phpをテキストエディタで開き、
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
以下のように書き換えましょう。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/smart.css" type="text/css" media="all" />
ちょっとだけカスタマイズ
このままでも十分魅力的なデザインですが、若干カスタマイズさせていただきました。 しかし、ボクは先人の方々が公開されているカスタマイズ法をそのままコピペしているだけですので、参考にさせていただいたサイトを以下に紹介いたします。
以上で“WordPress話題のテーマ「Stinger3」導入備忘録”はひとまず終了です。おつかれさまでした。
