GINBOU

漫画描きの主婦・小鳥遊ゆりかの日々活動記録

SIMPLESTERのカスタマイズ1

      2015/03/22

wordpress-logo-hoz-rgb

使用中のテーマ「SIMPLESTER」の幅を変更

新しくしたテーマについての続きです。^^
wordpress初心者はデザインの幅を変更するだけで四苦八苦。
最近のテーマはレスポンシブデザインにしてくださっているので、どこをいじればいいのかさっぱり;
自分で色々試してみたものの、デザイン崩れを起こしまくってしまってもうお手上げ。
結局「SIMPLESTER」の本家、こふす様に問い合わせをして教えていただきました。
こふす様、ありがとうございました!!

変更箇所は4つだけ!

このテーマは大もとの「STINGER5」のCSSを上書きするという作りになっているので、「SIMPLESTER」そのものにはCSSファイルしかないので、変更はCSSの中で全部済みます。
PHP本体をいじらないでいいというのは、PHPがよくわからない人にとっては垣根がグッと下がりますね。

では、変更箇所です。

1.全体の幅の調整

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

ハイライト部分、全体の幅を1116pxから980pxに変更します。

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

 

2.トップページの新着記事の幅を変更

/*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: #752B1B;}
.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;} }
#topnews dl:nth-of-type(3n+1) {width:100%}
nav ul {display: flex;}
#topnews {display: flex;flex-flow: row wrap;justify-content: space-between;}
div#topnews dl {width:44%;}
.post {background-color: #fff;padding: 20px 40px;}
div.post #kanren {display: flex;flex-flow: row wrap;justify-content: space-between;}
div.post #kanren dl {width:43%}
#kanren dl:last-child {margin-bottom: 10px;border: 1px solid #EEE;}
p.tagst + div {display:flex;justify-content: space-between;}
.post .smanone {padding-top: 0 !important;}
}

同じく、ハイライト部分を変更します。

/*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: #752B1B;}
.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;} }
#topnews dl:nth-of-type(3n+1) {width:100%}
nav ul {display: flex;}
#topnews {display: flex;flex-flow: row wrap;justify-content: space-between;}
div#topnews dl {width:43%;}
.post {background-color: #fff;padding: 20px 40px;}
div.post #kanren {display: flex;flex-flow: row wrap;justify-content: space-between;}
div.post #kanren dl {width:43%}
#kanren dl:last-child {margin-bottom: 10px;border: 1px solid #EEE;}
p.tagst + div {display:flex;justify-content: space-between;}
.post .smanone {padding-top: 0 !important;}
}

これらの数値は目安です。デザインをすでにある程度いじっている場合はこの数値だとデザイン崩れを起こす可能性があります。
1%でも変わることがありますので、根気よく調度良い%を探しだしてください。

 

3.関連記事の幅を変更

/*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: #752B1B;}
.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;} }
#topnews dl:nth-of-type(3n+1) {width:100%}
nav ul {display: flex;}
#topnews {display: flex;flex-flow: row wrap;justify-content: space-between;}
div#topnews dl {width:44%;}
.post {background-color: #fff;padding: 20px 40px;}
div.post #kanren {display: flex;flex-flow: row wrap;justify-content: space-between;}
div.post #kanren dl {width:43%}
#kanren dl:last-child {margin-bottom: 10px;border: 1px solid #EEE;}
p.tagst + div {display:flex;justify-content: space-between;}
.post .smanone {padding-top: 0 !important;}
}

2.の少し下に変更箇所があります。

/*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: #752B1B;}
.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;} }
#topnews dl:nth-of-type(3n+1) {width:100%}
nav ul {display: flex;}
#topnews {display: flex;flex-flow: row wrap;justify-content: space-between;}
div#topnews dl {width:44%;}
.post {background-color: #fff;padding: 20px 40px;}
div.post #kanren {display: flex;flex-flow: row wrap;justify-content: space-between;}
div.post #kanren dl {width:42%}
#kanren dl:last-child {margin-bottom: 10px;border: 1px solid #EEE;}
p.tagst + div {display:flex;justify-content: space-between;}
.post .smanone {padding-top: 0 !important;}
}

こちらも数値は目安です。適宜調整してください。

 

4.メディアクエリの変更

最後に、2.と3.で変更した箇所の上の方、メディアクエリの記述を変更します。

/*media Queries PCサイズ(最低1150pxのサイズ)
----------------------------------------------------*/
@media only screen and (min-width: 1150px) {
header .sitename {padding: 60px 0px 0px}

1.で設定した全体の幅と同じ数値を入れます。

/*media Queries PCサイズ(最低1150pxのサイズ)
----------------------------------------------------*/
@media only screen and (min-width: 980px) {
header .sitename {padding: 60px 0px 0px}

以上です。
たったこれだけだったのか。。。とぐったりするほど簡単でした(^_^;)
メディアクエリ、まだ良くわからないことが多いです;
でも、こういったレスポンシブデザインのおかげで、携帯やスマホ表示用にプラグインを入れたりする必要がなくなったのは本当にありがたいです。

 - , , , , ,

  こちらの記事も合わせてどうぞ

  2018/01/31

from Instagram

やっと食べることができたよ!ヽ(=´▽`=)ノ 名古屋えびかつバーガー美味しかったです

  2017/06/11

from Instagram

西武vsDeNA戦を見に行って来ました!楽しかったーw

  2017/06/03

from Instagram

日比谷公園のオクトーバーフェスト。すごい混雑!

  2018/01/12

from Instagram

後楽園の中でラクレットチーズのホットドッグ食べてきました。 美味しかったけど食べきれなかった(^_^ …

  2018/01/13

from Instagram

東京ドームシティで開催してる天野さんのアクアリウム展に行ってきました!圧倒されまくりです。

  2017/06/11

from Instagram

山崎康晃選手のサイン。 フィールドビューのお客さんみんなに丁寧にサインしてくれました。 ファンサービ …