Simplicity2テーマスキン「Flower Pop」のカスタマイズ事例

2016-03-13WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

先日アップしましたSimplicity2のテーマスキンFlower Pop、「可愛い!」というお声をいただいて、一人小躍りしております。わーいわーい ₍₍ ◝( ´ω` )◟ ⁾⁾

今回はそのFlower Popのレイアウトはそのままで、背景画像と色を変更して雰囲気をガラッと変える方法をご紹介します。

スポンサーリンク

事前準備

  1. Simplicity2の子テーマをダウンロード&有効化します。
    手順はSimplicity公式 icon-external-link に詳しく載っていますのでご確認ください。
  2. Flower Popのダウンロード&適用を行います。
    詳細はこちらの記事で。
  3. 子テーマのstyle.cssやmobile.cssに以下のコードをコピペします。
    背景で使用する画像は任意のフォルダにアップロードして、style.cssの背景画像URLの箇所にアドレスを入れる必要があります。

Sky Pop

青を基調にしてみましょう。名付けてSky Pop!

スクリーンショット

sky-pop

 

背景画像

sky-pop_bg

by GAHAG

style.css

mobile.css

 Green Pop

 今度は緑を基調としたGreen Popです。

スクリーンショット

green-pop

 

背景画像

green-pop_bg

by GAHAG

style.css

mobile.css

 

ヒロさんのサイトで過去にGreen Popを適用してくださっていました。
スキンの紹介記事 icon-external-link も書いていただいて、ありがたや~(*・人・*)

あとがき

画像や色を変えただけなのに、雰囲気がガラリと変わります。スタイルシートってすごい。

飛行機や葉っぱなどのアイコンはアイコンフォントを使ってます。
こちらのページからお好きなアイコンを探してみてください。

アイコンの変更は、アイコンフォント個別ページに記述されているUnicode:の文字列をコピーして、スタイルシートのcontent: ‘\○○○○’;の箇所に貼り付けるだけです。

スタイルシートの詳しい説明はしませんが、カラーコード(#から始まる6桁)の箇所を色々いじってみるだけでも自分のサイトの特色が出せていいですよ!

こちらの記事もおすすめです