Ver1.7.8 Released !

ウィジェットタイトル前のアイコンを変更or消す方法

SANGOでは「一部のウィジェットのタイトル前」にアイコンが表示されるようになっています。このアイコンにはFontAwesomeというWebフォントを使っています。

ウィジェット前のアイコンを変更する方法

今回は、このアイコンを「変更したり」「消したり」「(もともと無いウィジェットに)表示させたり」する方法を解説します。

ウィジェットタイトル前のアイコンを消す方法

デフォルトのアイコンを表示させたくないという場合には、下記のCSSを子テーマのstyle.cssなどに貼り付けてくださいませ。

style.css
.widgettitle:before {
    content: none!important;
}

これで全ウィジェットタイトル前からアイコンが消えます。


アイコンを表示or変更する方法

次にウィジェットタイトル前に「アイコンを表示させる」or「表示されているものを変更する」方法を解説します。どちらも手順は同じです。

手順1:ウィジェットのタイトルの真上を右クリック

変更したいウィジェットタイトルを右クリック

まずは、アイコンを表示/変更したいウィジェットタイトルの真上を右クリックします(文字列の上のあたりでOKです)。

手順2:検証を選ぶ

検証をクリック

表示されるメニューの中から「検証」を選びます。ブラウザによっては「要素の検査」や「調査」という名前になっている場合があるのでご注意ください。

手順3:ウィジェットごとのクラス名を見つける

ウィジェットごとのクラス名を調べる

右クリックした周辺のHTMLコードが表示されます。この中からウィジェットごとのクラス名を見つけます。<div class="widget my_popular_posts">というようにwidgetの後に続く文字列がそのウィジェットのクラス名です。このクラス名をコピーしましょう。

手順4:CSSでアイコン種類を指定

さきほど調べたクラス名に対して、CSSで「このアイコンを表示して!」という指定をします。子テーマのstyle.cssなどに下記のCSSを貼り付けましょう。

style.css
.sidebar .◯◯ .widgettitle:before {
    content: "\アイコンコード";
}

↑◯◯の部分には、さきほど調べたクラス名(前に「.」をつけること)を入れます。

アイコンコードの調べ方

アイコンコードは、FontAwesomeのアイコン一覧ページから調べることができます。ただし、バージョンや設定により使用可能なFontAwesomeのアイコンが異なります。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています。詳しくは、下のリンク先をご覧ください。

SANGOでFontAwesome4.7から5へと切り替える方法と注意点

FontAwesomeのアイコン一覧ページを開き、使いたいアイコンをクリックすると表示されるUnicodeに続く文字列がアイコンコードになります。

unicodeをチェック

例えば、人気記事ウィジェットのタイトル前アイコンを「カミナリマーク」を変えるためには以下のように書きます。

style.css
.sidebar .my_popular_posts .widgettitle:before {
    content: "\f0e7";
}

アイコンコードの前にはバックスラッシュ\を忘れずにつけるようにしましょう。

注意
カスタマイズ後はキャッシュの削除を忘れずに!

カスタムHTMLのタイトル前にアイコンをつける場合

上の方法だと、複数のカスタムHTMLがある場合に、全カスタムHTMLウィジェットでアイコンが同じになってしまいます。

それぞれ変えたい場合には、まずウィジェット固有のidを調べます。id="◯◯"の文字列がそのウィジェットのidです。

これを用いて、下記のように指定します。id名の前には#をお忘れなく(例: #custom_html-6)。

style.css
.sidebar #◯◯ .widgettitle:before {
    content: "\f0e7";
}

というわけで、アイコンを表示/変更する方法の解説でした。

16 COMMENTS

おさるくん 2018/11/20

1.6にバージョンアップして、カスタムHTMLのタイトル前にアイコンをつけたものが非表示になったと思うのですが、バージョンアップは関係ないでしょうか?

回答を見る
ミキティ 2018/09/20

こんにちは。
素敵なデザインでとても気に入っております。

追尾サイドバーにTOC目次を追加したのですが、
こちらにアイコンは追加できるのでしょうか?

/*TOC ウィジェットタイトル*/
#fixed_sidebar #toc-widget-2  .widgettitle:before {
content: “\f0c9”;/*アイコンのコード*/
font-family: FontAwesome;
padding-right: 5px;
}

と指定をしてみたのですが、
どうもうまくいかないのでコメントさせて頂きました。

お忙しいところ恐縮ですが、お返事頂きたいです。

回答を見る
うてな 2018/07/24

いつもお世話になっております!
サルワカさんの様に、親カテゴリにFont Awesomeのアイコンを色付きでつけたいと思いサルワカさんのサイトを見てみました。
.side-widget-inner .cat-item-20>a:before {content: “\f109”;}
.side-widget-inner ul li a:before {color: #f89174;font-family: FontAwesome;padding-right: 6px;}

該当するのはこの部分だとおもったのですがカテゴリIDを変えてスタイルシートに貼り付けてもうまくいきませんでした。並べ替えたり?クラス名を変えたりと試してみましたがダメでした・・・。
サイトバーとナビドロワー内のカテゴリで設定する記載方法をよろしければ教えてください。よろしくお願いします。

回答を見る
うてな 2018/06/13

こんにちわ。つい数日前にSANGOを購入させて頂きました!
ウィジットタイトル前のアイコンについてです。
CSSを編集し(?)カレンダーとアクセス数の所にアイコンを設置してみたのですが、PCでは表示されていますが、スマホで確認すると表示されません。でもカスタマイズのデモ画面で確認すると表示されています。一応スマホでキャッシュはクリアしたと思うんですが他に何か原因はありますでしょうか?
あとスマホでハンバーガーメニューの中にあるウィジットタイトル前にもアイコンをつけたいのですが、どうしたらいいでしょうか?? 長々すいません。

回答を見る
いなおか 2018/05/17

前回は素早く対応して頂きありがとうございました。
今回はウィジェット前のアイコンに何回してもできなかったので質問させてください。
サイドバーのカレンダー前にアイコンをつけたいのですがどうしても出来ずお知恵を借りたいと思いコメントさせていただいてます。idやclassを指定しても出来ず困っております。よろしくお願い申し上げます。

回答を見る
佐藤ハイジ 2018/03/02

いつもお世話になっております。
記事下の関連記事のタイトル後ろにアイコンフォントを表示させたい場合にはどのようにすれば良いのでしょうか。
:afterを自分が考えうる色んなクラス名で試してみたんですがうまくいきません。
お忙しいところ申し訳ありませんがお教えいただければ幸いです。

回答を見る

コメントを残す

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