【WordPress-mesocolumn】スクロールしてもついてくるソーシャルボタンを設置してみました

WordPress関連

PC限定ですが、スクロールしてもついてくるソーシャルボタンを設定してみました。 設置方法はママハックさんを参考にさせてもらいました。

[blogcard url="http://mama-hack.com/scroll-snsbox"]

ママハックさんはStinger3のテーマを使ってるようですが、ぼくが使っているmesocolumnでは、そのまま使うとうまく表示できなかったので若干カスタマイズしています。しかし、カスタマイズすればするほど、テーマの乗り換えのハードルが上がっていきますね。

PHP,HTMLの挿入

単一記事の投稿 (single.php)の直後に下記コードを挿入します。 ママハックさんとの違いはbrandというclassを足しているところです。

<?php
 $url_encode=urlencode(get_permalink());
 $title_encode=urlencode(get_the_title());
?>

<div id="share2">
<ul class="clearfix">
<li class="twitter">
<div class="balloon">
<a href="https://twitter.com/search?q=<?php the_permalink(); ?>%2F" target="_blank"><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></a>
</div>
<div class="brand"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=sashiharatakuya&tw_p=tweetbutton"><span>Tweet</span></a></div></li>
<li class="facebook">
<div class="balloon"><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></div>
<div class="brand"><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=300,width=600');return false;"><span>Facebook</span></a></div></li>
<li class="hatebu">
<div class="balloon"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" target="_blank"><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></a></div>
<div class="brand"><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=400,width=510');return false;" ><span>はてブ</span></a></div></li>
<li class="googlePlus">
<div class="balloon"><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></div>
<div class="brand"><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=500');return false;"><span>Google+</span></a></div></li>
<li class="pocket">
<div class="balloon"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></div>
<div class="brand"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span>Pocket</span></a></div></li>
<li class="feedly">
<div class="balloon feedly_count"><?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?></div>
<div class="brand"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fhttp://sashihara.jp/%2Ffeed%2F" target="blank"><span><span>Feedly</span></a></div></li>
</ul>
</div>

次にテーマオプションのカスタムCSSに下記を追加します。 色とか位置とか微妙に調整しています。


/* ついてくるシェアボタン */
#share2 {
 color: #000;
 background:#fff; /*ボックス全体の背景色*/
 width:90px; /*ボックス全体の横幅*/
 padding:5px;
 margin-left:-145px; /*横の位置調整*/
 text-align:center;
 position:fixed;
 bottom:20px; /*下の位置調整*/
 list-style-type:none;
 border-radius: 5px;
}
#share2 ul {
 list-style: none;
 padding-top: 10px;
 padding-bottom: 10px;
 margin-left: 10px;
}
#share2 ul li {
 float: left;
 width: 80%;
 margin-bottom: 15%;
}
#share2 ul li a {
 overflow: hidden;
 position: relative;
 display: block;
 width: 95%;
 margin: 0 auto;
 padding: 0.9em 0.5em; /*ボタンの余白で大きさを調整*/
 color: #fff;
 font-size: 60%;
 text-align: center;
 text-shadow: none;
 text-decoration: none;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

#share2 ul li a:hover {
 top: 2px;
}
#share2 ul li a:active {
 top: 3px;
 box-shadow: none;
}
#share2 ul li a i {
 margin-right: 0.25em;
 color: rgba(0,0,0,0.3);
 font-size: 1.5em;
 vertical-align: middle;
}
/* ブランドカラー */
#share2 ul li.twitter .brand a {
 background: #55acee;
 box-shadow: 0 3px 0 #468EC5;
}
#share2 ul li.facebook .brand a {
 background: #315096;
 box-shadow: 0 3px 0 #1F3669;
}
#share2 ul li.hatebu .brand a {
 background: #008fde;
 box-shadow: 0 3px 0 #0270AC;
}
#share2 ul li.googlePlus .brand a {
 background: #dd4b39;
 box-shadow: 0 3px 0 #B94031;
}
#share2 ul li.pocket .brand a {
 background: #ee4056;
 box-shadow: 0 3px 0 #C53648;
}
#share2 ul li.feedly .brand a {
 background: #6cc655;
 box-shadow: 0 3px 0 #5CA449;
}
/* ブランドカラーマウスオーバー */
#share2 ul li.twitter a:hover {
 box-shadow: 0 1px 0 #468EC5;
}
#share2 ul li.facebook a:hover {
 box-shadow: 0 1px 0 #315096;
}
#share2 ul li.hatebu a:hover {
 box-shadow: 0 1px 0 #008fde;
}
#share2 ul li.googlePlus a:hover {
 box-shadow: 0 1px 0 #dd4b39;
}
#share2 ul li.pocket a:hover {
 box-shadow: 0 1px 0 #ee4056;
}
#share2 ul li.feedly a:hover {
 box-shadow: 0 1px 0 #6cc655;
}
/* ブランドカラーアクティブ */
#share2 ul li.twitter a:active {
 background: #468EC5;
}
#share2 ul li.facebook a:active {
 background: #1F3669;
}
#share2 ul li.hatebu a:active {
 background: #0270AC;
}
#share2 ul li.googlePlus a:active {
 background: #B94031;
}
#share2 ul li.pocket a:active {
 background: #C53648;
}
#share2 ul li.feedly a:active {
 background: #5CA449;
}
#share2 ul li.line {
 display: none;
}
#share2 ul li.line a {
 background: #00c300;
}
/* シェア数吹き出し */
#share2 ul li .balloon {
 position: relative;
 margin: 0 auto 0.5em;
 padding: 0.2em 0.25em; /*吹き出しの余白*/
 width: 95%;
 /*color: #aaa;*/
 text-align: center;
 border: 1px solid #ddd;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
#share2 ul li .balloon:before,
#share2 ul li .balloon:after {
 content: "";
 position: absolute;
 left: 50%;
 display: block;
 width: 0;
 height: 0;
 margin-left: -7px;
 border: 7px solid transparent;
}
#share2 ul li .balloon:before {
 bottom: -14px;
 border-top-color: #ddd;
}
#share2 ul li .balloon:after {
 bottom: -12px;
 border-top-color: #fff;
}
#share2 ul li .balloon a {
 color: #000000;
 display: block;
 font-size: 100%;
 padding-left: 0;
}

一気にメディア感が増した

これを入れるとグッとメディア感が増しますね。 他にもママハックさんからは強調文字を蛍光ペン風にする方法も使わせていただいています。

[blogcard url="http://mama-hack.com/css-keikoupen"]

これ、すごく要点がまとまっているように見えるので便利で多用しています。

いろんなブログの良いところを吸収しながら成長している

ママハックさんが醸しだすメディア感は一体なんなんだろうといろいろ研究させていただいています。他にも三十路男の悪あがきさんの圧倒的な読みやすさは何が違うんだろうとか、やっぱり人気のあるブログにはそれだけの理由があって、内容はもちろんいろいろと参考になるところがあります。

三十路男の悪あがきさんからはh2タグとh3タグの使い方、フォントサイズ、カラー、段落の区切りなどを参考にさせていただいています。

[blogcard url="http://30sman.com/"]

関連：すごいブログを発見！ 『三十路男の悪あがき』圧倒的な読みやすさ。何がちがうのか思わず分析してみた。

他にも引用部分のCSSはネタフルさんからインスピレーションを得ていたり、ブログカードやAmazonJSも他のブログみていていいなと思って調べたところから導入しました。 [blogcard url="http://netafull.net/"]

すごいブログを見つけるとテンションが上がるし、なにがすごいのか研究して自分のブログをより良くしていく、その過程もブログの楽しみの1つです。