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

2016-03-13Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

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

スポンサーリンク

事前準備

  1. Simplicity2の子テーマをダウンロード&有効化します。
    手順はSimplicity公式 icon-external-link に詳しく載っていますのでご確認ください。
  2. Flower Popのダウンロード&適用を行います。
    詳細はこちらの記事で。
  3. 子テーマのstyle.cssやmobile.cssに以下のコードをコピペします。
    背景で使用する画像は任意のフォルダにアップロードして、style.cssの背景画像URLの箇所にアドレスを入れる必要があります。

Sky Pop

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

スクリーンショット

sky-pop

 

背景画像

sky-pop_bg

by GAHAG

style.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です。

スクリーンショット

green-pop

 

背景画像

green-pop_bg

by GAHAG

style.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;
}

 

ヒロさんのサイトで過去にGreen Popを適用してくださっていました。
スキンの紹介記事 icon-external-link も書いていただいて、ありがたや~(*・人・*)

あとがき

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

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

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

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

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

こちらの記事もおすすめです