SEOに非常に強いテンプレートである賢威7ですが、正直、デザインに関しては、イマイチでそのまま使うにはちょっと・・・というところがいくつかありますよね?

その中でも、ソーシャルボタンについては、表示速度も遅いですし、ボタンも小っちゃくて見栄えもイマイチですし、真っ先にカスタマイズしたいところです。

そこで今回の記事では、賢威7のソーシャルボタンをおしゃれにカスタマイズする方法について解説をしていきます。

 

<Before(変更前)>

<After(変更後)>

 

こんなおしゃれなボタンに変更して、どんどんシェアされるコンテンツを目指していきましょう!

賢威7でソーシャルボタンを表示する方法

賢威7には、最初からソーシャルボタンの機能が実装されています。

デフォルトの状態だと、ソーシャルボタンの表示が「表示しない」になっている可能性があるので、下図のようにチェックを外していきましょう。

 

「表示しない」にチェックがなければ、そのページにソーシャルボタンが表示されます。

 

ブログを表示させて確認しましょう。
以下のようなソーシャルボタンが表示されていればOKです。

 

ただこの賢威7のソーシャルボタンですが、ボタンも小さくて中々押されにくいですし、何より表示速度が遅いのでSEO評価にも悪影響を与えるリスクがあります。

なので、今回紹介する方法で、よりおしゃれで見やすいソーシャルボタンに変更し、表示速度も向上してSEO評価も上げていきましょう。

賢威7でソーシャルボタンをおしゃれにカスタマイズする方法

それでは早速、ソーシャルボタンをおしゃれにカスタマイズしていきましょう。

手順① テーマの編集で既存のコードを削除する

まずはWordpressのダッシュボードから、「外観」→「テーマの編集」と進みます。

 

テーマの編集画面に来たら、「social-button2.php」を選択します。

 

そうすると、「social-button2.php」のコードが表示されます。

ここでこれらを全て消すのですが、万が一の場合に備えて、メモ帳などにバックアップを取って保存をしておきましょう。

これはWordpressのカスタマイズを行う時の基本動作として徹底してください。
何かをいじる際には、必ず元に戻せるようにバックアップを取っておくのです。

 

手順② 新しいコードを入力する

その次に、「social-button2.php」に以下の新しいコードをコピーして、張り付けましょう。

ここで、【Twitterのアカウント名】と表示してある部分には、Twitterアカウントの@xxx以下の、xxxの部分を入力するようにしましょう。

 

 

この後、ソーシャルボタンの箇所が以下のように表示されていればOKです。

もし表示がおかしければ、コードのコピペが上手くいっていない可能性が

手順③ Simple Custom CSSにてコードを入力する

ここまで来れば、ゴールはもうすぐです。

プラグインのSimple Custom CSSを使って、新しいCSSコードを入力させましょう。

※Simple Custom CSSの使い方については、記事:Simple Custom CSSでテーマを直接触らずにCSSをカスタマイズしよう、をご覧下さい。

 

 

WordPressの管理画面から、「外観」→「カスタムCSS」と進んでいきます。

 

そして、先ほどコピーしたコードをコピペして、「カスタムCSS」の更新を押して下さい。

 

これで、無事に以下のようなおしゃれにカスタマイズされたソーシャルボタンに変わっていることを確認しましょう。

ソーシャルボタンにシェア回数を表示させる方法

今回のカスタマイズして作成したボタンですが、デフォルトの状態ではシェア回数が表示されていません。

もし、シェアされた回数を表示したい場合には、管理画面から、「プラグイン」→「プラグインを追加」で、『SNS Count Cache』と検索し、「今すぐインストール」をして有効化しましょう。

 

これだけでシェア回数を表示させることが出来ますよ。

 

まとめ

以上、FacebookやTwitterなどのソーシャルボタンをカスタマイズする方法でした。

いかがだってでしょうか?

そこまで難しくなく、簡単におしゃれなソーシャルボタンをカスタマイズすることが出来ますので、デザイン性アップに向けて、参考にしてみてください。

 





コメントを残す