賢威7カスタマイズ

スマホメニュー背景色

rwd.css

【前】

.global-nav-panel{
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
background:rgba(0,0,0,.9);
color: #fff;
cursor: pointer;

【後】

.global-nav-panel{
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
background:rgba(0,0,0,.9);
color: #fff;
cursor: pointer;
background:#008000;

スマホメニュープルダウンの背景色

rwd.css

【前】

.global-nav ul{
display: none;
position: absolute;
top: 50px;
left: 10px;
z-index: 50;
width: 80%;
border: 0;

【後】

.global-nav ul{
display: none;
position: absolute;
top: 50px;
left: 10px;
z-index: 50;
width: 80%;
border: 0;
background:#008000;

見出し

base.css

【前】

.main-body h3 {
position: relative;
padding: 0.6em;
color: white;
background: #008000;
}
.main-body h3:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #008000;
width: 0;
height: 0;
}

【後】

.main-body h3 {
background: #228B22; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
font-weight: bold;
border-radius: 0.5em;/*角の丸み*/
}

SNSボタン

social-button2.php

【前】

<aside class=”sns-list”>
<ul>
<li class=”sb-tweet”>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”ja”><?php _e(‘Tweet’, ‘keni’); ?></a>
</li>
<li class=”sb-hatebu”>
<a href=”http://b.hatena.ne.jp/entry/” class=”hatena-bookmark-button” data-hatena-bookmark-layout=”simple-balloon” title=”<?php _e(‘Add this entry to Hatena Bookmark.’, ‘keni’); ?>”><img src=”https://b.st-hatena.com/images/entry-button/button-only@2x.png” alt=”<?php _e(‘Add this entry to Hatena Bookmark.’, ‘keni’); ?>” width=”20″ height=”20″ style=”border: none;” /></a>
</li>
<li class=”sb-fb-like”>
<div class=”fb-like” data-width=”110″ data-layout=”button_count” data-action=”like” data-show-faces=”false” data-share=”false”></div>
</li>
<li class=”sb-gplus”>
<div class=”g-plusone” data-size=”medium”></div></li>
</ul>
</aside>

【後】

<div class=”sns-wrap”>
<?php
if( function_exists( “enqueue_font_awesome”) ):
add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
function enqueue_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );
}
endif;
$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() );
$twitter_account = ‘yuukivp’;
?>
<ul class=”sns clearfix”>
<li class=”twitter”>
<a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ‘ | ‘ ); echo urlencode( get_bloginfo(‘name’)); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related=”<?php echo $twitter_account; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”>ツイート</a>
</li>
<li class=”facebook”>
<a href=”http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”>シェア<?php if(function_exists(‘get_scc_facebook’)) { echo scc_get_share_facebook();}?></a>
</li>
<li class=”googleplus”>
<a href=”https://plus.google.com/share?url=<?php echo $url_encode;?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”>Google+<?php if(function_exists(‘get_scc_gplus’)) { echo scc_get_share_gplus();}?></a>
</li>
<li class=”hatebu”>
<a href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”>B!はてブ<?php if(function_exists(‘get_scc_hatebu’)) { echo scc_get_share_hatebu();}?></a>
</li>
<li class=”pocket”>
<a class=”no-deco” target=”_blank” href=”http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”>Pocket<?php if(function_exists(‘scc_get_share_pocket’)) echo scc_get_share_pocket(); ?></a>
</li>
<li class=”feedly”>
<a href=”http://feedly.com/i/subscription/feed/<?php bloginfo(‘rss2_url’); ?>” rel=”nofollow” target=”_blank”>feedly <?php if(function_exists(‘scc_get_follow_feedly’)) echo (scc_get_follow_feedly()==0)?”:scc_get_follow_feedly(); ?></a>
</li>
</ul>
</div>

【後②】CSSに以下追加

/* —————————————————-
SNSボタン
—————————————————–*/
.sns-wrap {
width: 100%;
margin-top: 1em;
margin-bottom: 1%;
}

.sns {
margin: 0 auto;
list-style: none;
}

.sns a {
text-decoration: none;
font-size: 15px;
}

.sns {
text-align: center;
}

.sns li {
float: left;
width: 32.3%;
margin: 0 .5% 2%;
}

.sns a {
position: relative;
display: block;
padding: 10px 5px;
color: #fff;
border-radius: 5px;
text-align: center;
}

.sns span,
.sns .fa {
margin-right: .4em;
color: #fff;
}

.sns li a:hover {
-webkit-transform: translate3d(0px,5px,1px);
-moz-transform: translate3d(0px,5px,1px);
transform: translate3d(0px,5px,1px);
box-shadow: none;
}

.sns .twitter a {
background: #55acee;
box-shadow: 0 5px 0 #0092ca;
}

.sns .facebook a {
background: #315096;
box-shadow: 0 5px 0 #2c4373;
}

.sns .googleplus a {
background: #dd4b39;
box-shadow: 0 5px 0 #ad3a2d;
}

.sns .hatebu a {
background: #008fde;
box-shadow: 0 5px 0 #016DA9;
}

.sns .pocket a {
background: #f03e51;
box-shadow: 0 5px 0 #c0392b;
}

.sns .feedly a {
background: #87c040;
box-shadow: 0 5px 0 #74a436;
}

@media only screen and ( max-width: 736px ) {
.sns li {
width: 32.3%;
margin: 0 .5% 4%;
}

.sns a {
font-size: 13px;
padding: 6px 3px;
}
}

⇒賢威7のソーシャルボタンをオシャレにカスタマイズする方法