当ブログでも使っているWordPressテンプレートの「賢威」には
デフォルトでソーシャルボタンが付いています!

例えば、私のブログを見に来てくれた訪問者さんが、
「お!この記事面白いね…ツイッターでみんなに教えてあげちゃおう!」
「このブログ…すごいためになった!ぜひ、フェイスブックで紹介したい!」
なんて事があった時にソーシャルボタンがあるとポチッと拡散してくれると思います。

Twitter(ツイッター)やFacebook(フェイスブック)などの
SNSは自分のブログをアピールする場にもなっています。

スマホで簡単に投稿できる上に、
様々な人に見てもらう機会が増えるのでアクセスアップにも繋がりますよ!

しかし…賢威のソーシャルボタンには少々問題が…。
なんというか…その…大変申し上げにくいのですが…そう、地味…。

えぇ…地★味…なんです。

そんな地味でちょっと使いにくい賢威のソーシャルボタンを
無料ツールを使ってよりポチッとしやすいソーシャルボタンにしちゃいます!

賢威のソーシャルボタンを見てみよう

まずは、何もカスタマイズしていない、ありのままの賢威のソーシャルボタンを見てみましょう!

ありの~ままの~姿見せるのよ~♪

デフォルトの状態だとトップページの「最新情報」の下、
それから「記事ページ」の上下にソーシャルボタンがあります。

画像はトップページの「最新情報」下のソーシャルボタンです。

パソコン画面だと…なんだか不自然な隙間が出来ちゃってますし、
スマホ画面だとフェイスブックのいいねボタンが一段下がっちゃってます。

これを忍者ツールズの「忍者おまとめボタン」を使って、
程よく目立って、思わずポチッとしやすくなるようなボタンにカスタマイズしましょう!

思いのままにソーシャルボタンが作れる忍者ツールズを活用!

忍者ツールズは、コピペするだけで簡単にホームページやブログに
アクセス解析やメールフォームなどを設置できる無料ツールです。

忍者ツールズ → http://www.ninja.co.jp/

無料で使えてとても便利なので「忍者アクセス解析」などでお世話になった人は多いのではないでしょうか?
この忍者ツールズのひとつに「忍者おまとめボタン」というものがあります。

これはTwitterボタンやFacebookボタンなどを自分で組み合わせて
お好みのソーシャルボタンを簡単に作ることが出来るツールです。

ではこの「忍者おまとめボタン」を使ってソーシャルボタンを作ってみましょう!

忍者ツールズにログイン

「忍者おまとめボタン」を使うには忍者ツールズにユーザー登録する必要があります。

メールアドレスさえあれば、簡単に無料登録できるので
アカウントを持っていないという方は先にユーザー登録を済ませてくださいね!

忍者ツールズにログインすると管理ページが表示されます。

「新しいサービスを追加する」をクリックしましょう!下の方に「忍者おまとめボタン」があります。
「ツールを作成」を選択して実際にソーシャルボタンを作ってみましょう。

忍者おまとめボタンでソーシャルボタンを作る!

まずは、ソーシャルボタンを設置するWebサイトを選びましょう!今回はWordPressです。

 

すると、おすすめのスタイルセットが表示されます。

様々なデザインのソーシャルボタンがありますね… (*^^*)
気に入ったものがあればこの中から選んでもイイかもしれませんね!

ですが!私個人的にはちょっと微妙だったので「自分でカスタマイズして選ぶ」をクリックします。

そうするとカスタマイズ画面に移動します。ここで自分の好きなSNSとボタンデザインを選択します。
私は小さめのTwitterボタン、Facebookボタン、そしてはてなブックマークボタンの3つを選んでみました!

ちなみ「忍者おまとめボタン」が対応しているSNSボタンは9種類です!

  • Twitter
  • Facebook
  • LINE
  • Google+
  • YouTube
  • mixi
  • GREE
  • Pinterest
  • Tumblr

またSNS以外にもはてなブックマークのようなブックマーク、RSSにも対応していますよ!
ソーシャルボタンが完成したら右下の「プレビュー&コードを取得する」を選択しましょう。

位置表示やスマホ対応の有無を選択し、コードをコピー

ソーシャルボタンが完成したら、最後にソーシャルの表示位置やスマホ対応の設定をしましょう。

表示位置は、右寄せなのか左寄せなのか、ボタンを横並びにするのか縦並びにするのか、というヤツですね。
あなたのブログの状態に合わせて好きに選択してください。

私は賢威の元のデザインに合わせて「横並び、右寄せ」を選択しました。

次はスマホ対応です。個人的には「無効」にしていますね…。

これはスマホ画面でソーシャルボタンを設置したブログを見るとオーバーレイ表示になってしまうんです!

オーバーレイ表示というのは…、例えばスマホでブログやホームページを見ると
画面の下の方にずっと広告がついてきますよね?

たまに間違って押しちゃってムキー!ってなるあの広告のように
ずっと表示されることをオーバーレイ表示と言います。

賢威のスマホ画面の下にも「このページの先頭へ」というボタンがありますよね。

あれもオーバーレイ表示と同じです!なので、スマホ対応をONにしてしまうと
あんな感じで画面のどこかにずっとついて来るソーシャルボタンになってしまうのですね…。

設定によっては他のオーバーレイ表示と重なってしまうので
スマホ対応は「無効」にすることをおすすめします。

設定が終わったら「コードをコピーする」をクリックしましょう!

賢威のソーシャルボタンをツールで作ったボタンに変更してみよう!

では実際に「忍者おまとめボタン」で作ったソーシャルボタンをブログに組み込んでみましょう。
まずはトップページの「最新情報」の下のソーシャルボタンを変更します。

WordPressにログインして「外観 → テーマの編集 → index.php」を開きます。

<?php get_template_part('social-button'); ?>

 この一文があると思います。このコードが賢威のソーシャルボタンを表示しています。

まずはこのコードをコメントアウトして無効化しましょう。
コメントアウトは<!-- コメントアウトしたいコード -->で出来ますよ!

<!-- <?php get_template_part('social-button'); ?> -->

これで元々のソーシャルボタンが表示されなくなります。

 

ではこのコードのそばに、先ほど「忍者おまとめボタン」で
コピーしたコードをそのまま貼り付けましょう。ファイルを更新して、変更を保存します。

これで変更されました!早速見てみましょう!

じゃん!おお、ちゃんと切り替わってますよ!!大成功ですね!

 

記事ページのソーシャルボタンを変更する場合は?

記事ページ上下のソーシャルボタンを変更する場合は
「外観 → テーマの編集 → single.php」から変更できます。

さっきの「index.php」と同じく、<?php get_template_part('social-button'); ?>
コメントアウトし、「忍者おまとめボタン」のコードを同じように貼り付けてください。

デザインを変えて同じように記事ページ上下に貼り付けてみました!スマホ画面でもバッチリですね!

これでソーシャルボタンのカスタマイズは完了です。お疲れ様でした!

まとめ

賢威のソーシャルボタンも機能的には十分なのですが…。
やはりポチッと思わず押したくなるようなボタンのデザインにしたかったのでカスタマイズしました。

本当は「プラグイン使おう!」とか「自作もいいんじゃない!?」とか思ってました。
…が、思いのほか手間がかかる上にプラグインだと日本独自の「はてブ」などに対応してないんです…。

結局、前からお世話になっている忍者ツールズを頼りました…w

もし、今使っている「忍者おまとめボタン」のデザインを変えたい!という時は
新しく作ったりなんて面倒なことをしなくてもおまとめボタンの「編集」から簡単にカスタマイズできます。

コードの貼り直しなども必要ないので、とても便利ですよ!
忍者ツールズには他にも面白い機能がたくさんあるので、ぜひ活用してみてください!

忍者ツールズを使ってみる!

The following two tabs change content below.
うたと
2014年11月から本格的にアフィリエイトを開始、Lureaで基礎を学ぶ。 初月で○万突破!という感じではなく、地道に少しずつコツコツと稼げるようになったタイプ。現在の月収はほったらかしでも約12,000~16,000ほどのクソザコ。 さらなる飛躍を求めてこのブログを立ち上げます。