の まとめ

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

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

      2015/03/14

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

ここではStinger5でアイコンフォントを使う方法を初心者向けに説明します。

Stinger5でFont Awesomeを利用する

Stinger5は、デフォルトで「Font Awesome」というアイコンフォントが使えるようになっています。(CDNへのパスが記述済み)

今回は、この「Font Awesome」を利用して、シェアボタンを作ります。

前提

手順

1.Font Awesome Iconsにアクセスします。

icon-font

2.Search iconsに「twitter」と入力すると候補が2つ出ます。

icon-font2

3.今回は普通の「twitter」を使います。この「twitter」をクリックします。

icon-font2

4.Twitterのアイコンフォントのタグが出てくるので、以下の内容をコピーします。

tag

<i class="fa fa-twitter"></i>

 

5.WordPressにログインし「外観」→「テーマの編集」→「sns.php」をクリックします。

6.ソースの「Twitterでシェア」という文字列を、4.でコピーした内容に書き換えます。

書き換え前

<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="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;"><i class="fa fa-twitter"></i> <?php if(function_exists('get_scc_twitter')) echo (get_scc_twitter()==0)?'':get_scc_twitter(); ?></a></div>

 

7.これでアイコンフォントを使ったシェアボタンの出来上がりです。他にもアイコンフォントがあるので、気になるアイコンは、上記のサイトで検索してみてください。

コピペでOK!カスタマイズ

さらにカスタマイズします。facebookとGoogle+もアイコンフォントにし、全体の幅をAdSenseと同じ336pxにします。

手順

1.sns.phpとsns_top.phpを次の内容に書き換えます。

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

<div class="twitter_button"><a href="http://twitter.com/intent/tweet?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;"><i class="fa fa-twitter"></i> <?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 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;"><i class="fa fa-facebook"></i> <?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 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;">はてブ <?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 the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;"><i class="fa fa-google-plus"></i> <?php if(function_exists('get_scc_gplus')) echo (get_scc_gplus()==0)?'':get_scc_gplus(); ?></a></div>

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

</div>

次に「スタイルシート(style.css)」を変更します。ソースのSNS配下を次の内容に書き換えます。

/*--------------------------------
SNS
---------------------------------*/
.sns_button a{
 display: block;
 color: #fff;
 text-decoration:none;
 font-weight: bold;
 text-align: center;
 margin:0;
 padding: 0;
 font-size: 16px;
 line-height: 32px;
 width:84px;
}
.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;}

まとめ

Stinger5でアイコンフォントを使ってみたい人は、ぜひ。

 - WordPress , ,

336-280

  関連記事

【WordPress】テーマ「Stinger5」の広告の位置を変更してみました

WordPressのテーマ「Stinger5」の広告の位置を変更してみました。 …

リンクの例
【WordPress】アイキャッチ付きサイト内記事へのリンクを作成する方法

アイキャッチ付きのサイト内記事リンクを作るプラグインを紹介します。 functi …

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

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

【WordPress】サイトマップ作成のプラグイン「Google XML Sitemaps」の使い方

WordPressで構築したサイトの「サイトマップ」を簡単に作成して、Googl …

【WordPress】テーマ「Stinger3」の記事内広告をダブルレクタングルにする方法

WordPressのテーマ「Stinger3」における本文中の広告を2つ並べて表 …