田島 佑清 以下の手順に従って、BASEの特定のカテゴリー一覧ページにバナーを表示するためのHTML編集方法をご紹介します。このスクリプトは、ページ内のカテゴリー名に基づいて、指定したカテゴリーにバナーを表示するものです。
スクリプトの動作概要
このJavaScriptコードは、ページに表示されているカテゴリー名（例：Tシャツ）を取得し、そのカテゴリー名が一致した場合、指定したコンテナ内にバナーを挿入します。
手順
- HTML構造の確認
バナーを挿入したい場所に以下のようなHTML構造を追加します。この部分にバナーが動的に挿入されます。
<div id="content-container">
<!-- JavaScriptでバナーがここに挿入されます -->
</div>- JavaScriptコードの追加
次に、以下のスクリプトをHTMLの<head>タグ内、または</body>タグの直前に追加してください。
<script>
window.onload = function() {
// h1タグ内のカテゴリー名を取得
var categoryElement = document.querySelector('.page_title');
console.log(categoryElement);
// バナー要素を挿入するコンテナを取得
var container = document.getElementById('content-container'); // バナーを挿入したい場所の親要素
console.log(container);
// カテゴリー名の要素が見つかった場合
if (categoryElement && container) {
var categoryName = categoryElement.innerText.trim(); // カテゴリー名を取得し、余計な空白を削除
console.log("Category Name:", categoryName); // カテゴリー名をコンソールに表示
// カテゴリー名に基づいてバナーを挿入するか決定
if (categoryName === "Tシャツ") {
// "Tシャツ"カテゴリーの場合、バナーをHTMLとして挿入
container.insertAdjacentHTML('beforeend', `
<div id="category-banner">
<img src="path/to/tshirt-banner.jpg" alt="Tシャツバナー" />
</div>
`);
console.log("Banner inserted.");
} else {
// それ以外のカテゴリーではバナーを表示しない
console.log("No banner inserted for this category.");
}
} else {
console.error("カテゴリー名またはバナーコンテナが見つかりませんでした。");
}
};
</script>スクリプトの詳細説明
- カテゴリー名の取得: ページの
h1タグまたはクラス名.page_titleを持つ要素からカテゴリー名を取得します。 - バナー挿入用のコンテナ:
id="content-container"を持つ要素にバナーを挿入します。 - バナーの挿入: カテゴリー名が
Tシャツの場合、指定されたバナー画像を挿入します。バナーはinsertAdjacentHTMLを使用してHTMLとして挿入されます。 - その他のカテゴリー:
Tシャツ以外のカテゴリー名の場合は、バナーは表示されません。
注意点
path/to/tshirt-banner.jpgを、実際のバナー画像のURLに置き換えてください。- カテゴリー名を取得するHTMLタグが
h1またはクラス名.page_titleであることを確認してください。 - console.logは、動作確認したら消してください。
確認作業
コードを追加・保存した後、該当するカテゴリーのページをロードして、バナーが正しく表示されるか確認してください。