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をフォローしよう!

スポンサーリンク

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

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

関連記事

  1. wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  2. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

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

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

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

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

  5. wordpressど素人がWordCamp Kansai 201…

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

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

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

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

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

  8. 【動画解説】wordpressをさくらからエックスサーバーへ引っ…

    当ブログはさくらインターネットのスタンダードプランに契約していたのですが、80記事を超えてきてから、…

スポンサーリンク

さくらとXサーバーの速度比較

最近の記事

真夏の感謝祭 半額キャンペーン中

PAGE TOP