賢威7

【賢威7】ブログのSNSソーシャルボタンデザインをカスタマイズする方法

WordPressブログでSNS拡散の役割をするソーシャルボタン

デフォルトではボタンが小さいのでもっと大きくおしゃれにカスタマイズ出来れば、簡単にシェア率をあげるデザインはないか・・・と思うものの、デザインの変更はHTMLやCSSコードの編集で難しそう!と思いがちですよね。

賢威7では簡単にデザインをカスタマイズすることが可能ですので、今回はその方法を初心者でも分かりやすく解説していきます^^

 

賢威7でSNS表示設定を行う方法

まずはWordPressブログにSNS表示設定を行う必要があります。

ダッシュボードから「賢威の設定」→「SNSの設定」をクリックし、「投稿ページ」の「表示しない」のクリックを外しましょう。

賢威7・Wordpressブログの SNSソーシャルボタンのデザインをカスタマイズする方法を動画で解説!

 

動画内で出てくるHTMLコード&CSSコードは⬇︎⬇︎⬇︎に書いてあります^^

賢威7・Wordpressブログの SNSソーシャルボタンのデザインをカスタマイズする方法を文章&画像で解説!

WordPressブログで賢威7を使っている場合、ソーシャルボタンデザインカスタマイズはさほど難しい作業は必要ありません。

以下の流れに沿って進めば意外に簡単に終わりますので、早速内容を見ていきましょう!

ソーシャルボタンのデザインをカスタマイズ①テーマの編集からHTML書き換え

まずはダッシュボードから、「外観」→「テーマの編集」を選択し、右側の一覧から「social-button2.php」を選択します。

 

するとテキストがずらっと並んだHTMLコードが表れますので、こちらを編集していきます。

ちなみにHTMLやCSSなど、コードを編集するときは必ず編集前にバックアップをとりましょう!

元に戻したい時などに必ず必要となりますので、ご自身の保存しやすい形でメモやevernoteなどに保存する事をお勧めします。

 

バックアップを取り終えたら、こちらのコードを全て削除します。

 

ブランクになった画面に、以下のコードをコピペします。

11行目の【Twitterアカウント名】部分は、ご自身のツイッターアカウント名の@以降部分を入力してくださいね。

 

貼り付けたら更新ボタンを押します。

 

すると、ブログのソーシャルボタンがこの様にテキストに変化しているはずです。

ここからさらにデザインを変えていきます。

ソーシャルボタンのデザインをカスタマイズ②Simple Custom CSSのカスタムCSSを追加

ダッシュボードに戻り、カスタムCSSにこちらのコードを貼り付けます。

参考記事:カスタムCSSの使い方!テーマ編集をしないでCSSを簡単に変更する方法

 

1行目〜92行目までいくかと思います^^

 

貼り付け終わったら、「カスタムCSSの更新」をクリック。

 

すると、大きなボタンに変わります^^

 

このままでも勿論OKですが、ソーシャルボタンにシェアされた回数を表示させたい場合は、以下の作業が必要です。

ソーシャルボタンのデザインをカスタマイズ③シェア回数の表示はSNS Count Cashe追加

プラグインから「SNS Count Cashe」を追加し、インストール&有効化します。

参考記事:WordPressでプラグインをインストール&有効化する方法

 

すると回数が表示される様になります!

やはり回数は表示しなくていいや・・という場合はプラグインの停止&削除すればOKです。

参考記事:WordPressでプラグインを停止&削除する方法

ソーシャルボタンのカスタマイズは以上になります!

 

ちなみにデフォルトだと本文の上下どちらにもSNSボタンが設置されていますので、「どちらかだけでいいんだけど・・」という場合は、別コンテンツで削除方法も紹介していますので、そちらをご参考くださいね。

参考記事:ブログのソーシャルボタンを記事上下どちらか片方削除する方法

〜自由なライフスタイルを実現させたいアナタへ〜  

POSTED COMMENT

  1. きゃら より:

    お世話になっております
    この通りやったのですが、カスタムCSSそのまま貼り付けると

    403 Error

    現在、このページへのアクセスは禁止されています。
    サイト管理者の方はページの権限設定等が適切かご確認ください。

    と表示されてしまいます。
    どうしたらいいのか教えて頂けますでしょうか。
    宜しくお願い致しますm(__)m

  2. MAI より:

    こんにちは、ブログをご覧いただきありがとうございます^^

    「カスタムCSSそのまま貼り付けると403 Errorが出る」
    という事ですね。

    私自身がこの作業で403エラーになった事がないので少し調べてみたのですが、

    http://seo.siyo.org/server/seo7860/
    https://www.nishi2002.com/12975.html

    こちらのサイトを拝見すると、どうやらサーバーにロリポップを使用しているとCSS編集で403になる事が多いようですね。
    もしロリポップをご使用であれば、上記サイトがご参考になるのではと思います^^

COMMENT

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