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

2017-03-21WordPress

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

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

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

スポンサーリンク

事前準備

  1. Simplicity2の子テーマをダウンロード&有効化します。
    手順は公式サイトに詳しく載っていますのでご確認ください。

    Simplicityの子テーマをインストールする方法

    Simplicityは、そのままでも利用できますが、カスタマイズを念頭に置いて作成したWordpressテーマです。 子テーマを作成してスタイルシートから外観を変更しやすいように作りました。 「そもそもなんで子テーマを使う必要があるんだ?

  2. Flower Popのダウンロード&適用を行います。
    詳細はこちらの記事で。

    Simplicity2テーマスキン「Flower Pop」を作ってみた【WordPress】

    こんにちは、とみーです。WordPressで大人気のテーマ、Simplicityのテーマスキンを作成しました。…

  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 も書いていただいて、ありがたや~(*・人・*)

parallel line

2016.03.30「parallel line」は、管理人の「ヒロ」が運営するサイトです。勝手気ままに綴りますので、コーヒーでも飲みながら気楽にお付き合いいただけると幸いです。「クラウドソーシング」という働き方に興味を持ち、2016年2月

あとがき

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

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

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

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