ウィジェットタイトルのカスタマイズについて

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › ウィジェットタイトルのカスタマイズについて

  • このトピックには9件の返信、2人の参加者があり、最後にhideにより9年、 5ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #52629
      hide
      ゲスト

      WordPress 4.7.3
      バージョン: 2.4.8b

      いつもsimplicity2を利用させていただいております。

      ウィジェット設定画面にて設定した、関連記事下の『カテゴリ』や『タグ』のウィジェットタイトルの文字サイズなどをcssでカスタマイズしたいのですが、お調べしてもなかなか解決できなかったのでご教授いただきたいです。

      よろしくお願い致します。

    • #52632
      かうたっく
      ゲスト

      おつかれさまです^^

      WordPressのウィジェットはh3、.widget_titleとHTMLで指定があり、Simplicity(2)の親テーマのCSSで、その部分の指定が#sidebar h3と指定されてます。

      なので文字の大きさを1,2文字分にするなら、こんな感じです。

      #sidebar h3 {
          font-size: 1,2em;
      }

      もちろん18pxなどと指定も可能です^^

      ※ウィジェットは幅の狭いブラウザでみれば関連記事・コメントなどのmainエリアの下。PCの大きなエリアで見るとサイドバーに表示されます^^

    • #52636
      hide
      ゲスト

      ご返信ありがとうございます。

      ※ウィジェットは幅の狭いブラウザでみれば関連記事・コメントなどのmainエリアの下。PCの大きなエリアで見るとサイドバーに表示されます^^

      ご説明不足ですみません。
      “サイドバー”の関連記事・コメントなどではなく、”関連記事下”に設置したカテゴリやタグのウィジェットタイトルをカスタマイズしたいです。

      完全レスポンシンブにチェックを入れていないため、スマホ表示でもサイドバーが記事下にくることがなく、それを補うために記事下にカテゴリやタグのウィジェットを追加しております。

      お手数おかけしてすみません。

    • #52651
      アバター画像わいひら
      キーマスター

      ウィジェットごとに生成される「ウィジェットID」をCSSセレクタ反映させてスタイル指定すればできるかと思います。
      こんなやつ。
      <aside id="text-5"
      こんな感じでCSSを書きます。

      #sidebar #text-5 h3 {
          font-size: 1,2em;
      }

      IDを調べるには、ソースコードを見るか、デベロッパーツールを利用してみてください。
      ※利用状況に応じてIDが割り振られるので、IDは自身で調べる必要があります。

    • #52709
      hide
      ゲスト

      ご返信ありがとうございます。

      #sidebar #text-5 h3 {
      font-size: 1,2em;
      }

      こちらにウィジェットID(#tag_cloud-6)を指定してやってみましたが、反応しませんでした。

      こちらでやると、タイトル以外の部分も指定されてしまいましたが、関連記事したのタグすべてにcssが反映されました↓↓↓

      #widget-under-related-entries #tag_cloud-6

      上のcssにヒントがあると色々試行錯誤してみましたが、タイトルのみの指定ができなかったです。

      何度もお伺いして申し訳ございませんが、解決策があればご教授いただきたいです。

    • #52712
      アバター画像わいひら
      キーマスター

      案内にもあるように、ページのURLを公開していただければ、書くコードが正確にわかるかと思います。

      ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

    • #52717
      hide
      ゲスト

      ご返信ありがとうございます。

      すみません、こちらです↓

      http://ima-present.com/30a322

      こちらのカテゴリーから探す、タグから探すの部分です。
      よろしくお願い致します。

    • #52720
      かうたっく
      ゲスト
      #under-entry-body .widget-under-related-entries {
        font-size: 1.2em !important;
      }

      これで記事下にあるウィジェットのタイトルは反映されますが、font-sizeなどcssで指定する場合、優先順位が強いので!importantをつけてます^^;
      たとえばカスタムCSSなどインラインで指定されてませんか?

      カスタムCSSに書くなら、font-size: 2em; で平気かとおもわれます^^
      これで反映しなければ、キャッシュを切るとかですかねぇ・・

    • #52729
      アバター画像わいひら
      キーマスター

      関連記事下のタイトルをまとめて指定するなら、こんな感じでいけるかと思います。

      #under-entry-body .widget-under-related-entries-title {
          font-size: 2em;
      }

      フォントサイズは、自前で調節してください。

    • #52740
      hide
      ゲスト

      かうたっくさん、わいひらさん
      ご返信ありがとうございます。

      お二方にご教授いただいたおかげで無事にできました!
      ありがとうございました。

      これからもsimplicity2を利用させていただきます。

9件の返信スレッドを表示中
  • トピック「ウィジェットタイトルのカスタマイズについて」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)