[ 解決済 ] パンくずリストのホームアイコンを非表示にしたい

[Hokoku_kinzoku]

■ 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.

[Chiaki K]

こんにちは。
一番シンプルな書き方は以下になるかと思います。お試しくださいませ。

.breadcrumb-list i{ display: none; }

サイトの全てのページに反映されたい場合は、

• 外観 ＞ カスタマイズ ＞ 追加CSS

または

• ExUnit ＞ CSSカスタマイズ

のいずれかにCSSを記述してみてください。すでにご存知でしたら恐れ入ります。

[Hokoku_kinzoku]

◯外観 ＞ カスタマイズ ＞ 追加CSS

◯ExUnit ＞ CSSカスタマイズ

両方とも、
.breadcrumb-list i{ display: none; }

をCSSを記述してみましたが、やはりパンくずリストのホームアイコンを非表示されませんでした。

[Chiaki K]

• 一番最初に書き込んでいただいていたCSSの @media screen and (max-width: 1200px) {...} は無しで記述していらっしゃいますでしょうか。
• 再読み込みやキャッシュのクリアを試していただいても同じでしょうか
• すでにパンくずに関連するCSSの記述が邪魔している可能性はありますでしょうか

上記のいずれも当てはまらない場合、具体的なURLをお知らせいただけると回答しやすくなりそうです。

[Hokoku_kinzoku]

上記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年前にHokoku_kinzokuが編集しました。

[石川＠Vektor,Inc.]

i タグが svg になる設定が入っているみたいです

.breadcrumb-list__item svg{
	display:none;
}

プラグインか何ら化の設定の影響で私の開発環境と違うHTMLが出力されるようになっていますので、
下記参照の上状況に応じて調整してみてください。

できる！CSSカスタマイズ

[対馬 俊彦]

ご質問者のサイトは [カスタマイズ] → [Lightning Font Awesome] で

6 SVG with JS (非推奨)

を指定しているようです。

この指定を

6 Web Fonts with CSS

に変更すれば、Chiaki K さんが回答してくれた CSS でアイコンを表示にできると思いますし、
こうした方が (非推奨) を使わないのでよさそうです。

[Hokoku_kinzoku]

石川＠Vektor,Inc.さん
対馬さん

お二方のやり方で設定すると、無事ホームアイコンを非表示にできました。
ありがとうございます！

また石川さんがおっしゃられていたように、プラグインか何ら化の設定の影響があったようで、関係しそうなプラグインを削除すると、無事Chiaki KさんのCSS設定でホームアイコンを非表示にすることができました。

お助けいただき、本当にありがとうございました。

[投稿者]

投稿