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. yutaka より:

    tommyさん

    何度もありがとうございます。

    >外観→カスタマイズ→その他→カスタマイザーのスタイル変更を外部CSSに書き出す にチェックが入ってませんか?

    親テーマ、子テーマとも入ってなかったです。
    ですが、一度チェックを入れたことがある可能性はあります。
    全く覚えてないのですが、Simplisity2を設定後、よくわからずにあれこれ触っていましたので。

    親テーマ、子テーマとも、一旦削除して改めてダウンロード&アップロード&有効化し直しているのに、それでは初期化されないのですね。。。

    私には、もう手も足も出ない感じで、tommyさんにお願いするしかないのが心苦しいです。
    世間はゴールデンウィーク、tommyさんもどうぞごゆっくりお過ごし下さい。

  2. tommy より:

    yutakaさん

    あれから色々と調べてみましたが・・・すみません、私の力では無理です。
    Simplicity公式にフォーラムがありますので、そちらで質問していただければ解決するかもしれません。
    カスタマイザーのスタイル変更を外部CSSに書き出す(非推奨)のところにサポート対象外と書いてあるのが気になりますが、もしかしたらチェックはしておらず原因は他のところにあるかもしれませんし。
    お役に立てなくてごめんなさいです。

  3. yutaka より:

    tommyさん

    初心者の質問に何度も丁寧に答えていただきありがとうございました!
    公式フォーラムのこともありがとうございます。
    また、こちらのサイトも訪問させていただきますね。
    お世話になりましたm(_ _)m

  4. yutaka より:

    tommyさん

    こんにちは。
    テーマを変更されたのですね。
    文字も可愛いくて、和みます(^ ^)

    さて、Flower Popの設定ですが、その後、公式フォーラムに質問し、無事に綺麗に表示されるようになりました。

    https://wp-simplicity.com/suport/topic/スキンflower-pop設定時、メニューとサイドバーのライン/

    tommyさんに色々教えて頂いたこと、勉強になりました。いろいろとありがとうございました!

  5. tommy より:

    yutakaさん
    ありがとうございます!
    フォントはこちらの記事に書いてますが、可愛くておすすめですよ!
    https://0edition.net/archives/2672

    Flower Popの件、わざわざご報告ありがとうございます!
    なんだ、そんな簡単なことだったんだ・・・という感じですね(笑)
    あまりお役に立てずに恐縮ですが、また何かありましたらお気軽にコメントくださいませ。

  6. Simplicity2:スキンを使ってオシャレにカスタマイズ より:

    […] Simplicity2テーマスキン「Flower Pop」を作ってみた【WordPress】こんにちは、とみーです。 WordPressで大人気のテーマ、Simplicityのテーマスキンを作成しました…0edition.net […]

  7. […] とみーさんという方が制作された、 Flower Popというスキンもおススメです♪ →Flower Popダウンロードページ […]

  8. みよ より:

    初めまして!
    AC(アダルトチルドレン)に関するブログを始めたいと思い、親バレ防止で今までの自分じゃやらないようなデザインにしたくて、こちらのスキンをお借りしました!
    おかげさまで、すぐに記事作成を始めることができました。
    素晴らしいものを公開頂いてありがとうございます。

    ある程度記事の本数が増えたので、少しずつカスタマイズしているところなんですが、不具合と言えばいいのでしょうか?
    スマホ(iPhone6)にて確認した場合にhタグが画面幅をオーバーしているようで、個別の記事や固定ページを見ると横スクロールが発生しています。
    simplicity2のデフォルト設定だと横スクロールは発生しないので、多分「Flower Pop」の設定かと思うのですが…
    特に横幅の指定はされていませんし、ちょっと原因がわからなくて書き込ませてもらいました。

    それと、記事一覧の記事にマウスオーバーした際にsimplicity2のグレーのままなので、ピンクに変更したいのですが、どこを触ればいいのか教えていただくことは可能でしょうか?

  9. […] 私はウェブデザインの知識がゼロではありませんが、デザインをしたいのではなく記事を書きたかったので「Simplicity2」という無料でSEO対策済みのテーマをインストールしています。 また、親バレ防止でいつものデザインからかけ離れたものにしたかったので「Flower Pop」というSimplicity2用のスキンを使用しています。 すこ~しカスタマイズしてますが、ほとんどそのままです。 めちゃくちゃ可愛いですよね~! こういう可愛さは、私じゃ逆立ちしても出てきません; […]

  10. tommy より:

    みよさん
    初めまして。スキンお使いいただいてありがとうございます!
    メニューをより可愛くカスタマイズされてて、素敵ですね!

    横スクロールが発生してしまう件ですが・・・style.cssがskin直下にアップロードされているようです。
    flower-popのフォルダの中に入れていただいて、あとmobile.cssが同梱されていたかと思いますがそちらもflower-popのフォルダの中にアップロードお願いします。
    それで解決されると思います!

    マウスオーバーの色の変更はこちらのコードになります。
    .hover-card .entry:hover, .hover-card .related-entry:hover, .hover-card .related-entry-thumbnail:hover, .hover-card .blog-card:hover {
    color: カラーコード;
    }
    これで記事一覧のみではなく関連記事やブログカードも合わせて変更されます。
    記事一覧のみ変更したい場合は.hover-card .entry:hoverだけ残して他の指定は削除しちゃってください。

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