ウィジェットをサイドバー以外の場所で使用した時タイトルが表示されない

Simplicityの特徴 › フォーラム › Simplicityについての質問 › ウィジェットをサイドバー以外の場所で使用した時タイトルが表示されない

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

      お世話になっております。
      Simplicityの最新版を使わせて頂いております。

      各ウィジェットをサイドバーにて表示させる場合、問題ないのですが、
      それ以外の場所、たとえば「投稿本文下」や「投稿SNSボタン下」にて表示させようとすると、
      ウィジェットのタイトルが表示されません。

      当サイトやGoogleで調べましたが、解決方法が見つかりませんでしたので
      こちらに質問させて頂きました。

      何卒、よろしくお願いいたします。

    • #44357
      hidekichi
      ゲスト

      おそらくcssでdisplay: noneになってるだけかと思うので、display: blockに変えれば見えるようになると思います。

      firefoxやchrome等で、該当箇所あたりを右クリックして「要素を調査」とか「検証」を押すとデベロッパーツールが開きます。で、該当箇所のセレクタを調べて(たいてい見出しだと思うのでh3とかh4とか、その他諸々かもしれません)を左側のhtmlで選択クリックすると、右側のプロパティにその要素のスタイルが表示されます。

      display: noneであるならば、

      そのセレクタ {
        display: block;
      }

      という感じで、子テーマstyle.cssに書けば表示されるかと思います。これで直らない場合は、問題が出てるページのアドレスを公開してください。

    • #44359
      KenKen
      ゲスト

      hidekichi様

      早速のお返事誠に有難うございます。

      チェックしましたが、「display: block」になっています。
      申し訳ございませんが、サイトURLは公開できませんので、
      ウィジェットの使用は諦めます。

    • #44360
      hidekichi
      ゲスト

      多分チェックしたところが間違ってます。h2とかかなぁと思ったら案の定divでした。
      本文下に人気記事を入れた場合は、

      .widget-under-article .widget_popular_ranking .main-widget-label {
        display: none;
      }

      こんな感じになっているかと思います。何のウィジェットを使うか、どこに入れるかでセレクタは変わるのでここらは何とも言えません。

    • #44361
      KenKen
      ゲスト

      Hidekichi様

      お返事頂きまして有難うございます。

      Simplicityはデフォルト状態で使っていますが、
      その場合でも、ウィジェットを正しく表示させるには
      CSSに何らかの修正を加える必要があるのでしょうか?

      残念ですが、どうやらこれ以上私の手には負えないようです。

    • #44364
      hidekichi
      ゲスト

      Simplicityのデフォルトの状態で、サイドバー以外のウィジェットエリアにあるウィジェットのラベルは非表示になってるんじゃなかろうかと思います。

      なのでラベルの非表示がデフォルトだろうと思うので、それを表示するカスタマイズが必要になります。

      カスタマイズとっても何かしらを書き換えるというのではなく、子テーマを導入して適用した後、子テーマ内にあるstyle.cssに、必要なセレクタとそのプロパティを書き込むだけでcssの変更はできます。
      つまりは、追記でよいので特に難しいことはありません。

      一番難しいと思われるのは、挿入したウィジェットエリアがどこで、目的の要素が何でというのを見つけるということかと思います。ただこれらは今後何かしらをする上で必要になる作業なので、わからないから諦めるもよし、改造したいからやり方を覚えるのも良いかと思います。

      KenKenさんに限らず質問者がどれぐらいの知識とやり方を知っているかは、僕ら回答する側は全くわかりませんので、基本的なことは理解されているという前提で回答してます。やり方がわからないのであれば、何がどうわからないのかを伝えてもらう必要がありますし、ここまでやったがうまくできないというような状態が僕らに伝わらないと、どこをどうすればうまく行くかを説明できません。

      アドレスを公開してくださいというのは、現在のそのサイトの状態を見て、どこをどのようにすれば思うようにできるかを調べるためです。

      ちなみにヒントとしては、

      .widget-under-article .widget_popular_ranking .main-widget-label {
        display: none;
      }

      このスタイルが何を意味しているかというと、

      <div class="widget-under-article">
        <div class="widget_popular_ranking">
          <div class="main-widget-label">ここが見出し(タイトル)</div>
        </div>
      </div>

      こんな感じのhtmlの構造になっているということです。divが他の要素になっているかもしれませんが、何かしらの要素に、それぞれのクラスが入っていて、.main-widget-label(あるいは他のクラスかもしれない)が見出し(ウィジェットのタイトル)が入っていると思われるクラスです。
      ここがdisplay: noneであるため表示できないので、display: blockにすることで表示はできるようになるはずだということです。あわせて、このクラスに対して色やサイズを指定することでスタイルすることもできます。

      これ以前に、子テーマの導入方法や、ftpの使い方がわからないというのであれば、サイドバーの子テーマのダウンロードボタンのリンク等から調べられますし、ftp等の使い方はググればいくらでも解説が出てきます。

      wordpressのファイルのパーミッションが公開・編集可能になっていればwordpress上からも子テーマstyle.cssを編集することも可能です。ただし、何かしらあったときのためにftpで操作する方法を理解されておくほうがよりベターです。

    • #44366
      KenKen
      ゲスト

      Hidekichi様

      丁寧にご説明頂きまして誠に有難うございます。

      以下のサイトは近日中に作成予定のサイトです。
      とりあえず、「テスト投稿」を3つ入れております。

      http://mahorobamall.com/

      こちらはSimplicityの最新版を使っており、
      デフォルト状態です。

      ウィジェットは「[S]新着記事」を「新着記事一覧」というタイトルで
      「投稿本文下」と「投稿SNSボタン下」に入れております。

      しかし、ウィジェットタイトルの「新着記事一覧」が表示されません。
      これはどこが問題なのでしょうか?

      こちらのサイトでよろしければご教示いただけませんでしょうか?
      よろしくお願い申し上げます。

    • #44369
      hidekichi
      ゲスト

      本文下のは、

      .widget-under-article .main-widget-label {
        display: block;
      }

      SNS下のは、

      .widget-under-sns-buttons .main-widget-label {
        display: block;
      }

      で表示されると思いますが、このclass(.main-widget-label)が入っている要素はdivなので、別途スタイルする必要があるかもしれません。例えばfont-sizeや、font-weight、あるいはcolorやその他装飾など。
      どちらのラベルも同じようにスタイルするのであれば、

      .widget-under-article .main-widget-label,
      .widget-under-sns-buttons .main-widget-label {
        display: block;
      }

      としても良いです。色だけ分けたいとかならば、

      .widget-under-article .main-widget-label,
      .widget-under-sns-buttons .main-widget-label {
        display: block;
        font-size: 22px;
      }
      .widget-under-article .main-widget-label {
        color: #f00;
      }
      .widget-under-sns-buttons .main-widget-label {
        color: #00f;
      }

      などのようにしてスタイルすることもできます。

    • #44372
      KenKen
      ゲスト

      Hidekichi様

      お世話になっております。

      お蔭様で無事解決しました。

      この度は丁寧なサポートをして頂きまして、誠に有難うございました。

8件の返信スレッドを表示中
  • トピック「ウィジェットをサイドバー以外の場所で使用した時タイトルが表示されない」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)