[ 解決済 ] パンくずリストのホームアイコンを非表示にしたい
[ 解決済 ] パンくずリストのホームアイコンを非表示にしたい
- このトピックには7件の返信、4人の参加者があり、最後にHokoku_kinzokuにより1年、 6ヶ月前に更新されました。
-
投稿者投稿
-
2023年4月29日 2:04 PM #75390
■ WordPress のバージョン
6.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.8.6■ Pro Unit のバージョン
0.24.1■ スキンの種類
Origin III■ 期待する動作
カスタマイズの質問で申し訳ありません。パンくずリストの先頭にあるホームアイコンを非表示にしたいです。
■ 自分で試した事
固定ページのカスタムCSSで自分なりにカスタマイズをしてみたのですが上手くいきません。@media screen and (max-width: 1200px) {
.breadcrumb-item > .fas{
display: none;
}}■ 症状が発生するブラウザ
Safari,Chrome■ 実際の症状
どうしてもパンくずリストの先頭にホームアイコンがついてしまいます。非表示にしたいです。
Attachments:
You must be logged in to view attached files.2023年4月29日 4:14 PM #75396
Chiaki Kモデレーターこんにちは。
一番シンプルな書き方は以下になるかと思います。お試しくださいませ。.breadcrumb-list i{ display: none; }
サイトの全てのページに反映されたい場合は、
- 外観 > カスタマイズ > 追加CSS
または
- ExUnit > CSSカスタマイズ
のいずれかにCSSを記述してみてください。すでにご存知でしたら恐れ入ります。
2023年4月29日 4:45 PM #75398◯外観 > カスタマイズ > 追加CSS
◯ExUnit > CSSカスタマイズ
両方とも、
.breadcrumb-list i{ display: none; }をCSSを記述してみましたが、やはりパンくずリストのホームアイコンを非表示されませんでした。
2023年4月29日 5:58 PM #75402
Chiaki Kモデレーター- 一番最初に書き込んでいただいていたCSSの
@media screen and (max-width: 1200px) {...}
は無しで記述していらっしゃいますでしょうか。 - 再読み込みやキャッシュのクリアを試していただいても同じでしょうか
- すでにパンくずに関連するCSSの記述が邪魔している可能性はありますでしょうか
上記のいずれも当てはまらない場合、具体的なURLをお知らせいただけると回答しやすくなりそうです。
2023年4月30日 8:43 AM #75406上記2点は試しましたが、変化なしでした。
3点目は、.breadcrumb-list i{ display: none; }のみを固定ページの追加CSSに記述しましたが変化なしでした。
ただ、すでに記述しているパンくずに関連するCSSが邪魔している可能性があるかもしれません。
なので、現在記述している固定ページの追加CSSと、URLを下記に記述いたしました。よろしくお願い致します。
_
.breadcrumb-list i{ display: none; }
@media (min-width: 992px) {
.page-header {
height: 200px;
}
}.c-breadcrumb a {
display: flex;
align-items: center;
font-size: 12px;
font-size: .75rem;
line-height: 1.667;
font-family: TazuganeGothicStdN-Regular,sans-serif;
color: #f0f2f2;
}
.breadcrumb .fa-home {
display: none; /*非表示*/}
.c-breadcrumb a:after {
color:#989898;
margin-left: 0px;
font-size: 12px;
font-size: .75rem;
line-height: 1.667;
content: “>”;
}.breadcrumb {
color:#989898;
text-align: left;
align-items: left;
padding: 5px 0 5px 38px;
background-color: #f0f2f2;
margin: 0;
padding: 0;
list-style: none;}
.breadcrumb li {
display: inline;/*横に並ぶように*/
list-style: none;
font-weight: ;/*太字*/
}.breadcrumb li:after {/* >を表示*/
content: ‘>’;
padding: 0 0.2em;
color: #989898;
}.breadcrumb li:last-child:after {
content: ”;
}.breadcrumb li a {
text-decoration: none;
color: #989898;/*色*/
}.breadcrumb li a:hover {
text-decoration: underline;
}
}
_URL:
https://www.hokokukinzoku.co.jp/faq?preview_id=140&preview_nonce=642264de4d&preview=true- この返信は1年、 7ヶ月前にHokoku_kinzokuが編集しました。
2023年4月30日 7:23 PM #75420i タグが svg になる設定が入っているみたいです
.breadcrumb-list__item svg{ display:none; }
プラグインか何ら化の設定の影響で私の開発環境と違うHTMLが出力されるようになっていますので、
下記参照の上状況に応じて調整してみてください。2023年5月1日 10:50 AM #75434ご質問者のサイトは [カスタマイズ] → [Lightning Font Awesome] で
6 SVG with JS (非推奨)
を指定しているようです。
この指定を
6 Web Fonts with CSS
に変更すれば、Chiaki K さんが回答してくれた CSS でアイコンを表示にできると思いますし、
こうした方が (非推奨) を使わないのでよさそうです。2023年5月1日 12:54 PM #75441石川@Vektor,Inc.さん
対馬さんお二方のやり方で設定すると、無事ホームアイコンを非表示にできました。
ありがとうございます!また石川さんがおっしゃられていたように、プラグインか何ら化の設定の影響があったようで、関係しそうなプラグインを削除すると、無事Chiaki KさんのCSS設定でホームアイコンを非表示にすることができました。
お助けいただき、本当にありがとうございました。
-
投稿者投稿
- このトピックに返信するにはログインが必要です。