三十路!

おいさんが調べたことメモってるブログ。

1_2_1

Digipress MAGJAM 専用!? フラットデザインのソーシャルボタンと記事内の横幅を変える方法。

Digipress MAGJAM 専用!? フラットデザインのソーシャルボタンと記事内の横幅を変える方法。

Digipress MAGJAM がリリースされて、はや 2年? ぐらい経過。2年も経過すればデザインの流行り廃りは大きく変わるわけでね。なるべく今風に合うように CSS で頑張る!

Digipress のテーマ

機能追加 & 修正はよくくるけど、デザインの変更はしないんだよね。新しいテーマ買えってことなんだろうけど、最近リリースしたテーマはどれもこれも、やたらと凝ってて食指がさっぱりうごかない。

Fancie NOTE がちょっといいな。と思ったけど買おうっていうまでには(ry

全体的に商用利用目的のテーマが多いよね。お店とかとかとかのね。ブロガー向けにシンプルのも一つ出してほしいものですが、あまり需要ないんだろうな。作らないってことは。

記事の横幅

アクセス解析からもわかるように、ぶっちゃけ PC のモニターの解像度はフル HD がほとんどだよね。2年前まではもうちょっとね。低い解像度の人も多かったと思うけど。時代だね。ってことでフル HD の環境でみたら記事の横幅が小さいなって前々から思ってたのでさくっと修正。

@media only screen and (min-width: 1300px) {
/*テーマサイズ変更*/
.header_content, #global_menu_nav, .header-banner-outer .header-banner-inner, .header-banner-content, #headline-sec, #headline-sec.full #headline-sec-inner, .dp-container, .content_footer, #ft-btm-content, #ft-widget-content {
 width: 1300px;
}
.content {
 width: 900px;
} 
}

1300px 以上のサイズの場合は、横幅を 900 px にする。

デモサイトと当サイトを比較してもらったら、わかりやすいかと。

ソーシャルボタン

これを

こうした。

スマホはこんな感じ。ボタンの数多すぎる気がしないでもないけど表示して困るものでもないからね。

Fancie NOTE のボタンデザイン MAGJAM にももってきて欲しい。ボタンのデザインは全テーマ共通は無理なのかねぇ? 無理か。

事前準備

とりあえず、テーマのボタン表示をのチェックマークを外す。

テーマオプション詳細設定テキスト・・・ にチェックマークをつける。テーマの関数を利用して作ればよかったんだろうけど探すのがめんどくさかったのでウィジェットに追加。参考にしたのはこのサイト。

ソーシャルボタンを自作してWordPressの高速化

タイトル通りなんですが、これでソーシャルボタン(SNSボタン)の設置はプラグイン「WP Social Bookmarking Light」で設置していたのですが、これをやめて自作する事にしました。今回

カウントは使用コロコロ変えてめんどくさそうだからスルー。Twitter のカウントが廃止されたときはイラってしたけど、実際廃止されてしばらくすると・・・

どうでもよくなった!!

ってことでシェア数は表示しません。DP 専用のテキストウィジェットに以下を記載。



DP 専用テキストウィジェット

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
 
<div class="share">
 <ul>
 
<!--Facebookボタン-->
<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=300,width=600');return false;" class="btn btn-blue ft20px">
 <span class="icon-facebook"></span> facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
 
<!--ツイートボタン-->
<li class="tweet"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" class="btn btn-lightblue ft20px">
 <span class="icon-twitter"></span> tweet <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
 
<!--Google+ボタン-->
<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=500');return false;" class="btn btn-red ft20px">
 <span class="icon-gplus-squared"></span> Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>
 
<!--はてなボタン--> 
<li class="hatena"><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;" class="btn ft20px"><span class="icon-hatebu"></span> はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
 
<!--LINEボタン--> 
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" class="btn btn-primary ft20px"><span class="icon-space-invaders"></span> LINE</a>
</li> 
 
<!--ポケットボタン--> 
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" class="btn btn-pink ft20px"><span class="icon-pocket"></span> Pocket <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>
 
<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" class="btn btn-orange ft20px"><span class="icon-rss"></span> RSS</a></li>
 
<!--feedlyボタン-->
<li class="feedly">
<a href="https://feedly.com/i/subscription/feed/https://mi-so-ji.com/feed/" target="blank" class="btn btn-green ft20px"><span class="icon-feedly"></span> feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li> 
</ul>
</div>

これで試しに表示するとリスト形式で表示されるはず。

CSS

CSS で横並びにするのとスマホ対応をちょこちょこっと書く。

.share a {
 color: #fff!important;
}
.share ul li:before {
 content:none!important;
 width:0!important;
 height:0!important;
 margin-right:0!important;
}
.share ul {
 margin-left: 0px!important;
}
/* SNSボタン */
.share ul {
 margin : 0;
 padding : 0;
 list-style : none;
}
.share li a {
 display : block;
 padding : 10px;
 text-decoration : none;
 text-align : center;
}
.share li {
 float : left;
 width : 25%;
 margin : 0;
 margin-top: -30px;
 margin-bottom: 20px;
}
@media screen and (max-width:599px){
.share li {
 float : left;
 width : 50%;
 margin-top: -30px;
 margin-bottom: 20px;
}

これで綺麗に表示されるはず。

まとめ

CSS で頑張ればまだまだ現役。(いつまでもいける!)はず。テーマの更新が止まるまでは戦えるはず。

コメント歓迎やで! (匿名可)
私はロボットありませんの左側にあるチェックマークを入れてから SEND 押してな!(スパム対策)

*

Return Top