WordPressテーマSANGOの質問

サイドバーのアイコン型フォローボタンにPinterestを追加したい

アバター
Kurumi

いつもお世話になっております。
”サイドバーにアイコン型フォローボタンを表示”について、
Pinterestのボタンも追加したいのですが、CSSのコードがわかりません。
コードを教えて頂けますか？

Pinterestのfontawesomeは、色は#BD081Cです。

よろしくお願いいたします。

プロフィールを表示する
記事下にプロフィール（この記事を書いた人）を設置する
コメントへの回答
サルワカくん
サルワカくん
2018/05/10

ウィジェットに貼り付けたコードに以下のような部分があると思います（feedly以外のliタグでも構いません）。

<li><a href="★feedlyのURL★"  target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a></li>

このコードの後に、Pinterest用のコードを追加します。

<li><a href="★PinterestのURL★"  target="_blank" rel="nofollow"><i class="fa fa-pinterest-p"></i></a></li>

次に、子テーマのstyle.cssなどに以下のCSSを追加します。

.profile-sns li .fa-pinterest-p {
    background: #BD081C;
}

これで完了です。ご確認くださいませ。

返信する
アバター
Kurumi
2018/05/17

ご返信ありがとうございます。
ウィジェット内に貼り付けたコードは以下の通りです。
サイドバー右の「Follow Me」の箇所です。
記載しているコードは

<a href="★TwitterのURL★" rel="nofollow">Twitter</a>
   <a href="★facebookのURL★" rel="nofollow">Facebook</a>
   <a href="★InstagramのURL★" rel="nofollow">Instagram</a>
   <a href="★PinterestのURL★" rel="nofollow">Pinterest</a>

コードはこれで問題ないと思いますが、ご返信いただいたCSSでは反映されず、Pinterestのボタンに色とFontAwesomeが入りません。
ご確認いただけますでしょうか。

また、同様に記事下のSHAREボタンのLINEをPinterestに、
記事下のこの記事を書いた人のSNSボタンにPinterestを追加する方法を教えていただけますでしょうか。

色々とお手数おかけいたしますが、よろしくお願い致します。

返信する
サルワカくん
サルワカくん
2018/05/18

あ、サイドバーの「プロフィール下のボタン」だと勘違いしてました。
四角っぽいアイコン型の方ですね。であれば、

<a class="pinterest" href="★PinterestのURL★" target="_blank" rel="nofollow">Pinterest</a>

というコードをカスタムHTMLに追加して
CSSに

.follow_btn .pinterest:before {
    background: #BD081C;
    content: "\f231";
}

と追加すると良いかと思います。
シェアボタンに関しては、色々と大変なので、申し訳ないのですがサポート外とさせてください。

返信する
コメント一覧ページへ