ryo.nagoya

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

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

calendar

reload

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

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

http://simplester.degitekunote.com/

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ではどうなるのか楽しみです!!

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

http://simplester.degitekunote.com/blog/2015/02/09/ver2-launch/

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

 


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

http://web.archive.org/web/20150724100506/http://stuporhacks.ddo.jp/simplester-ver2-comparison.html

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

この記事が気に入ったら
いいね ! しよう

Twitter で

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




Optionally add an image (JPEG only)


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

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

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

関連記事

[今日まで!]5/22日までの学割で「Kindle 7」を買い「Kindle Paperwhite (第1世代)」と比較、ストレージ容量だけ唯一廉価版の勝ち!
ゼムボックスに収まったシンセサイザー! Gembox Synth (Prototype) を購入!! {開封編}
Tweetbot4は本当に買ってよかった!!
iPhoneに「平成何年」か教えてもらう3つの方法
名刺サイズの情報カードを整理するときにいい名刺ボックスを探してみた
グループ系YouTuberカリスマブラザーズは何も変わってない

No Image

水拭きで消せるマッキーがあれば何度でもノートのタイトルを変えれる!
ごりゅごさんのブログ塾の懇親会で初めて皆さんとお酒を飲みました! #ブログ塾 魚菜家 宇豆真季 (うずまき)にて

No Image

誰が書いてるの?

ryoraspp

ryoraspp

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

folder iPhoneアプリ開発用語

No Image

No Image

No Image

No Image

No Image

No Image

more...

folder Java言語習得

No Image

more...

folder Sonar

「Sonar X1 LE」をDominoのように使いたい!そんな時はこれ!
more...

folder スピーカー

No Image

more...

folder テーマ

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

folder 考察

グループ系YouTuberカリスマブラザーズは何も変わってない
more...