STINGER3のCSSを、子テーマでカスタマイズする方法

公開日: : 最終更新日:2014/02/26 ワードプレス

コード0003(通称ステ子さん)

“コゴロー”は、公式サイトの STINGER3 の基本設定に従い、“STINGER コゴロー”へと変身に成功。

しかし、勝手な思い込みから公式キャラクターである“ステ子”さん好みのテーマにするため、CSS(スタイルシート)を直接カスタマイズし始めたのであった。

2日後…。

よしっ!
原型がわからないほど、メチャクチャになったゾ!

はーっはっはっはっ!

“コゴロー”は WordPress を使ったことがなく、CSS もほとんど理解していなかったのである。

第一話「“ステ子”さんの部屋を可愛くするゾ!前編」の巻き

Present by ガジェとろ 絵師:@suzucut

スポンサーリンク

STINGER3 のカスタマイズ

子テーマとは

“コゴロー”は直接 CSS をカスタマイズしていたので、どこがオリジナルで、どこがカスタマイズした箇所なのか、さっぱり見分けがつかない状況に陥っていた。

なぜだ…。

いや、何か良い方法があるに違いない!
ここで待っているんだ!“ステ子”さん!!

とおおおおおぉぉぉぉぉーーーーっ!!

ググった結果“コゴロー”は、「子テーマ」を使った WordPress のカスタマイズ方法を発見する。

子テーマとは、親テーマ(STINGER3)オリジナルの CSS には手を加えず、デザインやレイアウトなど変更・追加したい部分だけを記述した CSS を、別途サーバーにアップしてカスタマイズする方法である。

document WordPress Codex 日本語版:子テーマ

子テーマでカスタマイズするメリット【1】

とにかく、カスタマイズした箇所がわかりやすい

さすが“ステ子”さん!!
Sっぷりが半端ないな♪///

もう一度はじめからやり直すゾ!
はーっはっはっはっ!

これはこれで喜ぶ“コゴロー”。

しかし、子テーマを使うことにより、その CSS には変更・追加したコードしかなく、どこをカスタマイズしていたのか一目瞭然

これでもう「何が何だか、わからない…」ということはないのだ。

子テーマでカスタマイズするメリット【2】

子テーマは、カスタマイズを維持したまま、親テーマ(STINGER3)のアップデートができる

これにより“コゴロー”は素早くアップデートし、最新テクノロジーを身にまとった“NEW STINGER コゴロー”へと変身できるのだ。

また注目すべき点は、公式キャラクター“ステ子”さんの本名が、“コード 0003”であること。

つまり STINGER は、今後、4桁を必要とする猛烈な勢いでアップデートが予定されているのだ。(勝手な憶測)

スゴ過ぎる!

惚れ直したぜ!
STINGER!!

もし、アップデートする度に CSS を直接カスタマイズしていたら、4桁という途方もない回数のカスタマイズが必要になっていたのだ。

まさに“超”S。

a little break
photo credit: Cassandra Leigh Gotto via photopin cc

子テーマでカスタマイズする方法

※カスタマイズは、必ずバックアップしてから作業をしてください。
※この内容は、FTP ソフトを使ってサーバーにアップロードができる人向きとなっています。

カスタマイズに使用する子テーマ

子テーマという概念を理解した“コゴロー”。しかし、STINGER3 を子テーマでカスタマイズする具体的な方法がよくわからない。

見つけたゾ!
STINGER マスター!!

“ステ子”さん!
これで俺もフォースをまとえる!!

“コゴロー”が見つけたのは、「room9」というブログを運営する STINGER マスターの一人“@Daisuke_9taro”さん。

STINGER マスター Qtaro さんのブログ「room9」

凡人以下の“コゴロー”には理解しがたい子テーマの解説もわかりやすく、カスタマイズされた子テーマさえもダウンロードができるのだ。

こ、これだっ!
「CANDY CRAZY」を使ってカスタマイズをはじめるゾ!!

“コゴロー”がベースに使用した「CANDY CRAZY」のダウンロードはこちら。

document 【第3弾】10分でSTINGERを自分色に!!カスタマイズ用子テーマ「CANDY CRAZY」を作成しました!!
document 「STINGER子テーマカスタマイズ」特集

“Qtaro”さん、未来からのプレゼントありがとうございます!

必要なフォルダと CSS ファイル

早速ダウンロードした zip ファイルを解凍する“コゴロー”。

folder stinger3child_r9_003_for1216
 folder stinger3child_r9_003_for1216
  document .DS_Store
  document style.css
  document smart.css
 folder __MACOSX
  document ._stinger3child_r9_003_for1216
  folder stinger3child_r9_003_for1216
   document ._.DS_Store
   document ._smart.css
   document ._style.css

子テーマでカスタマイズする(実際にサーバーにアップする)のに必要なフォルダと CSS ファイルは印のついた3つです。

folder stinger3child_r9_003_for1216
 document style.css
 document smart.css

他のフォルダとファイルは、Windows ユーザーには必要ないので削除しても問題ないです。

Mac ユーザーも、サーバーにアップするのは上記の3つでOKです。他のフォルダとファイルは(たぶん)編集に便利なはずですが、“コゴロー”は Mac に詳しくなく、それ以上わからないのであった。

a little break
photo credit: Linh H. Nguyen via photopin cc

CSS を STINGER3 のバージョンと一致させる

各 CSS をテキストエディタで開き、現在使用している STINGER3(親テーマ)のバージョンと一致するように内容を編集します。

【例】STINGER3 のバージョンが「stinger3ver20131217」だった場合。

document style.css(パソコン用)

3行目、9行目、12行目を、

すべて 20131217 に変更して保存します。

特に重要なのが、3行目12行目です。

ここが、使用している STINGER3 のバージョン(STINGER3 のフォルダ名)と一致しないと、親テーマの CSS を見つけられず、子テーマの内容がちゃんと反映されないので注意です。(大文字小文字も区別されるです)

document smart.css(スマホ用)

4行目を

20131217 に変更し、16行目を加筆して保存します。

この一行を書き加えることにより“コゴロー”は

子テーマの CSS には変更・追加したコードしかなく、どこをカスタマイズしていたのか一目瞭然

を、スマホ用の CSS でもできるようになるのだ。

16行目も、使用している STINGER3 とバージョンが一致しないと親テーマの CSS を見つけられず、子テーマの内容がちゃんと反映されないので注意です。

とおおおおおぉぉぉぉぉーーーーっ!!

a little break
photo credit: el patojo via photopin cc

子テーマをアップロードする

現在使用している STINGER3 と同じディレクトリに、編集した子テーマの CSS をフォルダに入れ、FTP ソフトを使ってサーバーにアップロードします。

folder stinger3child_r9_003_for1216
 document style.css
 document smart.css

↑これを

folder ワードプレスがあるところ(public_html や blog など)
 folder wp-content
  folder themes

」印のついた themes フォルダの中にアップロードします。中に「stinger3ver20131217」があればOKです。

↓アップロード後。

folder ワードプレスがあるところ(public_html や blog など)
 folder wp-content
  folder themes
   folder stinger3ver20131217
   folder stinger3child_r9_003_for1216

FTP ソフトを使ってアップロードする方法を覚えた“コゴロー”は、“Qtaro”さんや“@niji_mami”さん(ブログ → Niji_Life)といった STINGER マスター達がプレゼントする子テーマと STINGER のバージョンが違っても、使用できるようになるのだ。

ついにフォースをまとうゾ!
“ステ子”さん!!

※このインストール方法は、zip ファイルに圧縮し直す必要はありません。
※圧縮ソフトが使える人は圧縮して、STINGER3 のテーマと同じ方法で WordPress にインストールすることもできます。

a little break
photo credit: jeffreyw via photopin cc

子テーマのパソコン用 CSS を有効化する

アップロードしたパソコン用の子テーマ style.css は、WordPress の管理画面で有効化すると反映されるのだ。(STINGER3 のテーマを有効化したのと同じ方法です)

ダッシュボードの「外観」をクリックして…。
子テーマの「stinger3child_r9_003_for1216」を有効化、と…。

やったゾ!
“ステ子”さん!!

“コゴロー”はモニターを見たままシュークリームにかぶりつき、洗濯物を2つ増やしたのだった。

document ビフォー
子テーマでカスタマイズする前の表示(パソコン)

document アフター
子テーマでカスタマイズした後の表示(パソコン)

管理画面で有効化できない(壊れているテーマと表示される)ときは、STINGER3 と子テーマのバージョンが一致していない可能性が高いです。

修正した style.css と使用中の STINGER3 のフォルダ名が、完全に一致しているか確認してくださいね。

子テーマのスマホ用 CSS を有効化する

アップロードしたスマホ用の子テーマ smart.css は、WordPress の管理画面で、テーマ編集から、親テーマ STINGER3 のヘッダー(header.php)を修正すると反映されるのだ。

親テーマ STINGER3 のヘッダー(header.php)修正方法は、STINGER マスター“Qtaro”さんのページに、とても詳しく書かれています。ぜひ、ご覧ください。

document 【初心者向け】WordPressで子テーマを有効化したら、引き継いでいるテンプレは「親テーマ」を編集するんですよ!!って話

document ヘッダー(header.php

44行目の get_template_directory_uri を

get_stylesheet_directory_uri に修正して更新すると、スマホ用の子テーマが反映されます。

document ビフォー
子テーマでカスタマイズする前の表示(スマホ)

document アフター
子テーマでカスタマイズした後の表示(スマホ)

遂にフォースを手に入れたゾ!
“ステ子”さん!!

get  the force
photo credit: Keoni Cabral via photopin cc

STINGER3 のアップデートに対応する方法

STINGER3 がアップデートしたときに、対応する方法です。

公式サイトで最新機能などを十分に確認して、必要であれば簡単にアップデートができます。

  • STINGER3 をアップデートさせる方法
    • 公式サイトから、アップデートされた最新版をダウンロードする
    • WordPress の管理画面から、STINGER3 の最新版をインストールする(有効化はしないです)
    • 子テーマの CSS を、最新版のバージョンに修正してアップロードする
    • WordPress の管理画面から、STINGER3 最新版のヘッダー(header.php)を修正する

この手順で対応すれば、カスタマイズを維持したまま最新版の STINGER3 にアップデートすることができます。

もし、最新版でカスタマイズの必要な部分があれば、子テーマの CSS を修正・追加してアップロードすればOK。

また、元の STINGER3 に戻す場合は、子テーマの CSS を前のバージョンに修正してアップロードすれば戻ります。

さらにフォースの力を高めるゾ!!
とおおおおおぉぉぉぉぉーーーーっ!!

“コゴロー”は、“ステ子”さんに調教されたい一心で、ブロガーになる第一歩を踏み出したのであった。

“ステ子”さんの部屋を可愛くするゾ!後編」につづく

CSS の文字エンコードについて

予備知識として、運営環境によるトラブルの回避方法を、STINGER 生みの親である“ENJI”さんがツイートされています。

念のため、CSS ファイルの文字エンコードも

UTF-8 BOMなし
UTF-8 N
UTF-8 UnicodeでBOMなし指定

等で保存するのがおすすめです。詳しくは、ご利用中のテキストエディタをご確認ください。

STINGER3 最新版の functions.php は、もちろん「UTF-8(BOMなし)」。保存し直す必要はありません。

ガンガン集客したい人のかんたんWordPress入門
ネットでガンガン集客したい!そんな人のための、専門知識ゼロでもできるウェブサイト制作入門書です。ネットを使った集客といえば、TwitterやFacebookといったソーシャルメディア、アメブロなどのブログや…
口コミ・カスタマーレビュー
購入者の声 PC 感想 モバイル
スポンサーリンク
  • Pocket
  • follow us in feedly
  • “コゴロー”のツイッター

お役に立ちましたでしょうか?
最後までお読み頂き、ありがとうございました。

関連記事

コード0003(通称ステ子さん)

STINGER3のカスタマイズしたい場所を、CSSの中から見つける方法

WordPress の無料テーマ STINGER3 を、子テーマでカスタマイズする方法を身に

記事を読む

スポンサーリンク

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

“コゴロー”のツイッター キジシロを購読する follow us in feedly
マダニ
マダニ(SFTS)情報まとめ、厚生労働省・都道府県庁別など一覧

マダニの感染症(SFTS)に関する厚生労働省と関連するホームペ

寝る猫
猫を長生きさせる秘訣!絶対にダメな4つの食べ物

猫を元気に長生きさせる秘訣は「食べ物」と「飼う環境」、そして愛

すやすや眠る生後1ヶ月半の“風太郎”
子猫のワクチン接種で気をつけたこと、失敗したこと

“風太郎”!これからワクチン接種に行くゾ!! さ、キャリ

“風太郎”の肉球
あっという間!子猫の歯が生え変わりはじめたらどんどん抜ける

噛みっ!噛みっ!むっふーーーー! (たーーーのしーーーー

コード0003(通称ステ子さん)
STINGER3のカスタマイズしたい場所を、CSSの中から見つける方法

WordPress の無料テーマ STINGER3 を、子テー

もっと見る

PAGE TOP ↑