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

2016-03-102020-05-04Web制作

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

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

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

Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく ...

https://wp-simplicity.com/

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

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

Contents

1. スクリーンショット
2. ダウンロードと利用方法
- 2.1. ダウンロード
- 2.2. 利用方法
3. バージョンアップ履歴
4. その他の記事装飾カスタマイズ

スクリーンショット

一覧ページ

投稿ページ

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

メニューにマウスオン

by GAHAG

ダウンロードと利用方法

ダウンロード

Flower Popをダウンロード

利用方法

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

ぜひご利用ください。

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

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

こんにちは、とみーです。先日アップしましたSimplicity2のテーマスキンFlower Pop、「可愛い！」とい ...

https://0edition.net/archives/1249

バージョンアップ履歴

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

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

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

見出しと強調部分だけの流し読みで、話を大まかにわかるようにするのがブログの基本です。強調部分と ...

https://0edition.net/archives/4944

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

見やすい簡潔に伝えられる分かりやすい読み手の印象に残りやすいメリットが多い箇条書き。ウェブ ...

https://0edition.net/archives/1845

Simplicity,WordPress,カスタマイズ,スキン

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

無職になって7ヵ月経過後の心境の変化＆退職する前に絶対にやっておくべきこと

コメント一覧

yutakaより:
2017-04-29 20:16
tommyさん
何度もありがとうございます。
>外観→カスタマイズ→その他→カスタマイザーのスタイル変更を外部CSSに書き出すにチェックが入ってませんか？
親テーマ、子テーマとも入ってなかったです。
ですが、一度チェックを入れたことがある可能性はあります。
全く覚えてないのですが、Simplisity2を設定後、よくわからずにあれこれ触っていましたので。
親テーマ、子テーマとも、一旦削除して改めてダウンロード＆アップロード＆有効化し直しているのに、それでは初期化されないのですね。。。
私には、もう手も足も出ない感じで、tommyさんにお願いするしかないのが心苦しいです。
世間はゴールデンウィーク、tommyさんもどうぞごゆっくりお過ごし下さい。
tommyより:
2017-04-30 08:47
yutakaさん
あれから色々と調べてみましたが・・・すみません、私の力では無理です。
Simplicity公式にフォーラムがありますので、そちらで質問していただければ解決するかもしれません。
カスタマイザーのスタイル変更を外部CSSに書き出す（非推奨）のところにサポート対象外と書いてあるのが気になりますが、もしかしたらチェックはしておらず原因は他のところにあるかもしれませんし。
お役に立てなくてごめんなさいです。
yutakaより:
2017-04-30 11:41
tommyさん
初心者の質問に何度も丁寧に答えていただきありがとうございました！
公式フォーラムのこともありがとうございます。
また、こちらのサイトも訪問させていただきますね。
お世話になりましたm(_ _)m
yutakaより:
2017-05-13 11:27
tommyさん
こんにちは。
テーマを変更されたのですね。
文字も可愛いくて、和みます(^ ^)
さて、Flower Popの設定ですが、その後、公式フォーラムに質問し、無事に綺麗に表示されるようになりました。
https://wp-simplicity.com/suport/topic/スキンflower-pop設定時、メニューとサイドバーのライン/
tommyさんに色々教えて頂いたこと、勉強になりました。いろいろとありがとうございました！
tommyより:
2017-05-13 12:04
yutakaさん
ありがとうございます！
フォントはこちらの記事に書いてますが、可愛くておすすめですよ！
https://0edition.net/archives/2672
Flower Popの件、わざわざご報告ありがとうございます！
なんだ、そんな簡単なことだったんだ・・・という感じですね（笑）
あまりお役に立てずに恐縮ですが、また何かありましたらお気軽にコメントくださいませ。
みよより:
2017-06-17 16:24
初めまして！
AC（アダルトチルドレン）に関するブログを始めたいと思い、親バレ防止で今までの自分じゃやらないようなデザインにしたくて、こちらのスキンをお借りしました！
おかげさまで、すぐに記事作成を始めることができました。
素晴らしいものを公開頂いてありがとうございます。
ある程度記事の本数が増えたので、少しずつカスタマイズしているところなんですが、不具合と言えばいいのでしょうか？
スマホ（iPhone6）にて確認した場合にhタグが画面幅をオーバーしているようで、個別の記事や固定ページを見ると横スクロールが発生しています。
simplicity2のデフォルト設定だと横スクロールは発生しないので、多分「Flower Pop」の設定かと思うのですが…
特に横幅の指定はされていませんし、ちょっと原因がわからなくて書き込ませてもらいました。
それと、記事一覧の記事にマウスオーバーした際にsimplicity2のグレーのままなので、ピンクに変更したいのですが、どこを触ればいいのか教えていただくことは可能でしょうか？
tommyより:
2017-06-17 22:21
みよさん
初めまして。スキンお使いいただいてありがとうございます！
メニューをより可愛くカスタマイズされてて、素敵ですね！
横スクロールが発生してしまう件ですが・・・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だけ残して他の指定は削除しちゃってください。

ピンバック & トラックバック一覧

Simplicity2：スキンを使ってオシャレにカスタマイズより:
2017-05-14 14:45
[…] Simplicity2テーマスキン「Flower Pop」を作ってみた【WordPress】こんにちは、とみーです。 WordPressで大人気のテーマ、Simplicityのテーマスキンを作成しました…0edition.net […]
【WordPress】Simplicity2にスキンを追加してブログのデザインをガラッと変える方法♪ | 私、就活辞めて、ネットビジネス始めました。より:
2017-05-25 23:59
[…] とみーさんという方が制作された、 Flower Popというスキンもおススメです♪ →Flower Popダウンロードページ […]
Googleアドセンスの審査通過までより:
2017-06-17 21:29
[…] 私はウェブデザインの知識がゼロではありませんが、デザインをしたいのではなく記事を書きたかったので「Simplicity2」という無料でSEO対策済みのテーマをインストールしています。また、親バレ防止でいつものデザインからかけ離れたものにしたかったので「Flower Pop」というSimplicity2用のスキンを使用しています。すこ～しカスタマイズしてますが、ほとんどそのままです。めちゃくちゃ可愛いですよね～！こういう可愛さは、私じゃ逆立ちしても出てきません； […]