【Stinger5カスタマイズ】子テーマのテンプレート準備しました。時短したい方はどうぞ。＾＾

はい、どうぞ。＾＾

自由に持って行って下さいな。

link : Stinger5カスタマイズ用の子テーマ用テンプレート　stinger5/ver20141123

（リンクから直でダウンロードできます）

どうせ皆さんも、カスタマイズ用の子テーマ作るんだろうしな～ｗということで配布させて頂くことにしました。

以上。

以降は、子テーマの構成云々なので、詳しい方はスルーして下さってもＯＫです。

（もちろん読んで下さる方が嬉しいですがｗｗｗ）

子テーマの概要
1. ファイル構成
2. style.cssの中身
導入方法
Stinger5をカスタマイズする時の注意点
最後に

子テーマの概要

ファイル構成

本テンプレートのファイル/フォルダ構成は下記の通りです。

[images]フォルダ　・・・　中身は空です。
style.css ・・・子テーマ用テンプレートの本体です。
screenshot.png ・・・　子テーマのイメージ画像です。

以下、内容の説明をさせて頂きます。

style.cssの中身

以下の基本コードのみを記載しています。

キャラセット（文字コード）

　「@charset “UTF-8”;」の部分ですね。特に触る事は無いと思います。

cssヘッダー

”/*”　～　”*/”　に囲まれた部分で、管理画面のテーマから詳細を表示した時に表示される内容です。

親テーマ読込用コード（stinger5ver20141123準拠）

「@import url(‘../stinger5ver20141123/style.css’);」の部分。

このコードで親テーマの情報を継承しますので、バージョンが異なる場合には、ここを修正してあげて下さい。

なお各項目は、親テーマとなるStinger5に準拠しています。

導入方法

1.　テーマのアップロード

ＤＬしたzipファイルを、[テーマを追加]からアップロードして下さい。

2.　親テーマとのバージョンを合せる

上述の通り「@import url(‘../stinger5ver20141123/style.css’);」の部分で親テーマの情報を継承しますので、バージョンが異なる場合には、ここを親テーマのバージョンに合せて下さい。

3.　子テーマヘッダー部分とイメージ画像のカスタマイズ

※自己利用のみの場合、ここは変更しなくても問題ありません。（やっとくと愛着が湧きますｗ）

子テーマのヘッダー部分については、

Theme Name: 子テーマの名前
Description: 子テーマの説明
Author: あなたの名前（ハンドルネーム）
Author URI: あなたのブログのURL）

辺りを修正してあげると良い感じになると思います。

また、イメージ画像については、子テーマのフォルダ「stinger5_child」の直下の「screenshot.png」を好きな画像に差し替えて下さい。

素敵な子テーマになったら、もしかしたら子テーマを配布～なんてとこまでいけるかもしれません。その時にはこの部分を修正してあげて下さいね。＾＾

3.　子テーマ側の画像を利用するための親コード変更

Stinger5では、親テーマが保持している画像も格段に少なくなりましたし、子テーマの初期導入にそれほど手を入れなくても良くなりましたね。

ロゴ画像や、ヘッダー画像は、子テーマを使っていてもカスタマイザーから変更できますので割愛します。

という訳で、Stinger5で親テーマに修正を入れる必要があるのは、

ファビコン(logo.ico)
iPhone用アイコン(apple-touch-icon-precomposed.png)

の2点ですね。

（iPhone用アイコンの変更は忘れがちｗｗｗ）

まず、いずれも独自の画像を子テーマのimagesフォルダにアップロードして下さい。

次に、ファビコンはheader.phpの46行目を

//元のコード
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />

から

//修正後
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.ico" />

に修正して下さい。

また、iPhone用アイコンについても、header.phpの54行目を

//修正前
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />

から

//修正後
<link rel="apple-touch-icon-precomposed" href="<?php echo get_stylesheet_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />

に修正してあげればＯＫです。

Stinger5をカスタマイズする時の注意点

ご存じの通り、Stinger5からレスポンシブデザイン対応となっていますので、CSSをカスタマイズする際は、どの部分がどのデバイスに適応されているのかを意識してあげる必要があります。
この辺りは、Jimonさん（@Jimon_s）が図解して下さってます。
非常に解りやすいので、参考にしてみて下さいね。

参照：Stinger5カスタマイズ！どこがどのデバイスに対応？「style.css」徹底分析！