キャリコ

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

  関連記事

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

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

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

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

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

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

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

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

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

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

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

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

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

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

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

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

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

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

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