Ver1.6 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のアイコン一覧から調べることができます。使いたいアイコンをクリックすると表示される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";
}

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

18 Comments

アリス

いつもお世話になっております。
CSSのコピー&ペーストをしたのですが、私の環境だとコード内の「円」マークが「\」に変換されてしまい、うまく表示することができません。解決策を調べてはみたのですが、フォントの変更もうまくできず苦戦しています。よろしくお願いいたします。

返信する
佐藤ハイジ

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

返信する
サルワカくん

.related-posts .rep p:after {
    content: '\◯◯';
    font-family: FontAwesome;
}

という感じでどうでしょうか。

返信する
佐藤ハイジ

ありがとうございます!
ただ自分はカスタマイザーで変更可能な「おすすめの関連記事」といった文言の部分のつもりで言ってました。わかりにくい表現ですいません。
しかしながらご返信頂けたお陰で自分がすごい小さなミスをしていたことに気づき、どうにか自己解決できました。
お騒がせして申し訳ありません。
ご返信ありがとうございました。

返信する
初心者です

いつもお世話になります。
SNSシェアボタンの「はてブ」と「LINE」のアイコン画像は表示されるのですがそれ以外のTwitterやシャアなどのアイコン画像が□になり表示されないのですが原因は何になるかお分かりになるでしょうか?
よろしくお願いいたします

返信する
初心者です

ご回答ありがとうございます。
Ver.5を入れており旧バージョンに変更すれば表示されました。
お手数おかけしまして申し訳ありませんでした。
ありがとうございました。

返信する
いなおか

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

返信する
サルワカくん

ブラウザでソースコードを開き、CSSファイル(◯◯.css)を開いてみてください。
CSSで追加したsidebar1のあたりに全角文字列とか入っている気が…。文字化けしてますよー

返信する
いなおか

お世話になっております。知識が乏しく申し訳ありません。CSSファイルを開けるところまでは行ったんですが、見つけられなくて、、、文字化けを探してみます。

返信する
うてな

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

返信する
サルワカくん

私のスマホで確認しましたがアイコンは表示されております。やはりキャッシュの問題かと思うので気にしなくてOKだと思います。
ナビドロワー内のタイトル前アイコンについては以下のようなコードで追加できると思います。

#drawer__content .widget_calendar .widgettitle:before {
    content: "\f073";/*アイコンのコード*/
    font-family: FontAwesome;
    padding-right: 5px;
}

こちらはカレンダーの場合です。他のタイトルの場合、.widget_calendarの部分を該当するウィジェットクラス名に変える必要があります。
よろしくお願いします。

返信する
うてな

いつもお世話になっております!
サルワカさんの様に、親カテゴリに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を変えてスタイルシートに貼り付けてもうまくいきませんでした。並べ替えたり?クラス名を変えたりと試してみましたがダメでした・・・。
サイトバーとナビドロワー内のカテゴリで設定する記載方法をよろしければ教えてください。よろしくお願いします。

返信する
サルワカくん

あー、ちょっとだけコードが違ってますね。

.widget_categories .cat-item-20>a:before {content: "\f109";}
.widget_categories ul li a:before {color: #f89174; font-family: FontAwesome; padding-right: 6px;}

というように.side-widget-innerを.widget_categoriesに変えてみてください。

返信する
ミキティ

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

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

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

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

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

返信する
サルワカくん

なるほど。代わりに

.toc_widget .widgettitle:before {
    content: "\f0c9";
    font-family: FontAwesome;
    padding-right: 5px;
}

を貼り付けてみていただけますか? (編集後はキャッシュの削除をお忘れなく)

返信する

コメントを残す

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