賢威のSNSボタンを見栄えのいいおしゃれなSNSボタンに変更する

ZZZ

こんにちは、勇次です!

パワーサイト(WordPressブログ)の方は、賢威のテンプレートを使ってひとまず開設したが、今時では当たり前のSNSボタンを設置していないことに気づく。

賢威ではSNSボタンを表示させる設定があるので、この設定を変更するだけで記事の上と下にSNSボタンが表示されるようになるが、用意されているボタンがちょっと地味な感じがする。

↓こんな感じ
賢威の標準SNSボタン


これを、こんなおしゃれで目立つボタンに変更する。
カスタマイズしたSNSボタン


ネットで調べると、賢威のSNSボタンが地味だと思っている人が他にもいるようだ。


そういう人の記事に、ちょっとおしゃれで派手なボタンにカスタマイズする方法が書いてあったので、このカスタマイズに挑戦してみた。

スポンサーリンク

カスタマイズの作業手順と注意事項

今回紹介するSNSボタンのカスタマイズは、ちょっと手間がかかる。

カスタマイズの作業は、次の通り。
  • Simple Custom CSSプラグインのインストール
  • 賢威のSNSボタン表示PHPソース(social-button2.php)を修正
  • ボタンデザイン用CSSコードを追加(Simple Custom CSS)
  • ロリポップサーバでカスタムCSSを追加できなかった場合の対処

注意点して、ロリポップサーバの場合はセキュリティの関係で、カスタムCSSの追加でエラーとなる。

詳細は、後述を参照。


また、PHPソースを修正するので、修正前のPHPソースはできればバックアップして欲しい。

事前準備

カスタマイズ作業に入る前に、投稿ページにSNSボタンを表示させる以下の設定変更をすませておく。


管理ページにログインし、左メニュー『賢威の設定』→『SNSの設定』を選択
SNSの設定


『投稿ページ』の『表示しない』のチェックを外し、下にある『変更を保存』ボタンをクリックして設定を保存。
投稿記事にSNSボタンを表示する

Simple Custom CSSプラグインのインストール

管理ページ左のメニュー『プラグイン』→『新規追加』を選択
プラグインの新規追加


キーワードに『Simple Custom CSS』を入力
プラグインSimple Custom CSSの検索


検索されて出てきた『Simple Custom CSS』の『今すぐインストール』をクリック
※似たような名前のプラグインがいくつかあるので、間違えないように
プラグインSimple Custom CSSのインストール


引き続き、『有効化』をクリック。これでSimple Custom CSSが使えるようになる。
プラグインSimple Custom CSSの有効化

賢威のSNSボタン表示PHPソース(social-button2.php)を修正

まず、social-button2.phpに書き込む以下のコードをコピー(Ctrl+A、Ctrl+C)して、メモ帳にもで貼り付けておく。



管理ページ左のメニュー『外観』→『テーマの編集』を選択。

テーマの編集


画面右下にあるsocial-button2.phpをクリック。
テーマの編集画面


social-button2.phpに書かれていたコードを全て削除し(Ctrl+A、Del)、メモ帳に貼り付けていたコードを貼り付けたら、『ファイルを更新』ボタンをクリック
SNSボタン表示PHPソースの更新


ここまでで、記事を表示させると以下のようになっているはず。
SNSボタンカスタマイズの途中


ボタンのリンクしかないが、ボタンに関するデザインの定義はこれからCSSコードとして追加する。

ボタンデザイン用CSSコードを追加する(Simple Custom CSS)

以下のボタンデザインのCSSコードをコピー(Ctrl+A、Ctrl+C)して、メモ帳にもで貼り付けておく。



管理ページ左メニュー『外観』→『カスタムCSS』を選択

カスタムCSSの追加


Simple Custom CSSの編集画面が開かれる。

赤枠部分にメモ帳に貼り付けていたCSSコードを貼り付けて、『カスタムCSSの更新』ボタンをクリック
ZZZ


ロリポップサーバを使っている人は、『カスタムCSSの更新』ボタンをクリックした時に、以下のエラーになるはず。
カスタムCSSの更新でエラー


これは、ロリポップサーバーが採用している『WAF』(ウェブ・アプリケーション・ファイアウォール)という、Webページ改ざん防止のセキュリティ機能が動作しているため。

WAFが機能しないように、Simple Custom CSSを修正する間だけ一時的に無効にする。

ロリポップサーバの管理ページにログインし、左メニュー『WEBツール』→『WAF設定』を選択
ロリポップWAF設定の変更


設定変更の『無効にする』をクリックすると、設定状態が無効になる。
ZZZ

これでWAFが無効になった。

※WAFが無効状態になるには5分~10分程度時間が必要なので、更新作業は10分後ぐらいする。


再度『カスタムCSSの更新』ボタンを押して、エラーにならないことを確認する。


投稿ページを表示させた時に、↓のようなボタンが表示されればOK。
カスタマイズしたSNSボタン


注意!)
カスタムCSSの更新が完了したら、無効にしたWAFを有効にすることを忘れないように。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. こんにちは ランキングから来ました。

    SNSのボタンお洒落になりますね。

    お洒落なボタンに変更してみたいですが・・・

    CSSをいじるのが怖いです。

    恐れていては変更できないですね。

    検討してみます。

    情報ありがとうございます。

  2. クミホ より:

    初めまして。

    CSSに苦手意識が強いのですが、
    これだけ詳しい解説をお手本にすれば、
    私にも変更できるかもしれません。

    おしゃれにしたいので、頑張ってみます。
    ありがとうございます!(#^^#)

    • 勇次 より:

      はじめまして、勇次です。
      コメントありがとうございます。
      たかがボタンですが、見栄えがよくなるだけで訪問者の目に止まりますからね。
      ぜひ、チャンレジしてください。

  3. ごんたママ より:

    はじめまして!
    ごんたママです。
    アフィリエイト初心者で、勉強中です。
    SNSボタンもおしゃれにカスタマイズできるんですね!
    目立つし、素敵です。
    解説もとても丁寧で分かりやすかったです。勉強になります。
    ありがとうございます。