フラットデザインのSNSボタンが増えています。
流行りはすぐ取込みたいので“賢威”のSNSボタンをフラットデザインに変えてみました。
賢威7のディフォルトのSNSボタンは現状はこれです。
ボタンが小さく目立たないのと、表示が遅いのでカスタマイズしている賢威ユーザーが多いので、カスタマイズの情報はたくさんあります。その中からできるだけ簡単にカスタマイズする方法を採ってみました。
CSSで作ったフラットデザインボタンを「flex-block」で配置する
SNSボタンはCSSで作れるので、たくさんのコードが紹介されています。
その中からFOXISMさんのを使わせていただくことにしました。
手順はすごく簡単です。
- 賢威の子テーマ スタイルシートにSNSボタンのCSSを加える
- social-button2.phpを書き換える
以上なんですが、スタイルシートは参考サイトの記述に追加したプロパティがあります。また、social-button2.phpの書き換えは、結城おさむのブログさんを参考にしながら賢威7.1のコードをベースに書き換えます。
使うボタンのデザインはこれです。
CSSによるボタンですが、横配列を「flex-block」で行うパターンです。flex-blockに関するプロパティについてもメモとして残しておきたいと思います。
スタイルシートに加えるCSSコード
SNSボタンのCSSのポイントは二つです。
- モバイル対応も考慮した配置方法
- シンプルなボタンデザイン
CSS3では「flex-block」を使ってボタンを配置できます。
まず、CSSコードを表示します。
/* ----------------------------------------------------
SNSボタン
-----------------------------------------------------*/
.sns{
display:-webkit-flex;
display:flex;
flex-wrap: wrap;
margin:0 0 1em 0;
}
.sns div{
flex-grow: 1;
width: 100px;
}
.sns a{
display:block;
margin:0 0.4em 0 0;
padding:0.8em;
line-height:1;
color:#fff;
font-family:'Fjalla One';
background:#595959;
border-left:8px solid #444;
transition:0.3s;
}
.sns a:hover{
color:#fff;
background:#333;
box-shadow:0 1px 0 #707070 inset;
}
.sns .facebook{border-color:#365899;}
.sns .twitter{border-color:#1b95e0;}
.sns .pocket{border-color:#EF4056;}
.sns .hatebu{border-color:#008fde;}
.sns .googleplus{border-color:#DB4437;}
.sns .feedly{border-color:#74a436;}
.sns .line{border-color:#25af00;}
参考サイトに掲載されているコードとの違いを説明します。
- セレクターの名前を「sns」に
- 「flex-wrap: wrap;」によりボタンをページ幅いっぱいに配置
- 「flex-grow: 1;」により各ブロックの巾を均等に
- 「width: 100px;」の指定により最大ブロック巾を固定
- LINEで送る用の「line」の色指定
.sns{
display:-webkit-flex;
display:flex;
flex-wrap: wrap;
margin:0 0 1em 0;
}
.sns div{
flex-grow: 1;
width: 100px;
}
「flex-wrap: wrap;」「flex-grow: 1;」「width: 100px;」を指定することで、ブラウザの違いによるデザイン崩れを防ぐことができます。
まあ、もっともバージョンの古いブラウザではどうしても崩れることが多いのですが、新しいブラウザによる表示は大丈夫そうです。
スマホだとこんな感じになります。
SNSのシェアボタンが働くようにPHPを書き換える
賢威7のSNSボタンに関係するファイルは３つあります。
- functions.php（賢威7.0の場合）
- social-button.php
- social-button2.php
このうちカスタマイズするファイルは「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;"><i class="fa fa-twitter"></i><span class="pc">ツイート</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">シェア</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>
<li class="feedly">
<a href="http://feedly.com/i/subscription/feed/<?php bloginfo('rss2_url'); ?>" rel="nofollow" target="_blank"><i class="fa fa-rss"></i>feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
</li>
</ul>
</div>
上のコードを変更するポイントが以下の通りです。
- <div class=”sns-wrap”>を<div class=”sns”>に変更
CSSのセレクター名に合せる - リストタグを削除して各SNSボタンを<div>～</div>でくくる
- aタグに「class=”子セレクター名”」を加えてSNSボタンのボーダー色を反映させる
- feedlyのタグを削除してLINEで送る用のタグを追加
- アンカーテキストを英語表記に統一
- モバイルで見た時のボタンのボーダー色のバランスを考えて掲載順序を変更
そうして出来上がったコードが以下です。
<div class="sns">
<?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';
?>
<div><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;" class="twitter"><i class="fa fa-twitter"></i><span class="pc">Twitter</span></a></div>
<div><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;" class="facebook"><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></div>
<div><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;" class="hatebu">Hatebu<span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a></div>
<div><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;" class="googleplus"><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></div>
<div><a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" class="line" >LINE</a></div>
<div><a 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;" class="pocket"><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></div>
</div>
Twitterのアカウント名はコメントアウトしています。
もし表示させる場合はコメントアウトを削除してください。
以上、賢威のSNSボタンをフラットデザインにして「flex-block」で配置させる方法でした。