LoginSignup
0
0

More than 5 years have passed since last update.

wp-appboxのスタイルを弄った話

Last updated at Posted at 2016-11-27

表題の通りのことをしてみました。wp-appboxのデフォルトスタイルは、mariginの横方向がautoではないため、中央揃えができないのです。というわけで、弄りました。

.wpappbox *,.wpappbox::after,.wpappbox::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.wpappbox a,.wpappbox a:after,.wpappbox::before{text-decoration:none ;color:#323232;-webkit-transition-property:background color;-webkit-transition-duration:.2s;-webkit-transition-timing-function:ease;-moz-transition-property:background color;-moz-transition-duration:.2s;-moz-transition-timing-function:ease;-o-transition-property:background color;-o-transition-duration:.2s;-o-transition-timing-function:ease;transition-property:background color;transition-duration:.2s;transition-timing-function:ease;}
.wpappbox a img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;}
.wpappbox a:hover img{opacity:.9;-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-webkit-filter:grayscale(100%);}
.wpappbox-tinymce-button{background-image:url(../buttons/appbox.btn.png);}
.wpappbox{clear:both;font-family:'Open Sans',Arial;background-color:#F9F9F9;width:auto;line-height:1;color:#545450;margin:3vh auto;font-size:16px;border:1px solid #E5E5E5;box-shadow:0 0 8px 1px rgba(0,0,0,.11);}
.wpappbox.simple{height:114px;}
.wpappbox.compact{height:70px;}
.wpappbox.screenshots-only{cursor:pointer}
.wpappbox .appicon{position:relative;height:112px;width:112px;float:left;padding:10px;background:#FFF;text-align:center;border-right:1px solid #E5E5E5}
.wpappbox.compact  .appicon{height:68px;width:68px;float:left;padding:6px;}
.wpappbox .appicon img{height:92px;max-height:92px;width:92px;max-width:92px;margin:auto;border:0;border-radius:6px;}
.wpappbox.compact .appicon img{height:54px;width:54px;max-width:54px;margin:auto;border:0;border-radius:6px;}
.wpappbox .watch-icon{height:40px;width:40px;max-width:40px;position:absolute;bottom:3px;right:3px;border:3px solid #FFF;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}
.wpappbox .qrcode{display:none;position:absolute;padding:6px;z-index:999;}
.wpappbox .applinks,.wpappbox.compact .applinks{float:right;position:relative;background:#FFF;text-align:center;border-left:1px solid #E5E5E5;}
.wpappbox .qrcode img{height:100px;width:100px;opacity:1;}
.wpappbox .appdetails{font-size:16px;line-height:16px;padding-top:10px;}
.wpappbox.compact .appdetails{font-size:15px;line-height:15px;padding-top:6px;}
.wpappbox .appdetails > div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:6px 8px}
.wpappbox.compact .appdetails > div{padding:5px 8px;}
.wpappbox .apptitle{font-size:19px;line-height:19px;font-weight:600;margin:2px 0 0;}
.wpappbox.compact .apptitle{font-size:17px;line-height:17px;}
.wpappbox .appdetails > .price-old{text-decoration:line-through;}
.wpappbox .applinks{height:112px;width:92px;display:block;}
.wpappbox.compact .applinks{height:68px;width:68px;display:block;}
.wpappbox .appbuttons{position:absolute;bottom:1px;width:92px;}
.wpappbox .appbuttons a,.wpappbox .appbuttons span{font-size:13px;box-shadow:0 1px 3px 0 rgba(0,0,0,.15);background:#F1F1F1;border-bottom:0;color:#323232;padding:3px 5px;display:block;margin:8px 10px;border-radius:2px;cursor:pointer;font-weight:400;}
.wpappbox .appbuttons a:hover,
.wpappbox .appbuttons span:hover{background:#373941;border-bottom:0;color:#FFF;transition:background-color .5s ease-in-out;-moz-transition:background-color .5s ease-in-out;-webkit-transition:background-color .5s ease-in-out;}
.wpappbox .rating-stars{width:65px;height:13px;margin-left:5px;margin-top:4px;display:inline-block;}
.wpappbox .stars-monochrome{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/stars-sprites-monochrome.png');?>) no-repeat;}
.wpappbox .stars-colorful{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/stars-sprites-colorful.png');?>) no-repeat;}
.wpappbox .stars00{background-position:0 0;}
.wpappbox .stars05{background-position:0 -13px;}
.wpappbox .stars10{background-position:0 -26px;}
.wpappbox .stars15{background-position:0 -39px;}
.wpappbox .stars20{background-position:0 -52px;}
.wpappbox .stars25{background-position:0 -65px;}
.wpappbox .stars30{background-position:0 -78px;}
.wpappbox .stars35{background-position:0 -91px;}
.wpappbox .stars40{background-position:0 -104px;}
.wpappbox .stars45{background-position:0 -117px;}
.wpappbox .stars50{background-position:0 -130px;}
.wpappbox a:link,.wpappbox a:visited{color:#545450;}
.wpappbox a:active,.wpappbox a:hover{text-decoration:none;color:#5588b5;}
.wpappbox.screenshots > .screenshots{width:auto;margin:0 auto;padding:10px;clear:both;border-top:1px solid #E5E5E5;}
.wpappbox.screenshots > .screenshots > .slider{overflow-x:scroll;overflow-y:hidden;height:320px;margin-top:0;}
.wpappbox.screenshots > .screenshots > .slider > ul{padding:0 ;margin:0 ;list-style-image:none;white-space:nowrap;}
.wpappbox.screenshots > .screenshots > .slider > ul > li{padding:0;margin:0 6px 0 0;list-style-type:none;display:inline;}
.wpappbox.screenshots > .screenshots > .slider > ul > li:last-child{margin-right:0;}
.wpappbox.screenshots > .screenshots > .slider > ul > li img{height:320px ;display:inline;}
.wpappbox.error > span{display:block;width:100%;height:100%;padding:10px;font-size:16px;border-left:3px solid #df4a4a;}
.wpappbox.error a{display:inline-block;font-size:15px;margin-left:3px;}
.wpappbox .appdetails .fallback{font-size:.9em;line-height:1.7em;white-space:normal;}
.wpappbox .appdetails .oldprice{text-decoration:line-through;}
.wpappbox.appstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/appstore-colorful.png');?>);}
.wpappbox.macappstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/macappstore-colorful.png');?>);}
.wpappbox.googleplay .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/googleplay-colorful.png');?>);}
.wpappbox.goodoldgames .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/goodoldgames-colorful.png');?>);}
.wpappbox.windowsstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/windowsstore-colorful.png');?>);}
.wpappbox.firefoxmarketplace .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxmarketplace-colorful.png');?>);}
.wpappbox.chromewebstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/chromewebstore-colorful.png');?>);}
.wpappbox.firefoxaddon .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxaddon-colorful.png');?>);}
.wpappbox.amazonapps .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/amazonapps-colorful.png');?>);}
.wpappbox.wordpress .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/wordpress-colorful.png');?>);}
.wpappbox.steam .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/steam-colorful.png');?>);}
.wpappbox.operaaddons .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/operaaddons-colorful.png');?>);}
.wpappbox:not(.colorful).appstore .applinks,.wpappbox:not(.colorful).macappstore .applinks,.wpappbox:not(.colorful).googleplay .applinks,
.wpappbox:not(.colorful).goodoldgames .applinks,
.wpappbox:not(.colorful).windowsstore .applinks,
.wpappbox:not(.colorful).firefoxmarketplace .applinks,
.wpappbox:not(.colorful).chromewebstore .applinks,
.wpappbox:not(.colorful).firefoxaddon .applinks,
.wpappbox:not(.colorful).amazonapps .applinks,
.wpappbox:not(.colorful).wordpress .applinks,
.wpappbox:not(.colorful).steam .applinks,
.wpappbox:not(.colorful).operaaddons .applinks{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%)}
.wpappbox.appstore .applinks,
.wpappbox.macappstore .applinks,
.wpappbox.googleplay .applinks,
.wpappbox.goodoldgames .applinks,
.wpappbox.windowsstore .applinks,
.wpappbox.firefoxmarketplace .applinks,
.wpappbox.chromewebstore .applinks,
.wpappbox.firefoxaddon .applinks,
.wpappbox.amazonapps .applinks,
.wpappbox.wordpress .applinks,
.wpappbox.steam .applinks,
.wpappbox.operaaddons .applinks{background-repeat:no-repeat;background-size:auto 42px;background-position:center 7px;background-color:#FFF;}
.wpappbox.compact.appstore .applinks,
.wpappbox.compact.macappstore .applinks,
.wpappbox.compact.googleplay .applinks,
.wpappbox.compact.goodoldgames .applinks,
.wpappbox.compact.windowsstore .applinks,
.wpappbox.compact.firefoxmarketplace .applinks,
.wpappbox.compact.chromewebstore .applinks,
.wpappbox.compact.firefoxaddon .applinks,
.wpappbox.compact.amazonapps .applinks,
.wpappbox.compact.wordpress .applinks,
.wpappbox.compact.steam .applinks,
.wpappbox.compact.operaaddons .applinks{background-position:center center;background-size:auto 48px;}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:240dpi){
            .wpappbox .rating-stars{background-size:65px 143px}
            .wpappbox .stars-monochrome{background-image:<?php echo 'url(' . plugins_url('/wp-appbox/img/stars-sprites-monochrome@2x.png');?>);}
            .wpappbox .stars-colorful{background-image:<?php echo 'url(' . plugins_url('/wp-appbox/img/stars-sprites-colorful@2x.png');?>);}
            .wpappbox.appstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/appstore-colorful@2x.png');?>);}
            .wpappbox.macappstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/macappstore-colorful@2x.png');?>);}
            .wpappbox.googleplay .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/googleplay-colorful@2x.png');?>);}
            .wpappbox.goodoldgames .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/goodoldgames-colorful@2x.png');?>);}
            .wpappbox.windowsstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/windowsstore-colorful@2x.png');?>);}
            .wpappbox.firefoxmarketplace .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxmarketplace-colorful@2x.png');?>);}
            .wpappbox.chromewebstore .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/chromewebstore-colorful@2x.png');?>);}
            .wpappbox.firefoxaddon .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxaddon-colorful@2x.png');?>);}
            .wpappbox.amazonapps .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/amazonapps-colorful@2x.png');?>);}
            .wpappbox.wordpress .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/wordpress-colorful@2x.png');?>);}
            .wpappbox.steam .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/steam-colorful@2x.png');?>);}
            .wpappbox.operaaddons .applinks{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/operaaddons-colorful@2x.png');?>);}
        }
@media screen and (max-width:500px){
    .wpappbox .rating-stars,.wpappbox.screenshots > .screenshots > .slider{margin-top:0}
    .wpappbox .appdetails > .developer,.wpappbox .watch-icon,.wpappbox.compact .applinks,.wpappbox.screenshots .applinks,.wpappbox.simple .applinks{display:none;}
            .wpappbox.screenshots > .screenshots{padding:8px;}
            .wpappbox .appdetails .fallback{white-space:nowrap;}
            .amazonapps .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/amazonapps-small.png');?>);padding-left:18px;}
            .appstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/appstore-small.png');?>);padding-left:18px;}
            .chromewebstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/hromewebstore-small.png');?>c);padding-left:16px;}
            .firefoxaddon .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxaddon-small.png');?>);padding-left:17px;}
            .firefoxmarketplace .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxmarketplace-small.png');?>);padding-left:16px;}
            .goodoldgames .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/goodoldgames-small.png');?>);padding-left:33px;}
            .googleplay .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/googleplay-small.png');?>);padding-left:18px;}
            .macappstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/macappstore-small.png');?>);padding-left:18px;}
            .operaaddons .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/operaaddons-small.png');?>);padding-left:16px;}
            .steam .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/steam-small.png');?>);padding-left:23px;}
            .windowsstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/windowsstore-small.png');?>);padding-left:16px;}
            .wordpress .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/wordpress-small.png');?>);padding-left:17px;}
            @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:240dpi){
                .amazonapps .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/amazonapps-small@2x.png');?>);}
                .appstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/appstore-small@2x.png');?>);}
                .chromewebstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/chromewebstore-small@2x.png');?>);}
                .firefoxaddon .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxaddon-small@2x.png');?>);}
                .firefoxmarketplace .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/firefoxmarketplace-small@2x.png');?>);}
                .goodoldgames .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/goodoldgames-small@2x.png');?>);}
                .googleplay .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/googleplay-small@2x.png');?>);}
                .macappstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/macappstore-small@2x.png');?>);}
                .operaaddons .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/operaaddons-small@2x.png');?>);}
                .steam .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/steam-small@2x.png');?>);}
                .windowsstore .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/windowsstore-small@2x.png');?>);}
                .wordpress .apptitle{background:<?php echo 'url(' . plugins_url('/wp-appbox/img/wordpress-small@2x.png');?>);}
            }
            .appdetails .apptitle{background-repeat:no-repeat;background-position:center left;background-size:auto 13px;}
            .wpappbox.simple{height:62px;}
            .wpappbox .appicon,.wpappbox.compact .appicon{height:60px;width:60px;padding:6px;}
            .wpappbox .appicon img,.wpappbox.compact .appicon img{height:48px;width:48px;max-width:48px;}
            .wpappbox .appdetails > div,.wpappbox.compact  .appdetails > div{padding:0 6px;}
            .wpappbox .appdetails,.wpappbox.compact .appdetails{font-size:15px;line-height:15px;padding-top:8px;}
            .wpappbox .apptitle,.wpappbox.compact .apptitle{font-size:17px;line-height:20px;font-weight:600;margin-top:0;margin-bottom:6px;}
}

純正写経で、div.wpappboxに該当する部分に、margin:3vh auto;を追加しました。そのほかにも、無駄に要素+クラス名になっていた部分を一斉置換や、画像のURLをplugins_url()で置き換えました。本当に便利な関数です。theme_url()も出ないかしら。そんな感じで、とりあえず当初の目的は果たせたので、暇を見て、絶対単位を相対単位に置き換える作業をしたいですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0