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

Web制作

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

WordPressで大人気のテーマ、Simplicityのテーマスキンを作成しました。

ピンクを基調にしたシンプル可愛い女性向けスキンとなっております。
(このサイト自体はSimplicityではないです。すみません。他の運営サイトで利用させていただいてます。)

Simplicity

1.9.3用ではなく、Simplicity2用スキンです。(Ver.2.5.0動作確認済み)

レイアウトの崩れ等、不具合ありましたらお手数ですがご連絡ください。

スクリーンショット

一覧ページ

flower-pop_list

投稿ページ

flower-pop_contents

※スクリーンショットの仕様上、背景画像がリピートされていますが実際は上部固定です。

メニューにマウスオン

flower-pop_menu

by GAHAG

ダウンロードと利用方法

ダウンロード

 Flower Popをダウンロード

 

 

利用方法

  1. Flower Popをダウンロードして展開します
  2. 自サイトのURL/wp-content/themes/simplicity2/skins/ の中に解凍したflower-popというフォルダとその中身をアップロードします。
    ※子テーマを使用されている方は 自サイトのURL/wp-content/themes/simplicity2-child/skins/ になります。
  3. ダッシュボード > 外観 > カスタマイズ > スキン にFlower Popが表示されているはずなので、選択して保存すればOKです。
  4. スクリーンショットと同じようにサムネイルを丸くしたい場合は
    カスタマイズのレイアウト(全体・リスト) > サムネイルの角の丸め具合 > 円形にする を選択してください。

ぜひご利用ください。

下記のページにてレイアウトは同じままで背景や色を変えたパターンを紹介してますので合わせてどうぞ。

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

バージョンアップ履歴

2016/07/10…Simplicity2.2.0安定版に合わせて修正
2016/03/19…フッターの文字色・リンク色修正
2016/03/16…Simplicity2.1.0安定版公開に合わせて修正
2016/03/10…公開

その他の記事装飾カスタマイズ

【CSS】テキストを彩る蛍光ペン風やガーリーなマーカー12種類×7色【コピペでOK】

【CSS】リストマークの装飾デザイン 色のみ変更・アイコン活用・色を交互に変える方法

コメント

  1. まじゆい より:

    お返事し忘れておりました^^;すみません(汗)
    SKYスキン無事表示されましたーありがとうございました♬

  2. tommy より:

    まじゆいさん、丁寧にありがとうございます♪
    無事表示されたようでよかったです!

  3. yutaka より:

    tommyさん、初めまして。

    可愛いスキン♪
    早速、使わせていただきました。

    当方、初心者なもので、あれこれ調べてようやくアップロードしたのですが、ヘッダー画像?背景画像?がうまく表示されません。
    ヘッダー部分だけに画像が表示され、背景は白いままなのです。
    何が間違っているのでしょうか。

    お手数ですが、お教え頂けますと助かります。
    よろしくお願いいたします。

  4. tommy より:

    yutakaさん、初めまして。
    Flower Popをご利用いただきありがとうございます(・◡・)

    背景色ですが恐らく、で申し訳ないのですがheader-insert.phpに下記の一文がありませんか?
    @media screen and (max-width:1110px){#navi{background-color:}}
    こちら不要ですので削除してください。
    グローバルナビの背景色を指定し損ねてまして、削除したところで全体の背景色がなくなるかは分かりませんが・・・。
    ダメでしたらすみませんが、またご連絡ください!

  5. yutaka より:

    tommyさん

    yutakaです。
    早速にお返事頂きましてありがとうございます!!
     
    すいません、もう少し教えてください。
    「header-insert.php」は、どこにあるのでしょうか。

    ダウンロードしたFlower Popの中のファイル「style.css」と「mobile.css」の中には、「header-insert.php」という記載も「@media screen and (max-width:1110px){#navi{background-color:}}」という記載もないようです。

    ちなみにエックスサーバーで子テーマを使っています。
    エックスサーバーではファイルしかアップできなかったので、利用方法に説明していただいている「flower-popというフォルダとその中身をアップロード」が、「中身のファイルだけをアップロード」した状態になっているのですが、関係あるでしょうか?

    初心者なもので当たり前のことがわかっていなかったり、要領を得ない説明になっているかもしれません。
    お手数ですが、よろしくお願いいたします。

  6. tommy より:

    yutakaさん

    header-insert.phpはWordPressダッシュボードの外観→テーマの編集からいけます。
    ですが、ご存知ないということはそちらに追記してある可能性は低いですね・・・。

    >「中身のファイルだけをアップロード」した状態になっているのですが、関係あるでしょうか?
    関係あるかも・・・です。
    フォルダがアップロードできないのであれば、ファイルマネージャーでフォルダを作成してOKです。
    エックスサーバーのマニュアルページ貼っておきますね。
    https://www.xserver.ne.jp/manual/man_tool_file.php

    それか、最新版のSimplicityはFlower Popが内包されたバージョンになってますので
    そちらをダウンロード&アップロード&有効化していただければ
    外観→カスタマイズからクリックするだけで簡単に変更できますよ。

  7. yutaka より:

    tommyさん

    ありがとうございます!!
    ご丁寧に説明いただいて感謝感謝です。

    結局、最新版をダウンロードし直し、無事に変更することができました。
    ただ親テーマではバッチリなのが、子テーマにするとメニュー部分上下とサイドバー部分の枠のラインがグレーになってしまいました。
    親テーマでは問題ないということは、きっと私が何か不都合なことをしているということですよね。
    何かないか探してみます。
    もし、もし、tommyさんからアドバイスがあったら教えて頂けますと幸いです。
    なければ、もちろん大丈夫です。

    何度もご丁寧にお返事頂きまして、本当にありがとうございました。

  8. tommy より:

    yutakaさん
    >枠のライン
    どのファイルに記載されてるのかは分からないのですが、

    という記述があるためグレーになってしまってるようです。
    一番可能性があるファイルは、先日申し上げた通りheader-insert.phpなのですが・・・ないでしょうか?
    ないようでしたら、原因が子テーマだということが分かっているので、もし可能であればファイルを1つ1つ確認してみることをおすすめします。
    子テーマならそれほどファイル数は多くないので。

  9. yutaka より:

    tommyさん

    何度もお返事いただいて本当にありがとうございます。

    >どのファイルに記載されてるのかは分からないのですが、
    >
    >という記述があるためグレーになってしまってるようです。

    私のPCには、記述内容が表示されてなくて。。。
    先日、教えていただいた
    @media screen and (max-width:1110px){#navi{background-color:}}
    の記述ということでしょうか。

    子テーマのファイルを全て確認してみたのですが、どのファイルも「◎◎をしたい時にはここに挿入する」といった感じのファイルの説明の記述だけで、コードのようなものはないのです。
    試しにGreen Popを設定してみましたが、同じ箇所がグレーになりました。

    何度も本当に申し訳ありません。
    よろしくお願いいたします。

  10. tommy より:

    yutakaさん

    ようやく解決しそうな感じです!
    参考URL:https://goo.gl/fCSRDE
    外観→カスタマイズ→その他→カスタマイザーのスタイル変更を外部CSSに書き出す にチェックが入ってませんか?
    これを外せばOKなはずです!

    (追記)16:28
    私のローカル環境でも同じ現象が発生しました。
    wp-content/themes/simplicity2/css/css-custom.css の内容が反映されているようです。
    前述のチェックを一度オンにすると保存する/しないに関わらず書き込みが行われ、チェックを外してもそのCSSの中身は残ったままでした。
    中身の削除を行いましたがHEAD内にCSSが埋め込まれたまま・・・引き続き調査中です。私も困った;;

タイトルとURLをコピーしました