WordPressテーマSANGOの質問

ナビドロワーのタイトルをサイドメニューと同じフォントにしたい

アバター
クマノミ

素晴らしいテーマをありがとうございます!
ナビドロワーのタイトルを入力すると英文字がカクカクとなるところを、サイドメニューと同じ見た目(同じアイコンで同じフォント)に揃えたいと思っています。カスタマイズの追加CSSでできますでしょうか。どうぞ、よろしくお願いいたします。

ウィジェットの設定をしよう:広告の貼り方も解説
コメントへの回答
サルワカくん
サルワカくん
2020/05/09

お世話になっております。
以下のCSSを追加することで、ナビドロワー内のウィジェットタイトルのフォントも丸字になると思います。

.widgettitle {
    font-family: "Quicksand","Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

よろしくお願いします。

アバター
クマノミ
2020/05/09

大変お世話になり、感謝しております。
同じフォントになりました!かわいいです。ありがとうございます。

恐れ入りますが、ナビドロワータイトル前のアイコンについても、質問させてください。https://saruwakakun.com/sango/comments?id=1811を拝見しましたが、カスタマイズの追加CSSで設定して良いのでしょうか。怖くて触れられません。ナビドロワーのランキングとカテゴリーにサイドメニューと同じアイコンを表示したいのですが、どのように記述すれば良いでしょうか。
差し替えるウィジェットクラス名も自分で設定したタイトルで良いのかわからず、すみません。
よろしくお願いいたします。

サルワカくん
サルワカくん
2020/05/11

こちらが該当すると思います。
SANGOのナビドロワー内のタイトル前にアイコンを表示したい

よろしくお願いします。

アバター
クマノミ
2020/05/11

お世話になっております。
返信ありがとうございます。

カスタマイズの追加CSSで下のように追記しキャッシュ削除したのですが、アイコンが表示されていません。
#drawer__content .widget_my_popular_posts .widgettitle:before {
content: "\f073";"fas fa-chart-line"
font-family: "Font Awesome 5 Free";
padding-right: 5px;
}
また、ナビドロワーにしかないメニュー(タイトルinfoです)のウィジットクラスを知るにはどうしたら良いでしょうか。検証でサイドメニューにあるウィジットクラスはわかったのですが。。
そして検証したところ、右上に赤丸の×印が1、黄色三角のエラー?が10に増えておりました。そのまま放置して問題ないものなのでしょうか。何が間違っているかもわからない状態です。何か解決方法はありますでしょうか。
初心者で大変お手数おかけし、申し訳なく思っております。
どうぞ、よろしくお願いいたします。

サルワカくん
サルワカくん
2020/05/12

CSSの文法が間違っていると思います。
具体的にはcontent: "\f073";"fas fa-chart-line""fas fa-chart-line"の部分が不要です。

アバター
クマノミ
2020/05/13

返信ありがとうございます。
初心者なものでCSS文法等全く知らず、ご案内のページを参考に、コピペして差し替え部分のみ差し替えたのですが、間違えのご指摘、ありがとうございました。
ご回答のように直しましたが、改善しませんでした。

サルワカくん
サルワカくん
2020/05/13

サイト内のCSSを拝見しました。

#drawer__content .widget_my_popular_posts .widgettitle:before {
  content: "\f073";
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

のうち、.widget_my_popular_postsですが、該当のウィジェットのクラス名に書き換える必要があります。
たとえば、ナビドロワー内のSANGOの人気記事ウィジェットであれば、冒頭のクラス名の並び(セレクターといいます)は次のようになります。

#drawer__content .my_popular_posts .widgettitle:before

アイコンを人気記事ランキングらしくするのであれば、CSSは以下のようになると思います。

#drawer__content .my_popular_posts .widgettitle:before {
  content: "\f201";
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

ナビドロワー内の固定ページウィジェットであれば、セレクターは次のようになります。

#drawer__content .widget_pages .widgettitle:before

ナビドロワー内のカテゴリーウィジェットであれば、セレクターは次のようになります。

#drawer__content .widget_categories .widgettitle:before

ウィジェットのクラス名の調べ方はウィジェットのアイコンを表示or変更する方法が参考になると思います。

アバター
クマノミ
2020/05/14

丁寧なご指導、ありがとうございました。
おかげさまで、イメージ通りに設定することができました!嬉しいです。
長々とお手数おかけし、失礼いたしました。
大変な時期が続いていますので、お体大事にお過ごしください。

サルワカくん
サルワカくん
2020/05/14

うまくいったようで良かったです!
ご報告ありがとうございました。