Ver1.4.1をリリースしました(5/19)

ウィジェットタイトル前のアイコンを変更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";
}

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

10 Comments

アリス

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

返信する
佐藤ハイジ

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

返信する
サルワカくん

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

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

返信する
佐藤ハイジ

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

返信する
初心者です

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

返信する
初心者です

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

返信する
いなおか

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

返信する
サルワカくん

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

返信する
いなおか

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

返信する

コメントを残す

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