WordPressテーマSANGOの質問

細かなカスタマイズがしたい

アバター
ばなな

お世話になっております。いくつか細かなカスタマイズについてお聞きしたいことがあり、過去の質問で探しても見当たらなかったので質問させていただきました。

①色の設定で背景色を設定したのですが、パンくずリストの背景の色(スマホ表示)・アイキャッチ画像下の「 〈 SHARE 」をタップすると表示される画面の全体的な背景の色がSANGOに元から設定されているデフォルトの色のままで、細かいですが気になるので変更できるコードがあれば教えてほしいです。

②コンテンツ下のシェアボタンの \ SHARE /というタイトルの色だけを変えるコードを教えてほしいです。よくある質問に記載されていた文言を変えるコードから色を変えようとしたのですが上手く反映されなかったので…

③検索ボタン内の「 検索 」という文字やヘッダー検索ボタン上の「 キーワードで検索 」という文字を削除したり変更したいです。また、ヘッダー検索ボタンのアイコンカラーがグレーなので色を変えたいです。

④サイドバーやハンバーガーメニューにカスタムHTMLを使ってボタンを設置したのですが、タイトルを設定するとタイトルとボタンがくっついて表示されてしまいます。(ボタン上の空白がない状態)解決策ありましたら知りたいです。

たくさん質問してしまい申し訳ありません。お答えできる範囲でいいので、教えてくださると助かります。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/07/07

カスタマイズしたい部分が多い場合、Chrome検証機能の使い方(下記リンク先参照)や簡単なCSSの書き方を覚えた方が早いと思います。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

一度使い方がわかれば、ほとんどの部分のスタイルをご自身で自由に変更できるようになります。


ぱんくずリストの色を変更する

#breadcrumb {
  background: #背景色の色コード;
  color: #文字色の色コード;
}

シェアボタンモーダルが開いたときの背景色を変更する

#fab__contents {
  background: #背景色の色コード;
}

SHAREのテキストと両端の線の色を変更する

.sns-btn__title {
  color: #文字色の色コード;
}

.sns-btn__title:before, .sns-btn__title:after {
  background: #線の色コード;
}

ヘッダー検索ボタンのアイコン色を変更する

.header .header-search__open {
  color: #色コード;
}

ヘッダーの検索モーダルの「キーワードで検索」という文言を変更

こちらもCSSの追加で変更可能です。

.header-search__modal .searchform:before {
  content: "好きなテキスト";
}

検索ボタン内の「検索」という文字やヘッダー検索ボタン上の「キーワードで検索」という文字を削除したり変更したい

→ 検索フィールドの「検索」という文字を変えるには、子テーマでsearchform.phpを上書きする必要があります。(searchform.phpを見てみると「検索」という部分がすぐに見つかると思います)
子テーマでテンプレートファイルを上書きする方法はWordPressで共通なので、下記のようなページを参考に行ってみると良いと思います。
https://nyaman.net/customization-file-no-overwrite

サイドバーやハンバーガーメニューにカスタムHTMLを使ってボタンを設置したのですが、タイトルを設定するとタイトルとボタンがくっついて表示されてしまいます。(ボタン上の空白がない状態)解決策ありましたら知りたいです。

→余白を入れることについては、基本的なCSSやHTMLで実現可能なのでご自身で調べてみてください。

よろしくお願いします。

アバター
ばなな
2020/07/09

丁寧に教えていただきありがとうございます。自分でも少しずつHTMLやCSSを勉強していきます。

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

ご理解いただきありがとうございます。
よろしくお願いします。