Ver1.3.1をリリースしました(11/22)

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

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

コメントを残す

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