WordPressテーマSANGOの質問

シェアボタン(FAB)のスタイルを変えたい

アバター
NANA

こんにちは。記事タイトル下(サムネイル画像下)の自動のシェアボタンをカスタマイズする方法がどこか説明されているのでしょうか?アイコン前にSHAREの文字を入れたいです。よろしくお願い致します。

SANGOでデフォルトの見出しを変える方法
コメントへの回答
サルワカくん
サルワカくん
2018/10/30

解説記事はありませんが、以下のCSSを追加することで、表示が可能です。

.article-header .sns-btn:before {
    margin-top: 10px;
    content: "SHARE";
    font-family: Quicksand, sans-serif;
    font-weight: 500;
    font-size: 20px;/*フォントサイズ*/
    letter-spacing: 1px;
    display: block;
    text-align: center;
}

もしシェアボタンと余白の間が気になるようであれば(シェアボタンを2種類のうち、どちらを選んでいるかによりますが…)以下のCSSを追加すると良いかと思います。

.article-header .sns-btn ul {
    margin-top: 0;
}

一度ご確認をよろしくおねがいします。

アバター
NANA
2018/10/30

ご返答ありがとうございました!試しましたが、シェアボタンを押してからの変更でしたね。押す前の、「Extended FAB」スタイルのシェアボタンを作りたかったです。説明が下手で申し訳ありませんでした。
ですが、調べたら、Ver1.5のアップデートでは「Extended FAB」スタイルのシェアボタンを選べるようになったと書かれていましたね。まだアップデートをしていなかったので気付きませんでした。すみません。

サルワカくん
サルワカくん
2018/10/31

あ、そういうことですね。
いえいえ、ご報告ありがとうございました。