の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【WordPress】テーマ「Stinger5」のSNSシェアボタンをフラットにしてシェア数を表示する方法

             

      2015/01/29

Stinger5のSNSシェアボタンを変更して、フラットにしてシェア数を表示するようにしてみました。

対象のSNSは、Twitter、Facebook、はてなブックマーク、Google+です。

環境

  • WordPress 4.1
  • Stinger5ver20140902

手順概要

  1. プラグイン「SNS Count Cache」をインストールする。
  2. CSSを変更する。
  3. sns.phpを修正する。
  4. sns_top.phpを修正する。

1.プラグインのインストール

ツイート数をカウントしてくれるプラグイン「SNS Count Cache」をインストールします。

WordPressにログインし「プラグイン」→「新規追加」→プラグインの検索に「SNS Count Cache」と入力しエンター。

SNS Count Cacheをインストールして有効化します。

20150104_snscountcache

 

2.CSSを修正する

WordPressにログインし「外観」→「エディター」をクリックします。

20141218_wp1

スタイルカテゴリーの「スタイルシート(style.css)」をクリックします。

20141218_wp2

ソース中盤から少し下にあるSNSの領域を修正します。

既存のソースは、削除かコメントアウトし、次の内容を記述します。「ファイルを更新」をクリックして作業完了です。

.sns_button a{display: block; color: #fff; text-decoration: none;font-weight: bold;text-align: center; margin:0; padding: 0; font-size: 12px; height: 45px;line-height: 45px; width:130px;}
.sns_button a:hover {text-decoration:underline;}
.sns_button div {display:block;}
.sns_button .twitter_button{background: #00aced; float:left;}
.sns_button .fb_button {background: #3B5998; float:left;}
.sns_button .hatena_button{background: #568BCA; float:left;}
.sns_button .googleplus_button{background: #db4a39; float:left;}

3.sns.phpの修正

次にsns.phpをクリックします。

すべてのソースを削除し、次の内容に書き換えて「ファイルを更新」をクリックします。

<div class="sns_button" style="padding:0 0 10px 0">
<div class="twitter_button"><a href="http://twitter.com/intent/tweet?text=<?php bloginfo( 'name' ); ?>&url=<?php home_url(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Twitterでシェア <?php if(function_exists('get_scc_twitter')) echo (get_scc_twitter()==0)?'':get_scc_twitter(); ?></a></div>
<div class="fb_button"><a href="http://www.facebook.com/sharer.php?u=<?php home_url(); ?>&amp;t=<?php bloginfo( 'name' ); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Facebookでシェア<?php if(function_exists('get_scc_facebook')) echo (get_scc_facebook()==0)?'':get_scc_facebook(); ?></a></div>
<div class="hatena_button"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php home_url(); ?>&title=<?php bloginfo( 'name' ); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">はてなブックマーク <?php if(function_exists('get_scc_hatebu')) echo (get_scc_hatebu()==0)?'':get_scc_hatebu(); ?></a></div>
<div class="googleplus_button"><a href="https://plus.google.com/share?url=<?php home_url(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;">Google+でシェア <?php if(function_exists('get_scc_gplus')) echo (get_scc_gplus()==0)?'':get_scc_gplus(); ?></a></div>
<div style="clear:both;"></div>
</div>

4.sns_top.phpの修正

次にsns.phpをクリックします。

すべてのソースを削除し、sns.phpと同じ内容に書き換えて「ファイルを更新」をクリックします。これで作業完了です。

 

まとめ

ここではWordPressテーマ「Stinger5」のSNSシェアボタンをフラットなデザインにしてシェア数を表示する方法を紹介しました。

Stinger5はレスポンシブデザインです。PCで見た場合、幅が広ければ、SNSシェアボタンが横一列に並びますが、狭い場合は2列になります。

スマホの場合は、2列表示です。

Stinger5のSNSボタンをカスタマイズしたい人はぜひ。

 - WordPress , , ,

336-280

  関連記事

【WordPress】テーマ「Stinger5」のタイトルにカテゴリー名を入れる方法

サイト名を「まとめと比較」を「の まとめ」に変更しました。 カテゴリーの特色が強 …

サーチフォーム
WordPressテーマStinger5の検索欄にテキストを表示しておく方法

HTML5で導入されたplaceholder属性によって、フォームのテキスト入力 …

ベスト20
【WP】プラグイン「WordPress Popular Posts」で、カテゴリーの人気記事を表示する方法

WordPressの定番プラグイン「WordPress Popular Post …

【WordPress】テーマをStinger5にしました

右メニューの2カラム構成が好きなので、Stinger3を使ってきました。 その進 …

【WordPress】テーマ「stinger3」の関連記事表示件数を変更する方法

WordPressのテーマ「stinger3」では、記事の最後に関連記事を10件 …