WordPressテーマSANGOの質問

記事一覧のタイトル欄の背景色の変更

アバター
EO

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

トップの記事一覧のページについてです。
投稿記事のサムネイルの下に投稿日時とタイトルが記載される箇所があるかと思います。
その箇所の背景を白ではなく他の色に変更する方法はありますでしょうか?

お手数をおかけいたしますが、ご教示のほどよろしくお願いいたします。

色の設定をする
色の設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2020/09/09

お世話になっております。記事一覧のカードの背景色を変えたいということでしょうか。
以下のCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS] もしくは子テーマのstyle.cssに貼り付けることで、好きな背景色に変更できます。

.cardtype__article {
    background: #色コード;
}

よろしくお願いします。

アバター
EO
2020/09/09

頂いたCSSを入力することで解決できました。
早々にご返信いただきありがとうございます!

別の質問もこちらでお伺いしてもよろしいでしょうか?
サイドバーにサイト内検索を設定しているのですが、表示がおかしくなってしまいました。
(サイト内検索の表示が2行になっており、虫眼鏡のマークが下の行に表示されています。)
こちらの原因などおわかりになりますでしょうか?

お手数をおかけいたしますがご確認のほどよろしくお願いいたします。

サルワカくん
サルワカくん
2020/09/09

検索フォームのデザイン崩れについてはSANGO v2.0.7での変更による影響だと思います。
こちらに解決策が書かれているのでご一読いただければ幸いです。
https://saruwakakun.com/sango/wordpress55-sango-v206#3_CSSHTML
よろしくお願いします。

アバター
EO
2020/09/09

ご返信いただきありがとうございます。
頂いたURLを拝見したのですが、初心者のため理解するのが難しくもう少し詳しくお聞きしたく存じます。

現在テーマはPORIPUを使っており、searchform.phpの箇所は下記の記載がされていました。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
  <div>
    <input type="search" id="s" class="searchform__input" name="s" value="" placeholder="検索" />
    <button type="submit" id="searchsubmit" class="searchform__submit"><?php fa_tag("search","search",false) ?></button>
  </div>
</form>

そして、SANGOのsearchform.phpの箇所は下記の記載となっていました。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
  <div>
    <input type="search" id="s" class="searchform__input" name="s" value="" placeholder="検索" />
    <button type="submit" id="searchsubmit" class="searchform__submit"><?php fa_tag("search","search",false) ?></button>
  </div>
</form>

この場合、どの箇所をどのように変更すればよいのでしょうか?
お手数をおかけし申し訳ございませんがご確認のほどよろしくお願いいたします。

サルワカくん
サルワカくん
2020/09/09

あれれ?
PORIPU内のsearchform.phpは本当にそのようになっていますか?

サイトを拝見する限り、class="searchform__input"class="searchform__submit"といったクラス名の指定がPORIPU側のsearchform.phpには存在しない気がするのですが・・・。
なお、キャッシュプラグインを使っている場合は、カスタマイズがすぐに反映されるように一時的にオフにしていただければと思います。

アバター
EO
2020/09/09

大変申し訳ございません!
PORIPUの方はこちらの記載でした。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<input type="search" placeholder="サイト内検索" id="s" name="s" value="" />
<button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
</button>
</div>
</form>

サルワカくん
サルワカくん
2020/09/09

それであれば、PORIPUのsearchform.phpを開き、inputタグにclass="searchform__input"、buttonタグにclass="searchform__submit"を追加すればOKだと思います!

アバター
EO
2020/09/09

ありがとうございます!
無事、元通りとなりました。

本当にありがとうございます!