0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?