キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

      2014/11/09

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )です。

STINGER5 はカスタマイズしなくてもそれだけで使える完成されたテンプレートだけど、同じテーマを使ってる人がいれば同じデザインのサイトになるのは当たり前。同じテーマを使ってるサイトと差別化を図るためには、見た目のデザインに手を加える必要がある。

サイトのデザインは CSS( cascading style sheets )というスタイルシートで変えられて、WordPress ではダッシュボードの『 外観 』から『 テーマ編集 』を開き、右側のテンプレート下部にあるスタイルシート( style.css )で変更が可能。

しかしここで手を加えてしまうとテーマをバージョンアップしたときに、カスタマイズした内容がすべて消えてしまう。それを回避するために子テーマが必要になり、その中にスタイルシートを作成します。

Ads by Google

子テーマの設定方法

1. 子テーマ用のフォルダを作成する

WordPress をインストールしたフォルダを開いて『 wp-content 』→『 themes 』の順に進むと、前回のエントリーでインストールした『 stinger5ver20140822 』というフォルダが確認できます。

キャリコ
ロリポップに wordpress をインストールして STINGER5 をテーマにする手順

これが親テーマと呼ばれるもので、このディレクトリに子テーマのフォルダを作成します。フォルダ名は何でも構わないけど、ここでは『 stinger5child 』とします。

2. 子テーマ内にスタイルシートを作成する

stinger5child 』の中に『 style.css 』というファイルを作成します。

作成したファイルには次のようにスタイルシートへ記述します。

Template: の部分は必ず親テーマのフォルダ名にしてください。

3. 親テーマのスタイルシートを読み込む

スタイルシートは子テーマが適用されるので、親テーマのスタイルシートを子テーマで読み込むために、次のようにスタイルシートへ追記します。

4. 子テーマのスタイルシートを有効化する

WordPress のダッシュボードから『 外観 』→『 テーマ 』と進むと『 stinger5child 』というテーマが確認できる。

マウスのカーソルを合わせると青い『 有効化 』というボタンが表示されるから、それをクリックして子テーマを有効化させます。

無事に子テーマが有効化したかどうかは WordPress のダッシュボードから『 外観 』→『 テーマ編集 』と開いたページで確認が出来ます。

CSS が反映されない場合の対処

タグによっては CSS が反映されないということがあって、これは親テーマの『 fanctions.php 』内の一部分を削除する必要があります。

途中を『 … 』と略したけど、ここからここまでという部分を削除すれば CSS が反映されるようになります。

まとめ

やっぱり同じテーマを使う人がいれば差別化を図りたいものだし、ちょっとした違いでも印象が変わってくるから CSS でのカスタマイズには挑戦したい。

ちょっと手を加えるだけで自分だけのオリジナルサイトが作れるし、その分だけ愛着も湧くというもの。充実したブログライフを送るためにもセルフカスタマイズをしてみてはいかがでしょうか?

 - STINGER5 ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

  おすすめ記事

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

STINGER5 のブログ説明文の重要性について

誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …

STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …