キャリコ

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 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

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

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

STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

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

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

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

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

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