WordPressでサイト全体にファビコンを設定すると、ブラウザがそのファビコンをキャッシュに保存してしまうため、下層ディレクトリ内の別サイトにも同じファビコンが表示されることがあります。この記事では、WordPressで設定したファビコンが表示されないよう、下層ディレクトリにあるプレーンなHTMLサイトでファビコンを非表示にする方法を解説します。
なぜWordPressのファビコンが影響するのか？
WordPressでファビコンを設定すると、サイトのHTMLソース内に <link rel="icon" href="..."> タグが追加されます。このファビコン情報がブラウザにキャッシュされていると、同じドメイン内の他のページでもファビコンが表示されてしまうことがあります。そのため、下層ディレクトリで運用しているHTMLサイトがWordPress管理下にない場合でも、ファビコンが影響するケースがあります。
ファビコンを非表示にする方法
プレーンなHTMLサイトでWordPressのファビコンが表示されないようにするためには、下層ディレクトリのHTMLに <link rel="icon" href="data:,"> タグを追加します。このタグは、ブラウザに「ファビコンなし」の設定を明示的に指示するため、上位ディレクトリのWordPressファビコンが影響しなくなります。
実装例
以下のように、HTMLの <head> セクションにファビコンの非表示設定を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLサイトのタイトル</title>
<!-- ファビコン非表示の設定 -->
<link rel="icon" href="data:,">
</head>
<body>
<h1>下層ディレクトリのHTMLサイト</h1>
<p>ファビコンが表示されない設定になっています。</p>
</body>
</html>ポイント
href="data:,"とすることで、ブラウザがファビコン表示を無効化します。- これにより、WordPressサイトのファビコンがHTMLサイトに影響しなくなり、サイト固有の設定が可能になります。
その他の注意点
この方法では、下層ディレクトリ内のHTMLファイルのみファビコンを非表示にするため、WordPressのファビコン設定や他の上位ディレクトリの設定に影響を与えません。また、ブラウザが一時的にキャッシュしたファビコンが表示される場合は、キャッシュをクリアすることで正しい表示が確認できます。
まとめ
WordPressで設定したファビコンが下層ディレクトリのプレーンなHTMLサイトにも影響する場合は、<link rel="icon" href="data:,"> を活用してファビコンを非表示にできます。シンプルなコードの追加で、ディレクトリごとに表示を適切に管理しましょう。
コメント