賢威7でバイラルメディア風のソーシャルボタンを設置する方法!

スクリーンショット 2016-02-09 21.58.37

 

今回紹介するのは賢威7でソーシャルボタンを『バイラルメディア風』のおしゃれなボタンにする方法です。

やり方は非常に簡単なので是非サイトカスタマイズをしてみてください!

⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト
 

賢威7×バイラルメディアSNSボタン

ところでバイラルメディア風SNSボタンってなに?

ということで、デフォルトのソーシャルボタンは以下のような感じです。

スクリーンショット 2016-02-09 18.27.27

 

ごく一般的なソーシャルボタンですよね。

そして今回ご紹介するのがコチラのバイラルメディア風のソーシャルボタンです。

 

スクリーンショット 2016-02-09 18.29.46

 

かなりおしゃれで、サイトの見た目のモダンな感じ?になると思います。

それでは設定方法を解説していきます。

 

『social-button2.php』と『base.css』にコードを追記していきます。

social-button2.phpに関しては全部書き換えるので、元に戻したい時のためにバックアップをとっておいてくださいね。

 

まずはsocial-button2.phpの中身をすべて書き換えます、既存のコードはすべて削除し、以下のコードを貼付けてください。

 

 

□social-button2.php書き込みコード

<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 = ‘【Twitterのアカウント名】’; // 例: $twitter_account = ‘webcraftlog’;
?>
<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;”><i class=”fa fa-twitter”></i><span class=”pc”>Twitter</span></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;”><i class=”fa fa-facebook”></i><span class=”pc”>Facebook</span><span class=”share-count”><?php if(function_exists(‘get_scc_facebook’)) { echo scc_get_share_facebook();}?></span></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;”><i class=”fa fa-google-plus”></i><span class=”pc”>Google+</span><span class=”share-count”><?php if(function_exists(‘get_scc_gplus’)) { echo scc_get_share_gplus();}?></span></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;”><span class=”hatena-icon”>B!</span><span class=”pc”>はてブ</span><span class=”share-count”><?php if(function_exists(‘get_scc_hatebu’)) { echo scc_get_share_hatebu();}?></span></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;”><i class=”fa fa-get-pocket”></i><span class=”pc”>Pocket</span><span class=”share-count”><?php if(function_exists(‘scc_get_share_pocket’)) echo scc_get_share_pocket(); ?></span></a>
</li>
<?php if ( wp_is_mobile() ) : ?>
<li class=”line sp”>
<a href=”http://line.me/R/msg/text/?<?php echo $Title; ?> <?php echo $URLEncodedPermalink; ?> target=”_blank” class=”line-button”>LINE</a>
</li>
<?php endif; ?>
</ul>
</div>

 

※【Twitterのアカウント名】はご自身のTwitterアカウントを入れてください。入れなければ設定できないということはないのでご安心ください。

 

次にbase.cssに以下のコードを追記していきます。

追記場所は一番下がいいでしょう。

スクリーンショット 2016-02-08 11.25.13

 

□base.css追記コード

 

/* —————————————————-
SNSボタン
—————————————————–*/
.sns-wrap {
width:100%;
margin-top: 1em;
}
.sns {
margin: 0 auto;
list-style: none;
}
.sns a {
text-decoration: none;
font-size: 10px;
}
.sns {
text-align: center;
}
.sns li {
float: left;
width: 19%;
margin: 0 1% 3% 0;
}
.sns a {
position: relative;
display: block;
padding: 10px;
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 .line a {
background: #78C315;
box-shadow: 0 5px 0 #359A34;
}
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
@media only screen and ( max-width: 736px ) {
.sns li {
width: 30%;
margin: 0 3% 4% 0;
}
.sns a {
padding: 6px;
}

}

 

これだけで簡単にバイラルメディア風のソーシャルボタンを設置できます。

この設定をする前に、賢威のソーシャルボタンを表示設定にしておいてくださいね。やり方は以下を参照してください。

関連記事:賢威7のソーシャル(SNS)ボタン設置方法を解説!

 

PC表示ではLINEを非表示設定になっています。(スマホはLINEあり)

wpxクラウドサーバーをお使いの方は反映が遅くなるので、すぐには設定できません。

(コード記述後、10分〜20分後に反映されることもあります)

賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ