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

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

```css
.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()も出ないかしら。そんな感じで、とりあえず当初の目的は果たせたので、暇を見て、絶対単位を相対単位に置き換える作業をしたいですね。