PC1台で自由に人生をデザインするリクのブログ

賢威6.2/7-SNSボタンのオリジナルカスタマイズ方法|おしゃれなボタンを設置しよう

 

 

どうも、RIKUです。

今回は賢威6.2賢威7において、SNSボタンをオリジナルカスタマイズする方法を解説していきます。

 

SNSボタンというのは、TwitterやFacebookなどのソーシャルメディアの拡散を図るためのもので、賢威のデフォルトでは次のようなものが設置されています。

 

これは主に記事上や記事下に設置されるものなのですが、オリジナルのボタンにカスタマイズすることができますが、この記事に沿ってカスタマイズをすると、次のようなSNSボタンを設置することができます。

 

このような、いわゆるバイラルメディア風のおしゃれなボタンを設置することにより、デフォルトのものよりもSNSで拡散されやすい、というメリットが発生するのです。

とても簡単にカスタマイズすることができるので、ぜひともオリジナルのSNSボタンを設置してみましょう。

 

賢威のSNSボタンをカスタマイズする理由

 

当サイトではSNSボタンをオリジナルにカスタマイズしていますが、その理由は主に2つあります。

それは、

  • サイトの表示速度を上げるため
  • SNSボタンをより目立たせるため

この2つの理由をもとに、カスタマイズしました。

 

サイトの表示速度を上げるため

 

まず、賢威におけるデフォルトのSNSボタンは、表示速度が少し遅いという欠点があります。

ほんの何秒かの話ではありますが、表示速度が遅くなってしまうと、サイト訪問者に多少なりともストレスを与えてしまいます。

 

オリジナルに設置したSNSボタンであれば、表示速度をより上げていくことができるので、気になる場合はカスタマイズしてみるといいですね。

また、「表示速度の速さ」というのはGoogleのサイト評価基準の1つでもあるので、SEO的にもカスタマイズして損ということはないでしょう。

 

SNSボタンをより目立たせるため

 

表示速度が遅いことに加えて、デフォルトのSNSボタンは「デザインが地味」という印象も受けます。

これはサイトの世界観にも合わせたいところで、人によって好みもあると思います。

 

しかし、僕個人としては、多少地味で目立たない印象があったので、おしゃれなSNSボタンにカスタマイズしました。

 

また、何より「SNSボタンはここですよ」と程よく主張できるようなデザインにしたかったので、オリジナルのわかりやすいものに変更しました。

 

SNSボタンのオリジナルカスタマイズ方法

 

 

ではさっそく、賢威のSNSボタンをオリジナルカスタマイズしていきます。

解説通りに設定を進めていただければ、簡単にカスタマイズすることができるので、一緒に設定を施していきましょう。

 

SNSボタンを表示させる/賢威7のみ

 

賢威6.2では、デフォルトの状態からSNSボタンが表示されていますが、賢威7はデフォルトの状態ではSNSボタンが表示されていません。

 

ですので、まず賢威7の場合のみ、SNSボタンを表示させるように設定する必要があります。

*賢威6.2の場合は、この項目を飛ばしてもらってかまいません。

 

SNSボタンを表示させるには、まずWordPressのダッシュボード画面から『賢威の設定』→『SNSの設定』を選択します。

 

次に、今回は投稿ページにSNSボタンを表示させたいので、『投稿ページ』の『表示しない』という項目にあるチェックを外しておきましょう。

これで、デフォルトのデザインのSNSボタンが投稿ページに表示されるようになりました。

 

social-button2.phpにコードを足す

 

続いて、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『social-button2.php』を選択しましょう。

 

そして、phpの編集画面が表示されたら、まずは記載されているコードをすべて削除します。

*SNSボタンを元に戻したくなったときのために、『social-button2.php』のバックアップはしっかり取っておきましょう。

 

次のように、コードを削除し空っぽの状態にしましょう。

 

そして、コードを削除した箇所に以下の新たなコードを挿入します。

 

ちなみに、『Twiiterのアカウント名』と書かれている場所には、自分のTwitterアカウント名を入れましょう。

Twitterアカウント名とは、『@〇〇〇』の〇〇〇の部分に当たります。

 

コードをコピーしTwitterアカウント名を入力したら、以上で『social-button2.php』の設定は完了です。

記事画面を確認すると、次のようにソーシャルリンクが文字で表示されています。

 

これではまだ寂しい状態なので、続いてソーシャルリンクにデザインを施していきましょう。

 

design.cssにコードを足す

 

まずは、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『base.css』を選択しましょう。

ちなみに賢威7の場合は、『外観』→『CSS編集』を選んでもらえればOKです。

 

CSSの編集画面が表示されたら、以下のコードを追記していきます。

 

賢威6.2であれば、

/*————————————————————
 template created by web-rider
————————————————————-*/

の前に、そして賢威7であれば一番下の箇所に次のコードを貼り付けましょう。

 

 

コードを無事貼り付けることができたら『変更を保存』をクリックし、無事に設定は完了です。

 

記事を確認すると、次のようなおしゃれなオリジナルのSNSボタンにカスタマイズされているはずです。

デフォルトのデザインよりも拡散されやすい、整ったデザインですね。

 

補足-シェア数を表示するには?

 

以下、補足としてソーシャルメディアでシェアされた数をSNSボタンに表示する方法を解説します。

『シェアされた数を表示したい』というような場合は、ぜひとも参考になさってくださいね。

 

まずは、WordPressのダッシュボード画面から『プラグイン』→『新規追加』を選び、『SNS Count Cache』をインストールしましょう。

 

そして、忘れずに有効化を済ませれば設定は以上です。

インストールと有効化をするだけで簡単にシェア数を表示できるようになるので、好みに合わせて設定していきましょう。

 

最後に

 

以上、賢威6.2と賢威7において、SNSボタンをオリジナルカスタマイズする方法を解説しました。

無事に、おしゃれなデザインのオリジナルSNSボタンにカスタマイズできたでしょうか?

 

デザインをカスタマイズするということで、最初は難しいように感じたかもしれません。

しかし、結局のところコードを貼り付けるだけでほぼ作業が済むので、当記事を参考にしていただければスムーズに設定できたかと思います。

 

SNSボタンのカスタマイズという一見細かいところではありますが、そういった細部までこだわるくらい自分のサイトには愛着を持っていたいものですね。

また、単なるデザイン性に加えて、ソーシャルメディアでの拡散率の向上も見込むことができるので、手を抜かずぜひともカスタマイズしていきましょう。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です