ryo.nagoya

夢の夢を直向きに追いかけて本当にする

Stinger5子テーマ「SIMPLESTER」Ver2が出たので、Ver1と比較してみました!

calendar 2015年2月16日

reload 2015年9月29日

こんにちは。ryo@SubStuporHackです。

このブログはStinger5とそのための子テーマ「SIMPLESTER」を使用しています。

STINGER5専用シンプルデザイン子テーマ「SIMPLESTER 」

その「SIMPLESTER」が作者によってアップデートされ、Ver2が公開となっていたので、

Ver2になって何が変わったのかまとめていこうと思います!

Ver2のCSSを見てみると、変更というより、追加!

2カラム設定


/*2カラム設定
(ウインドウの幅が1150px以上の場合のみトップページの新着記事一覧部分が2カラムになります。
2カラムデザインを使用する場合は下記の数字「99999999」を「1150」に変更してください。)
--------------------*/

@media only screen and (min-width: 99999999px) {
#topnews {display: flex;flex-flow: row wrap;justify-content: space-between;}
div#topnews dl {width:44%}
}

こちらの2カラムに対応したとのことです。

wrapper周り

Ver1では、


/*wrapper 周り
--------------------*/
#wrapper {max-width: 1116px;}
main {border-radius:0px;}

Ver2では、

/*wrapper 周り
--------------------*/
#wrapper {max-width: 1116px;}
main {border-radius:0px;background: none repeat scroll 0% 0% transparent;padding: 0px;}
#content {padding-top:10px;}

#content が追加になってますね。

header周り


/*header 周り
--------------------*/
.sitename img {max-height: 25px;}
header h1 {margin:0;}
header .sitename {font-size:20px;}

Ver2では、


/*header 周り
--------------------*/
.sitename img {max-height: 25px;}
header {text-align:center}
header h1 {margin:0;}
header .sitename {font-size:20px;display: inline-block;margin-bottom:0px}
header .descr {padding:0}
#headimg {padding-top:15px;}

.descr
#headimg
この二行が追加されてますね。

index周り


/*index 周り
--------------------*/
#topnews dl:hover {background-color:#f8f8f8;box-shadow: inset 0px -5px 0 0 #ffc200;}
#topnews dl {border:none;padding: 20px 20px;background-color:#f8f8f8;transition: all 0.4s ease;position:relative;display:flex;display:-webkit-flex;}
#topnews dl:first-child {padding-top: 20px;}
#topnews dt {min-width: 150px;margin-right: 20px;}
#topnews dt img {border: 1px solid #eee;}
#topnews .clearfix dd p {margin:0}
a:hover img {opacity: 1 !important;}
#kanren .clearfix dd p {margin:0}
#kanren dd h5 {font-size:15px;}

Ver2では、


/*index 周り
--------------------*/
#topnews dl {border:none;padding: 20px 20px;transition: all 0.4s ease;position:relative;display:flex;display:-webkit-flex;background-color:#fff;}
#topnews dl:hover {box-shadow: inset 0px -7px 0 0 #F62459;}
#topnews dl:first-child {padding-top: 20px;}
#topnews dt {min-width: 150px;margin-right: 20px;}
#topnews dt img {}
#topnews .clearfix dd p {margin:0}
a:hover img {opacity: 1 !important;}
#kanren .clearfix dd p {margin:0}
#kanren dd h5 {font-size:15px;}
#topnews dl:before {font-family: FontAwesome;content: "f004";position: absolute;display: none;margin-left: -17px;margin-top: -17px;background-color: #f62459;padding: 8px;border-radius: 50%;border:4px solid #fff;font-size:18px;}
#topnews dl:hover:before{-webkit-animation:blink 0.8s ease-in-out infinite alternate;-moz-animation:blink 0.8s ease-in-out infinite alternate;animation:blink 0.8s ease-in-out infinite alternate;color:#fff;display: inherit;}

#topnews dl:before
#topnews dl:hover:before
この二つが追加となってます。

ページネーション周り


/*ページネーション 周り
--------------------*/
div.pagination {display: inline-block;background: none !important;margin-top: 30px;}
div.pagination span, div.pagination a {padding: 9px 11px 7px !important;background-color: #ffc200 !important;}
div.pagination span.current {padding: 9px 11px 7px !important;background-color: #eee !important;}

Ver2では、


/*ページネーション 周り
--------------------*/
div.pagination {display: inline-block;background: none !important;margin-top: 30px;}
div.pagination a {color:#fff !important}
div.pagination a:hover {opacity:0.8}
div.pagination span, div.pagination a {padding: 9px 11px 7px !important;background-color: #F62459 !important;}
div.pagination span.current {padding: 9px 11px 7px !important;background-color: #fefefe !important;}
.pagination .current {color:#333}

div.pagination a {color:#fff !important}
div.pagination a:hover {opacity:0.8}
が追加

div.pagination span.current {padding: 9px 11px 7px !important;background-color: #fefefe !important;}
.pagination .current {color:#333}
こちらにあるカラーコードが、
#ffc200 → #F62459
#eee →  #fefefe
#333 追加

こうなっておりました。

navigatin周り


/*ページネーション 周り
--------------------*/
div.pagination {display: inline-block;background: none !important;margin-top: 30px;}
div.pagination span, div.pagination a {padding: 9px 11px 7px !important;background-color: #ffc200 !important;}
div.pagination span.current {padding: 9px 11px 7px !important;background-color: #eee !important;}

Ver2では、

/*ページネーション 周り
--------------------*/
div.pagination {display: inline-block;background: none !important;margin-top: 30px;}
div.pagination a {color:#fff !important}
div.pagination a:hover {opacity:0.8}
div.pagination span, div.pagination a {padding: 9px 11px 7px !important;background-color: #F62459 !important;}
div.pagination span.current {padding: 9px 11px 7px !important;background-color: #fefefe !important;}
.pagination .current {color:#333}

サイドバーRSS周り


/*サイドバーRSS周り
--------------------*/
.rssbox a {background-color: #ffc200;}

Ver2では、


/*サイドバーRSS周り
--------------------*/
.rssbox a {background-color: #F62459;padding:7px 10px}
.fa-rss-square {margin-right:5px;}

.fa-rss-square が追加となってました。

サイドバー(NEWPOST)周り


/*サイドバー(NEWPOST)周り
--------------------*/
#kanren dl {margin-bottom: 10px;padding: 20px;background-color: #F9F9F9;transition: all 0.4s ease;border:none;}
#kanren dl:hover {box-shadow: inset 0px -5px 0 0 #ffc200;}

Ver2では、


/*サイドバー(NEWPOST)周り
--------------------*/
#kanren dl {margin-bottom: 10px;padding: 20px;background-color: #F9F9F9;transition: all 0.4s ease;border:none;}
#kanren dl:hover {box-shadow: inset 0px -5px 0 0 #F62459;}
#kanren dl:before {font-family: FontAwesome;content: "f004";position: absolute;display: none;margin-left: -17px;margin-top: -17px;background-color: #f62459;padding: 8px;border-radius: 50%;border:4px solid #fff;}
#kanren dl:hover:before{-webkit-animation:blink 0.8s ease-in-out infinite alternate;-moz-animation:blink 0.8s ease-in-out infinite alternate;animation:blink 0.8s ease-in-out infinite alternate;color:#fff;display: inherit;}
@-webkit-keyframes blink{ 0% {opacity:0.2;}100% {opacity:1;} }
@-moz-keyframes blink{ 0% {opacity:0.2;}100% {opacity:1;} }
@keyframes blink{ 0% {opacity:0.2;}100% {opacity:1;} }

#kanren dl:before
#kanren dl:hover:before
@-webkit-keyframes blink
@-moz-keyframes blink
@keyframes blink

こちらの五行大幅に追加になってます。

media Queries PCサイズ (最低1150pxのサイズ)

</h3>
/*media Queries PCサイズ(最低1150pxのサイズ)
----------------------------------------------------*/
@media only screen and (min-width: 1150px) {
.snsb:before{font-family: FontAwesome;content:"f164";font-size: 40px;line-height: 70px;position: absolute;left: 130px;color: #ccc;}
.snsb:hover:before {color:#ffc200;transition: all 0.4s ease;}
}

Ver2では、


/*media Queries PCサイズ(最低1150pxのサイズ)
----------------------------------------------------*/
@media only screen and (min-width: 1150px) {
header .sitename {padding: 60px 0px 0px}
.snsb:before {display:none;font-family: FontAwesome;content: "f164";font-size: 40px;line-height: 70px;position: absolute;left: 130px;color: #F62459;}
.snsb:hover:before{-webkit-animation:blink 0.8s ease-in-out infinite alternate;-moz-animation:blink 0.8s ease-in-out infinite alternate;animation:blink-s 0.8s ease-in-out infinite alternate;display: inherit;}
@-webkit-keyframes blink-s{ 0% {opacity:0.2;}100% {opacity:1;} }
@-moz-keyframes blink-s{ 0% {opacity:0.2;}100% {opacity:1;} }
@keyframes blink-s{ 0% {opacity:0.2;}100% {opacity:1;} }
}

@-webkit-keyframes blink-s
@-moz-keyframes blink-s
@keyframes blink-s{ 0%

こちらの三行が追加となってます。

それでは、Ver2を導入して、見た目を比較してみましょう。

Ver2を導入して、見た目を比較

ヘッダー画像未設定時でも整ったデザインに調整

スクリーンショット 2015-02-16 8.13.40

中央揃えになったのでしょうか。

TOPページの2カラムデザイン選択の追加

スクリーンショット 2015-02-16 8.08.54

一目でたくさんの記事が目に入るようになりいい感じです!!

サイドバーの新着記事一覧部分とSNSボタンとTOPページの新着記事一覧のホバー時のアイコンアニメーション追加

スクリーンショット 2015-02-16 8.08.30

スクリーンショット 2015-02-16 8.15.38

スクリーンショット 2015-02-16 8.15.33

ふんわりと、アニメーションがついて(cssにbeforeがついた)いい感じです!!

TOPページの新着記事一覧部分のカテゴリーとタグの色分け

スクリーンショット 2015-02-16 8.17.43

カテゴリとタグの区分けがわかりやすく、見やすくなりました!!

まとめ

これはバージョンアップということで、

追加がメインでした。

前のものでちょっと物足りないなーというところが、見事追加され、おおっと思う見た目になりました。

完成度が高くなった気がします。

このままいきますと、Ver3ではどうなるのか楽しみです!!

是非是非もっと見やすい進んだテーマへと発展して欲しいです!

Ver2公開です! | STINGER5専用シンプルデザイン子テーマ「SIMPLESTER 」

 


※こちらの記事は「SubStuporAlsoHacks」から移行したものです。
その時のまま記事を見たい方はこちらからどうぞ!↓

Stinger5子テーマ「SIMPLESTER」Ver2が出たので、Ver1と比較してみました! | SubStuporAlsoHacks

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




Optionally add an image (JPEG only)


※Nameを空欄にすると匿名になります。

※コメント欄のみでコメントできます。

※管理者が承認するまで公開されません。

関連記事

[Wi-Fiを有線LANに変換]PLANEXのコンバーターを使ってWi-Fi接続!Panasonic BZT-600にて成功!!

No Image

ごりゅごさんのブログ塾の懇親会で初めて皆さんとお酒を飲みました! #ブログ塾 魚菜家 宇豆真季 (うずまき)にて

No Image

iPhone6の盗難に遭遇-セブ島のタクシーにて-その後にしたこと
ノンカフェインで元気になるものを摂取したい!そんな時はこちらがオススメ!!
[マテリアル]「count.json」APIが廃止された今、ツイート数を取得する方法[wp-material]
初のITパスポート試験を受験しました!が、395点見事不合格でした・・・

No Image

曖昧な理解だった「大人のADHD」をマンガに正しく教えてもらった!「マンガで分かる心療内科 13巻」

誰が書いてるの?

ryoraspp

ryoraspp

統合失調症睡眠障害RLSを治療しながら通信制の大学と英会話AEONで英語を学んでる大学生。
いつか留学したいと思いながら勉強してます。
ジャズトランペットPC・ガジェット関連とWordPressが好きです。
詳細はこちらをクリック!