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. ul、liのドット部分をアイコンでリスト化する方法

    ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。…

  2. サムネイルを活したセンスが良いTCDのテーマVIEW!使用感をレ…

    私がブログを始めて1年経ち、研究のために他のブログを参考にすることがあるんですが、余計な文字が多いと…

  3. wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

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

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

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

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

  6. 誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

  7. WordPressを始める初心者におすすめ!テーマ選びの5つのポ…

    これから、Wordpressを始める人にとって、Wordpressテーマを決めるのは、重要ですよね。…

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

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

PAGE TOP