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

2016-03-132023-11-19Web制作

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

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

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

Contents

1. 事前準備
2. Sky Pop
3. Green Pop
4. あとがき

事前準備

Simplicity2の子テーマをダウンロード＆有効化します。
手順はSimplicity公式に詳しく載っていますのでご確認ください。
Flower Popのダウンロード＆適用を行います。
詳細はこちらの記事で。

Simplicity2テーマスキン「Flower Pop」を作ってみた【WordPress】
こんにちは、とみーです。 WordPressで大人気のテーマ、Simplicityのテーマスキンを作成しました。ピ ...
https://0edition.net/archives/896
子テーマのstyle.cssやmobile.cssに以下のコードをコピペします。
背景で使用する画像は任意のフォルダにアップロードして、style.cssの背景画像URLの箇所にアドレスを入れる必要があります。

Sky Pop

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

スクリーンショット

背景画像

by GAHAG

style.css

CSS

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
*/


/*************************************************************************************************************************
 全体
*************************************************************************************************************************/
body{
	background-image: url(背景画像URL);
	background-position: left top;
	background-size: cover;
	background-attachment: fixed;
}

/*************************************************************************************************************************
 グローバルナビメニュー
*************************************************************************************************************************/
#navi{
	border-bottom: 1px dotted #9FD9F6;
	background-color: rgba( 255, 255, 255, 0.5 );
}

#navi ul li a:hover{
	background-color: #9FD9F6;
}

#navi ul.sub-menu{
	background-color: #EAF6FD;
}

#navi ul.sub-menu li a:hover {
	background-color: #9FD9F6;
}

/*************************************************************************************************************************
 記事共通
*************************************************************************************************************************/
#main{
	border-left: 1px dotted #9FD9F6;
	border-right: 1px dotted #9FD9F6;
}

div#main:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 60px;
	position: absolute;
	top: -30px;
	left: -27px;
}

div#main:after{
	font-family: 'FontAwesome';
	content: '\f08d';
	color: #FFF;
	font-size: 30px;
	position: absolute;
	top: -15px;
	left: -11px;
	-webkit-transform:rotate(315deg);
	-moz-transform:rotate(3155deg);
	transform:rotate(315deg);
}

/*************************************************************************************************************************
 記事一覧
*************************************************************************************************************************/
#main .entry{
	border: none !important;
}

h2 a.entry-title:before{
	font-family: 'FontAwesome';
	content: '\f1d8';
	color: #9FD9F6;
	margin-right: 10px;
}

h2 a.entry-title:hover:before{
	color: #D04255;
}

/*************************************************************************************************************************
 個別記事見出し
*************************************************************************************************************************/
.article h1{
	background-color: #EAF6FD;
}

.article h1:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 52px;
	position: absolute;
	left: -22px;
}

.article h1:after{
	font-family: 'FontAwesome';
	content: '\f1d8';
	color: #FFF;
	font-size: 25px;
	position: absolute;
	top: 11px;
	left: -14px;
}

.article h2{
	font-size: 22px !important;
	margin: 20px -29px;
	padding: 10px 10px 2px 40px;
	border: none;
	border-bottom: 1px solid #9FD9F6;
	position: relative;
}

.article h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 40px;
	position: absolute;
	left: -17px;
}

.article h2:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #FFF;
	font-size: 23px;
	position: absolute;
	top: 10px;
	left: -12px;
}

.article h3{
	font-size: 20px;
	margin: 20px -29px;
	padding: 10px 10px 1px 40px;
	border: none;
	border-bottom: 1px dashed #9FD9F6;
	position: relative;
}

.article h3:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #FFF;
	font-size: 35px;
	position: absolute;
	left: -15px;
}

.article h3:after{
	font-family: 'FontAwesome';
	content: '\f10c';
	color: #9FD9F6;
	font-size: 35px;
	position: absolute;
	top: 10px;
	left: -15px;
}

.article h4{
	font-size: 18px;
	margin: 20px 0px;
	padding: 0px 10px;
	border: none;
	position: relative;
}

.article h4:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 20px;
	position: absolute;
	left: -38px;
}

/*************************************************************************************************************************
 投稿日・カテゴリ
*************************************************************************************************************************/
.post-meta{
	border-color: #9FD9F6;
}

/*************************************************************************************************************************
 続きを読む
*************************************************************************************************************************/
a.entry-read-link:before,
.related-entry-read a:before{
	font-family: 'FontAwesome';
	content: '\f01d';
	margin-right: 5px;
}

a.entry-read-link,
.related-entry-read a{
	background-color: #EAF6FD;
	border: 1px solid #EAF6FD;
}

a:hover.entry-read-link,
.related-entry-read a:hover{
	background-color: #9FD9F6;
	border: 1px solid #9FD9F6;
}

/*************************************************************************************************************************
 関連記事
*************************************************************************************************************************/
#related-entries h2{
	font-size: 22px;
	position: relative;
}

#related-entries h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 40px;
	position: absolute;
	left: -46px;
}

#related-entries h2:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #FFF;
	font-size: 23px;
	position: absolute;
	left: -41px;
}

/*************************************************************************************************************************
 コメント
*************************************************************************************************************************/
#reply-title{
	font-size: 22px;
	position: relative;
}

#reply-title:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 40px;
	position: absolute;
	left: -46px;
}

#reply-title:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #FFF;
	font-size: 23px;
	position: absolute;
	left: -41px;
}

/*************************************************************************************************************************
 ナビゲーション
*************************************************************************************************************************/
.navigation a:hover{
  background: #EAF6FD;
}

/*************************************************************************************************************************
 ページネーション
*************************************************************************************************************************/
.pagination a:hover{
	background-color: #9FD9F6;
}

.pagination li{
	border-bottom: 1px solid #9FD9F6;
}

.pagination li.first{
	position: relative;
}

.pagination li.first:before{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #9FD9F6;
	font-size: 20px;
	position: absolute;
	left: -14px;
	bottom: -10.3px;
}

.pagination li.last{
	position: relative;
}

.pagination li.last:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #9FD9F6;
	font-size: 20px;
	position: absolute;
	right: -14px;
	bottom: -10.3px;
}

.pagination li:not([class*="current"]) a:hover{
	background-color: #9FD9F6;
}

.pagination li.current a{
	background-color: #EAF6FD;
}


/*************************************************************************************************************************
 サイドバー
*************************************************************************************************************************/
#sidebar aside h3{
	border-bottom: 1px dotted #FDEFF5;
	position: relative;
}

#sidebar aside h3:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #FFF;
	font-size: 30px;
	position: absolute;
	left: -28px;
}

#sidebar aside h3:after{
	font-family: 'FontAwesome';
	content: '\f1db';
	color: #9FD9F6;
	font-size: 30px;
	position: absolute;
	top: 0px;
	left: -28px;
}

/*************************************************************************************************************************
 フッター
*************************************************************************************************************************/
#footer{
	border-top: 1px dotted #9FD9F6;
}

#footer a{
	color: #6C9BD2;
}

#copyright a{
	color: #6C9BD2;
	text-decoration: underline;
}

mobile.css

@charset "UTF-8";

/*************************************************************************************************************************
 グローバルナビゲーション
*************************************************************************************************************************/
#navi ul,
#navi ul.sub-menu,
#navi ul.children{
	background: none;
}

#navi ul li a{
	background-color: #D3EDFB;
}

#navi ul li a:hover{
	background-color: #9FD9F6;
	-webkit-tap-highlight-color: #9FD9F6;
}

/*************************************************************************************************************************
 記事共通
*************************************************************************************************************************/
#main{
	border-left: 1px dotted #9FD9F6;
	border-right: 1px dotted #9FD9F6;
}

div#main:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 60px;
	position: absolute;
	top: -30px;
	left: -27px;
}

div#main:after{
	content: none;
}

/*************************************************************************************************************************
 個別記事見出し
*************************************************************************************************************************/
.article h1{
	position: relative;
	background-color: #EAF6FD;
}

.article h1:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 53px;
	position:absolute;
	top: 11px;
	left: -20px;
}

.article h1:after{
	font-family: 'FontAwesome';
	content: '\f1d8';
	color: #FFF;
	font-size: 25px;
	position:absolute;
	top: 12px;
	left: -11px;
}

.article h2{
	font-size: 22px;
	margin: 20px 0px 20px 10px;
	padding: 10px 5px 2px 30px;
	border: none;
	border-bottom: 1px solid #9FD9F6;
	position: relative;
}

.article h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 40px;
	position:absolute;
	left: -15px;
}

.article h2:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #FFF;
	font-size: 23px;
	position:absolute;
	top: 10px;
	left: -10px;
}

.article h3{
	font-size: 20px;
	margin: 20px 0px 20px 10px;
	padding: 10px 5px 1px 25px;
	border: none;
	border-bottom: 1px dashed #9FD9F6;
	position: relative;
}

.article h3:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #FFF;
	font-size: 35px;
	position:absolute;
	top: 10px;
	left: -15px;
}

.article h3:after{
	font-family: 'FontAwesome';
	content: '\f10c';
	color: #9FD9F6;
	font-size: 35px;
	position:absolute;
	top: 10px;
	left: -15px;
}

.article h4{
	font-size: 18px;
	margin: 20px 0px 20px 5px;
	padding: 0px 5px 1px 25px;
	border: none;
	position: relative;
}

.article h4:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 20px;
	position:absolute;
	left: -5px;
}

/*************************************************************************************************************************
 続きを読む
*************************************************************************************************************************/
a.entry-read-link,
.entry-read-link a,
.related-entry-read a{
	background-color: #EAF6FD;
	border: 1px solid #EAF6FD;
}

a:hover.entry-read-link,
.entry-read-link a:hover,
.related-entry-read a:hover{
	background-color: #9FD9F6;
	-webkit-tap-highlight-color: #9FD9F6;
}

.entry-read-link a:active,
.related-entry-read a:active{
	background-color: #9FD9F6;
	border: 1px solid #9FD9F6;
}

/*************************************************************************************************************************
 関連記事
*************************************************************************************************************************/
#related-entries h2{
	position: relative;
}

#related-entries h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 40px;
	position:absolute;
	left: -15px;
}

#related-entries h2:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #FFF;
	font-size: 23px;
	position:absolute;
	left: -10px;
}

/*************************************************************************************************************************
 コメント
*************************************************************************************************************************/
#reply-title{
	position: relative;
}

#reply-title:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #9FD9F6;
	font-size: 40px;
	position:absolute;
	left: -15px;
}

#reply-title:after{
	font-family: 'FontAwesome';
	content: '\f0c2';
	color: #FFF;
	font-size: 23px;
	position:absolute;
	left: -10px;
}

/*************************************************************************************************************************
 ページネーション
*************************************************************************************************************************/
.pagination li:not([class*="current"]) a:hover{
	background-color: #9FD9F6;
	-webkit-tap-highlight-color: #9FD9F6;
}

.pagination li:not([class*="current"]) a:active{
	background-color: #9FD9F6;
	-webkit-tap-highlight-color: #9FD9F6;
}

/*************************************************************************************************************************
 トップに戻る
*************************************************************************************************************************/
#page-top a{
	background-color: #D3EDFB;
}

Green Pop

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

スクリーンショット

背景画像

by GAHAG

style.css

CSS

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
*/


/*************************************************************************************************************************
 全体
*************************************************************************************************************************/
body{
	background-image: url(背景画像URL);
	background-position: left top;
	background-size: cover;
	background-attachment: fixed;
}

/*************************************************************************************************************************
 グローバルナビメニュー
*************************************************************************************************************************/
#navi{
	border-bottom: 1px dotted #A5D4AD;
	background-color: rgba( 255, 255, 255, 0.5 );
}

#navi ul li a:hover{
	background-color: #A5D4AD;
}

#navi ul.sub-menu{
	background-color: #EBF5EC;
}

#navi ul.sub-menu li a:hover {
	background-color: #A5D4AD;
}

/*************************************************************************************************************************
 記事共通
*************************************************************************************************************************/
#main{
	border-left: 1px dotted #A5D4AD;
	border-right: 1px dotted #A5D4AD;
}

div#main:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 60px;
	position: absolute;
	top: -30px;
	left: -27px;
}

div#main:after{
	font-family: 'FontAwesome';
	content: '\f08d';
	color: #FFF;
	font-size: 30px;
	position: absolute;
	top: -15px;
	left: -11px;
	-webkit-transform:rotate(315deg);
	-moz-transform:rotate(3155deg);
	transform:rotate(315deg);
}

/*************************************************************************************************************************
 記事一覧
*************************************************************************************************************************/
#main .entry{
	border: none !important;
}

h2 a.entry-title:before{
	font-family: 'FontAwesome';
	content: '\f1bb';
	color: #A5D4AD;
	margin-right: 10px;
}

h2 a.entry-title:hover:before{
	color: #D04255;
}

/*************************************************************************************************************************
 個別記事見出し
*************************************************************************************************************************/
.article h1{
	background-color: #EBF5EC;
}

.article h1:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 52px;
	position: absolute;
	left: -22px;
}

.article h1:after{
	font-family: 'FontAwesome';
	content: '\f1bb';
	color: #FFF;
	font-size: 25px;
	position: absolute;
	top: 11px;
	left: -10px;
}

.article h2{
	font-size: 22px !important;
	margin: 20px -29px;
	padding: 10px 10px 2px 40px;
	border: none;
	border-bottom: 1px solid #A5D4AD;
	position: relative;
}

.article h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 40px;
	position: absolute;
	left: -17px;
}

.article h2:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #FFF;
	font-size: 23px;
	position: absolute;
	top: 10px;
	left: -12px;
}

.article h3{
	font-size: 20px;
	margin: 20px -29px;
	padding: 10px 10px 1px 40px;
	border: none;
	border-bottom: 1px dashed #A5D4AD;
	position: relative;
}

.article h3:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #FFF;
	font-size: 35px;
	position: absolute;
	left: -15px;
}

.article h3:after{
	font-family: 'FontAwesome';
	content: '\f10c';
	color: #A5D4AD;
	font-size: 35px;
	position: absolute;
	top: 10px;
	left: -15px;
}

.article h4{
	font-size: 18px;
	margin: 20px 0px;
	padding: 0px 10px;
	border: none;
	position: relative;
}

.article h4:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 20px;
	position: absolute;
	left: -38px;
}

/*************************************************************************************************************************
 投稿日・カテゴリ
*************************************************************************************************************************/
.post-meta{
	border-color: #A5D4AD;
}

/*************************************************************************************************************************
 続きを読む
*************************************************************************************************************************/
a.entry-read-link:before,
.related-entry-read a:before{
	font-family: 'FontAwesome';
	content: '\f01d';
	margin-right: 5px;
}

a.entry-read-link,
.related-entry-read a{
	background-color: #EBF5EC;
	border: 1px solid #EBF5EC;
}

a:hover.entry-read-link,
.related-entry-read a:hover{
	background-color: #A5D4AD;
	border: 1px solid #A5D4AD;
}

/*************************************************************************************************************************
 関連記事
*************************************************************************************************************************/
#related-entries h2{
	font-size: 22px;
	position: relative;
}

#related-entries h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 40px;
	position: absolute;
	left: -46px;
}

#related-entries h2:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #FFF;
	font-size: 23px;
	position: absolute;
	left: -41px;
}

/*************************************************************************************************************************
 コメント
*************************************************************************************************************************/
#reply-title{
	font-size: 22px;
	position: relative;
}

#reply-title:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 40px;
	position: absolute;
	left: -46px;
}

#reply-title:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #FFF;
	font-size: 23px;
	position: absolute;
	left: -41px;
}

/*************************************************************************************************************************
 ナビゲーション
*************************************************************************************************************************/
.navigation a:hover{
  background: #EBF5EC;
}

/*************************************************************************************************************************
 ページネーション
*************************************************************************************************************************/
.pagination a:hover{
	background-color: #A5D4AD;
}

.pagination li{
	border-bottom: 1px solid #A5D4AD;
}

.pagination li.first{
	position: relative;
}

.pagination li.first:before{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #A5D4AD;
	font-size: 20px;
	position: absolute;
	left: -14px;
	bottom: -10.3px;
}

.pagination li.last{
	position: relative;
}

.pagination li.last:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #A5D4AD;
	font-size: 20px;
	position: absolute;
	right: -14px;
	bottom: -10.3px;
}

.pagination li:not([class*="current"]) a:hover{
	background-color: #A5D4AD;
}

.pagination li.current a{
	background-color: #EBF5EC;
}


/*************************************************************************************************************************
 サイドバー
*************************************************************************************************************************/
#sidebar aside h3{
	border-bottom: 1px dotted #FDEFF5;
	position: relative;
}

#sidebar aside h3:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #FFF;
	font-size: 30px;
	position: absolute;
	left: -28px;
}

#sidebar aside h3:after{
	font-family: 'FontAwesome';
	content: '\f1db';
	color: #A5D4AD;
	font-size: 30px;
	position: absolute;
	top: 0px;
	left: -28px;
}

/*************************************************************************************************************************
 フッター
*************************************************************************************************************************/
#footer{
	border-top: 1px dotted #A5D4AD;
}

#footer a{
	color: #6C9BD2;
}

#copyright a{
	color: #6C9BD2;
	text-decoration: underline;
}

mobile.css

@charset "UTF-8";

/*************************************************************************************************************************
 グローバルナビゲーション
*************************************************************************************************************************/
#navi ul,
#navi ul.sub-menu,
#navi ul.children{
	background: none;
}

#navi ul li a{
	background-color: #EBF5EC;
}

#navi ul li a:hover{
	background-color: #A5D4AD;
	-webkit-tap-highlight-color: #A5D4AD;
}

/*************************************************************************************************************************
 記事共通
*************************************************************************************************************************/
#main{
	border-left: 1px dotted #A5D4AD;
	border-right: 1px dotted #A5D4AD;
}

div#main:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 60px;
	position: absolute;
	top: -30px;
	left: -27px;
}

div#main:after{
	content: none;
}

/*************************************************************************************************************************
 個別記事見出し
*************************************************************************************************************************/
.article h1{
	position: relative;
	background-color: #EBF5EC;
}

.article h1:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 53px;
	position:absolute;
	top: 11px;
	left: -20px;
}

.article h1:after{
	font-family: 'FontAwesome';
	content: '\f1bb';
	color: #FFF;
	font-size: 25px;
	position:absolute;
	top: 12px;
	left: -8px;
}

.article h2{
	font-size: 22px;
	margin: 20px 0px 20px 10px;
	padding: 10px 5px 2px 30px;
	border: none;
	border-bottom: 1px solid #A5D4AD;
	position: relative;
}

.article h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 40px;
	position:absolute;
	left: -15px;
}

.article h2:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #FFF;
	font-size: 23px;
	position:absolute;
	top: 10px;
	left: -10px;
}

.article h3{
	font-size: 20px;
	margin: 20px 0px 20px 10px;
	padding: 10px 5px 1px 25px;
	border: none;
	border-bottom: 1px dashed #A5D4AD;
	position: relative;
}

.article h3:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #FFF;
	font-size: 35px;
	position:absolute;
	top: 10px;
	left: -15px;
}

.article h3:after{
	font-family: 'FontAwesome';
	content: '\f10c';
	color: #A5D4AD;
	font-size: 35px;
	position:absolute;
	top: 10px;
	left: -15px;
}

.article h4{
	font-size: 18px;
	margin: 20px 0px 20px 5px;
	padding: 0px 5px 1px 25px;
	border: none;
	position: relative;
}

.article h4:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 20px;
	position:absolute;
	left: -5px;
}

/*************************************************************************************************************************
 続きを読む
*************************************************************************************************************************/
a.entry-read-link,
.entry-read-link a,
.related-entry-read a{
	background-color: #EBF5EC;
	border: 1px solid #EBF5EC;
}

a:hover.entry-read-link,
.entry-read-link a:hover,
.related-entry-read a:hover{
	background-color: #A5D4AD;
	-webkit-tap-highlight-color: #A5D4AD;
}

.entry-read-link a:active,
.related-entry-read a:active{
	background-color: #A5D4AD;
	border: 1px solid #A5D4AD;
}

/*************************************************************************************************************************
 関連記事
*************************************************************************************************************************/
#related-entries h2{
	position: relative;
}

#related-entries h2:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 40px;
	position:absolute;
	left: -15px;
}

#related-entries h2:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #FFF;
	font-size: 23px;
	position:absolute;
	left: -10px;
}

/*************************************************************************************************************************
 コメント
*************************************************************************************************************************/
#reply-title{
	position: relative;
}

#reply-title:before{
	font-family: 'FontAwesome';
	content: '\f111';
	color: #A5D4AD;
	font-size: 40px;
	position:absolute;
	left: -15px;
}

#reply-title:after{
	font-family: 'FontAwesome';
	content: '\f06c';
	color: #FFF;
	font-size: 23px;
	position:absolute;
	left: -10px;
}

/*************************************************************************************************************************
 ページネーション
*************************************************************************************************************************/
.pagination li:not([class*="current"]) a:hover{
	background-color: #A5D4AD;
	-webkit-tap-highlight-color: #A5D4AD;
}

.pagination li:not([class*="current"]) a:active{
	background-color: #A5D4AD;
	-webkit-tap-highlight-color: #A5D4AD;
}

/*************************************************************************************************************************
 トップに戻る
*************************************************************************************************************************/
#page-top a{
	background-color: #EBF5EC;
}

あとがき

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

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

Font Awesome Icons

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

英数字4桁の前に、バックスラッシュを付けるのをお忘れなく！

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

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

リスの森・飛騨山野草自然庭園に行ってきた【画像多数】

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

コメント一覧

けろら～より:
2016-11-05 17:05
初めまして、けろら～と申します。
Sky Popをお借りしました。
ありがとうございます。
最初は、Flower Popを見て一目ぼれだったのですが、良く見ると、カスタマイズされたSky Popもあったので、空好きな私はすぐに食いついてしまいました。
素敵なスキンを作って下さってありがとうございます。
tommyより:
2016-11-08 22:23
けろら～さん、コメントありがとうございます。
何故かスパムフィルタに引っ掛かってまして、コメントに気付くのが遅くなりました。すみません。
Sky Pop、気に入っていただけたようで何よりです！
使っていくうえで不具合ありましたらすぐおっしゃってくださいね。対応させていただきます。
love2hawaiiより:
2016-11-09 22:27
はじめまして。
この度アメブロからwordpressにお引越しするにあたり全くの初心者なもので、とみーさんが作成されたFLOWER POPのスキンを使用させていただきました♪
とても可愛くて気に入りました！
ありがとうございます。
tommyより:
2016-11-09 22:58
はじめまして、コメントありがとうございます。
Simplicityは初めての方にも分かりやすくていいですよね。
色々スキンがある中、Flower Popを選んでいただけて嬉しいです！
こちらこそありがとうございます(*’-‘*)

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

Simplicity2：スキンを使ってオシャレにカスタマイズより:
2017-05-14 14:44
[…] Simplicity2テーマスキン「Flower Pop」のカスタマイズ事例こんにちは、とみーです。先日アップしましたSimplicity2のテーマスキンFlower Pop、「可愛い…0edition.net […]