の まとめ

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

【WordPress】stinger3のSNSボタンをフラットな感じに変更する方法

             

      2015/01/15

ここではWordPressのテーマ「stinger3」のSNS用ボタンをフラットデザインなボタンに変更する方法を紹介します。

環境

  • WordPress3.9.1
  • stinger3ver20140327

概要

single.phpとstyle.css,smart.cssを修正し、ツイッター、Facebook、はてなブックマーク、google+のボタンを表示させます。

イメージ

デフォルト

20140730_sns1

デスクトップ

20140731_sns2

モバイル

2014-07-30_mobile

手順

1.WordPressにログイン→「外観」→「テーマ編集」→「単一記事の投稿(single.php)」をクリックします。

2.ソース中程の以下の次の一行を削除します。

 <?php get_template_part('sns');?>

3.削除した箇所に次の内容を追記します。

<div class="sns_button" style="padding:20px 0px">

<div class="twitter_button"><a href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Twitterでシェア</a></div>

<div class="fb_button"><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">Facebookでシェア</a></div>

<div class="hatena_button"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">はてなブックマーク</a></div>

<div class="googleplus_button"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;">Google+でシェア</a></div>

<div style="clear:both;"></div>

</div>

4.次にデスクトップ用CSSを編集します。「テーマ編集」→「スタイルシート(sytle.css)」をクリックします。ソース1/3あたり「タイトル下」のパートに次の内容を追記します。


.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;}

解説

私の場合、Stinger3の記事本文のwidthを600pxにカスタマイズしているので「sns_button a」のwidthを150pxにしています。

5.最後にスマートフォン用のCSSを編集します。「テーマ編集」→「スタイルシート(smart.css)」をクリックします。ソース1/3あたり「タイトル下」のパートに次の内容を追記します。

.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:140px;}

.sns_button div {display:block;}

.sns_button a:hover {text-decoration:underline;}

.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;}

解説

デスクトップ用CSSとの違いは「.sns_button a」のwidthです。140pxにすることで2行2列の表示になります。

まとめ

ここではWordPressのテーマ「stinger3」のSNS用ボタンをデフォルトからフラットデザインなボタンに変更する方法を紹介しました。

ツイート数などを読み込まないので動作を軽くしたい人はお試しください。

 - WordPress , , ,

336-280

  関連記事

【WordPress】コピペでOK!「WordPress Popular Post 」でカテゴリー別ランキングを表示する方法

「WordPress Popular Post」はデフォルトでもランキングを作成 …

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

Stinger5のSNSシェアボタンを変更して、フラットにしてシェア数を表示する …

tag
WordPressテーマStinger5でアイコンフォントを使ってシェアボタンを作成する方法【初心者向け】

SNSのシェアボタンに、もう一工夫欲しい!ということでアイコンフォントを使ってみ …

WordPressのパーマリンク設定を変更してSEOに失敗した実例と対策

素人が思いつきでSEO対策をすると失敗するよ、というお話です。 はじめに 本ブロ …

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

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