キャリコ

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

  関連記事

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

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

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

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

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

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

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

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

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

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

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

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

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

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

1
ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

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

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

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …