menu

たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法とは・・

ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿したり、少しでもPV増加のためにソーシャルメディアから流入を期待しても、なかなか増えないですよね。私もそのうちの一人で、全然SNSからの流入がなかったんですよね。

実は、今回、SNSからPV増加を狙ってSNSボタンをカスタムをしたつもりはなかったのですが、たまたまカスタムした次の日から、SNSからの流入が増えたので、カスタマイズしたことによる影響が少なからず出たのかなと思いましたので、どのようにカスタマイズしたのか紹介したいと思います。

最後には、実際にどのぐらいSNSからPVが増えたかお知らせしますので、ご覧いただけたらと思います。

SNSボタンのカスタマイズ前と後

SNSボタンのカスタマイズ前と後について変化を載せています。左:編集後 右:編集前

ページの内容を削除して上部と下部を比較したのですが、編集後はボタンを主張した中でも、ストレスを与えないような印象になっていると思います。ボタンもマウスを持っていくと凹んで、思わず押してしまいそうになるように設定して、スマホ版でも、体裁が崩れないように配慮した作りにしました。

参考にした記事

今回のSNSボタンを作成するに当たり、参考にさせていただいた記事です。主婦ライフさんありがとうございました。
【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

SNSボタンのカスタマイズ

Mr.K
それでは、wordpressのSNSボタンのカスタマイズについて、子テーマを用いて説明していきたいと思います。
A さん
子テーマって何ですか?
Mr.K
テーマって、そのままカスタマイズして、アップデートすると、すべて書き換えられてしまうので、子テーマっていう分身のテーマを作る必要があるんですよ。
A さん
子テーマって実際どうやって作ればいいんですか?
Mr.K
まず、style.cssとfunctions.phpを作ってそれから・・・
A さん
ちょっと頭が真っ白になってきたんですが・・・もう帰って良いですか?
Mr.K
子テーマについて説明した記事を下に紹介していますので、見てから戻ってきて下さいね。
Mr.K
どうでしたか?子テーマについてわかっていただけましたか?
A さん
子テーマについて理解できたんですが、実際どうやって、活用していけば良いかわかりません。
Mr.K
そうなんですね。そしたら、実際に子テーマを使ってカスタマイズした時の様子を動画で解説した記事があるんですよ。また、下にリンクを貼っていますので、見て戻ってきて下さいね。
Mr.K
どうでしたか?
A さん
動画で説明してあったので、コードをどこに貼り付けてアップロードすれば良いかわかったので、子テーマの活用法についてイメージできました。
Mr.K
それは良かったですね。子テーマの活用法についてわかってもらえたので、本題であるSNSボタンのカスタマイズについて説明したいと思います。

実際に私がカスタマイズした時の動画を用意しましたので、同じように動画を見ながらカスタマイズできるようになりますので、ぜひ、チャレンジしてみて下さい。コードも下に貼り付けてますので、活用して下さい。

A さん
動画を見ながらできるのは、やりやすいので助かります。なんか私でもできそうです。ちょっとやってみます。

動画による解説

SNSボタンのカスタマイズ方法

Mr.K
動画を見たら、結構簡単に設置できていたのがわかるのではないかなと思います。
A さん
これなら私でもできそうです。
Mr.K
注意すべき点として挿入したい記事ページ(single.php)の部分にペーストをするということです。
Mr.K
あと、もう一つがテーマごとに記事の横幅が異なるので、コピペだとレイアウトが崩れるかもしれないということです。
その時はclassのsns〜sns2のliタグのwidthとmarginを調節してもらえれば、調整できますので、崩れた時は調整するようにお願います。
A さん
わかりました。
Mr.K
もう一つ言い忘れていましたが、シェア数のカウントはSNS Count Cacheというプラグインを有効化するだけで反映されますので、必要であれば使ってみて下さい。
A さん
わかりました。使ってみます。

使用したコードについて

 
記事ページの上部にSNSボタンを設置するコードです。動画で説明しているようにsingle.phpに貼り付けます。動画ではそのまま貼り付けていましたが、twitterのアカウント名とfeedlyにドメインを入力してから、アップロードするようにして下さい。

 
記事ページの下部にSNSボタンを設置するコードです。動画で説明しているようにsingle.phpに貼り付けます。動画ではそのまま貼り付けていましたが、twitterのアカウント名とfeedlyにドメインを入力してから、アップロードするようにして下さい。

 

style.cssに貼り付けて下さい。

まとめ

子テーマを使ってwordpressを初めてカスタマイズする方にわかりやすくお伝えしたつもりですがいかがだったでしょうか?初めはなかなかうまくできなくても何度か試しながら、カスタマイズすると自分なりにわかってくるところがあると思います。そんなあなたにこの内容が少しでもお役に立てたら幸いです。
 
最後にどのくらいSNSから流入が増えたかと言いますと、share lifeのfacebookとtwitterに載せていますので、確認していただけたらと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

40762277_m誰でもできる!jQueryを使ってwordpressでもスクロール時に画像をふわっとフェードインさせる方法

簡単!TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

関連記事

  1. Fotolia_51516768_S

    WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

  2. wordcamp

    wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  3. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

    たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  4. バックアップ

    【動画版】wordpress初心者でもバックアップし復元できる…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

  5. 簡単!TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

  6. お名前.comから独自ドメインを取得してwordpressをインストールする方法(さくらインターネット)

    お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

  7. thumb-575033_1280

    絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  8. 誰でもできるcontact form 7にボタン画像を設定する方法

    誰でもできるcontact form 7にボタン画像を設定する方…

    contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。 以前、…

PAGE TOP