[SANGOカスタマイズ]ウジェットの目次タイトルに画像挿入と他のアイコンを消す方法

今回は、SANGOカスタマイズのウジェット編です!

ウジェットのタイトルの前にあるアイコンを消す方法目次タイトルに画像を挿入する方法です!

当ブログで使っている目次のタイトル↓

みっぴー

イラストは自分で作成してもらわないとですが、完成イメージはこんな感じです

【スポンサーリンク】

今回のウジェットのタイトルのカスタマイズ内容

みっぴー

今回のカスタマイズでこんな事が出来るようになるよ!

今回のウジェットのタイトルのカスタマイズ内容をまとめると下記の通りです。

ウジェットのタイトルのカスタマイズ内容
  1. ウジェットのタイトル前のアイコンを消せる
  2. ウジェットの目次タイトルに画像挿入出来る
  3. 好きなデザインに指定出来る

修正するファイル

今回のカスタマイズで編集するファイルは下記の通りです。

このカスタマイズで修正するファイル
  1. style.css

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

みっぴー

最初にウジェットのタイトル前のアイコンを非表示にする方法です!

まず、ウジェットのタイトルのアイコンを消す方法からご紹介します。

今回のカスタマイズは、超カンタンです!style.cssにコードを加えるだけです!

    ウジェットのタイトルのアイコンを消す手順
  • STEP.1
    CSSを定義
    style.css」に新しいCSSを追加してウジェットのタイトル前のアイコンを消します。

1.CSSを定義

ウジェットのタイトルのアイコンを消すには、style.cssに下記のコードを追加してください。

みっぴー

これで、ウジェットの全てのタイトルの前のアイコンが消えます。

みっぴー

もし、目次のタイトルに画像を挿入したい場合は下記のコードは入力しないでくださいね!詳細は後程書きます。
CSS
/*--------------------------------------
全てのウジェットのタイトル前アイコンを非表示に
--------------------------------------*/
.widgettitle:before {
    content: none!important;
}

ウジェットの目次に画像を挿入する方法

次に、ウジェットの目次に画像を挿入する方法です。

    ウジェットの目次に画像を挿入する手順
  • STEP.1
    CSSを定義
    style.css」に新しいCSSを追記してウジェットの目次に画像を挿入します。

1.CSSを定義

ウジェットの目次に画像を挿入するには、下記のコードをstyle.cssに記入してください。

CSS
/*--------------------------------------
目次のタイトルに画像挿入
--------------------------------------*/
.sidebar .toc_widget .widgettitle{
    text-align: center;
}
.sidebar .toc_widget .widgettitle:before {
    display: block;
    content: url(ここに画像のURLを入れてください。);
    margin-bottom: -10px;
}

ぱん猫

だけど、これを入れても出ないよ?

みっぴー

うん、最初のカスタマイズでタイトル前のアイコンを非表示にしてるからね

ぱん猫

え?じゃあ、どうすればいいの?

みっぴー

目次のタイトルには画像を入れたいけど他のタイトル前のアイコンは消したい!そんな時は全てのウジェットのタイトル前のアイコンを消すのではなく、classを指定して非表示にすればオッケーです。
【スポンサーリンク】

目次のタイトル画像だけ表示させたい場合

他のウジェットのタイトル前のアイコンは消したいけど、目次のタイトルに画像は挿入したい!そんな時は、最初に紹介した下記のコードではなく、下記のコードを記入してください。

CSS
/*--------------------------------------
人気記事と最近の投稿のタイトル前アイコンを消す
--------------------------------------*/
.sidebar .my_popular_posts .widgettitle:before,
.sidebar .widget_recent_entries .widgettitle:before {
    content: none!important;
}

これで、目次のタイトルに画像は表示されるけど、他のウジェットのタイトル前(人気記事と最近の投稿)のアイコンは消えているはずです!

もし、これで消えないタイトルがあった場合は、class名を調べてここに追加すればオッケーです。

ウジェットのタイトルのclass名を調べる方法

みっぴー

タイトル前のアイコンを消したいウジェットのclass名を調べる方法もご紹介しておきます。

1.ウジェットのタイトルの上で右クリック

調べたいウジェットのタイトルの上で右クリックしてください。

2.検証を選択


右クリックした後に出てくる欄の中の「検証」を選択してください。

※ブラウザによっては「調査」という名前であったり他の名前の場合もあります。

3.class名を探す

右クリックした周辺のHTMLコードが表示されるので、その中からclass名を探してください。

上記の写真のように<div class="widget my_popular_posts">の部分widgetの後がclass名になります。

この上記の写真の例だとclass名は、「my_popular_posts」ですね。

この文字列をコピーしてください。

ウジェットのタイトルのclassを追加する方法

上記の方法でclass名を調べたら先ほどのコードに新しいclass名を追加していきましょう。

CSS
.sidebar .my_popular_posts .widgettitle:before,

上記をコピーしてメモ帳などに貼り付けてください。

「my_popular_posts」の部分を新しく追加したいclass名に書き換えてください。

CSS
.sidebar .追加したいclass名 .widgettitle:before,

これを先ほどのコードに下記のように追加すればいいだけです。

CSS
/*--------------------------------------
人気記事と最近の投稿のタイトル前アイコンを消す
--------------------------------------*/
.sidebar .追加したいclass名 .widgettitle:before,
.sidebar .my_popular_posts .widgettitle:before,
.sidebar .widget_recent_entries .widgettitle:before {
    content: none!important;
}

みっぴー

これで、消したいタイトル前のアイコンが消えるはずです!

ぱん猫

お疲れ様でした!
【スポンサーリンク】

コメントを残す

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