ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

WordPress話題のテーマ「Stinger3」導入備忘録 その3

SPONSORED LINK

「Stinger3」導入編

前回でミニバードのレンタルサーバーへWordPressを新規インストールをするところまで解説しました。 今回はテーマ「Stinger3」のインストールと設定、そしてカスタマイズです。

【追記】 その後、当ブログは WordPressテーマ「Stinger3」から「Simplicity」に変更、そして「はてなブログ」へと移行しました。

ご了承くださいm(__)m

「Stinger3」のインストール

WordPressテーマのSTINGER3公式サイト

公式サイトの上段メニューバー、“ダウンロード”から最新版をダウンロードします。(今回は20140327版です。)

f:id:gadgerepo:20151110171232p:plain

WordPress管理画面、外観→テーマ→新規追加→テーマのアップロードからさきほどDLした「stinger3ver20140327」Zipファイルをアップロード、インストール。

f:id:gadgerepo:20151110171254p:plain

また、今回ボクは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」を有効化します。

f:id:gadgerepo:20151110171655p:plain

これで、子テーマ「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" />

ちょっとだけカスタマイズ

このままでも十分魅力的なデザインですが、若干カスタマイズさせていただきました。 しかし、ボクは先人の方々が公開されているカスタマイズ法をそのままコピペしているだけですので、参考にさせていただいたサイトを以下に紹介いたします。

dmgadget.info

dmgadget.info

dmgadget.info

dmgadget.info

以上で“WordPress話題のテーマ「Stinger3」導入備忘録”はひとまず終了です。おつかれさまでした。