【無料情報】アコーディオン付き広告表示スクリプト
プレーンな構造プラスアコーデオン - 広告表示の実装方法
今回は、前章で紹介したHTMLの基本構造に、実際のプロジェクトで役立つ機能をさらに追加していきましょう。今回は「アコーデオンメニュー」を活用して、広告の表示を工夫します。このメニューは、ユーザーがタイトルをクリックすると詳細がスムーズに表示され、もう一度クリックすると折りたたまれる仕組みです。
一見、シンプルなデザインですが、こういったインタラクティブな要素を追加することで、閲覧者により魅力的で使いやすい体験を提供することができます。情報が多すぎると視覚的に圧迫感を与えることがありますが、アコーデオンを使えば、重要な情報を必要に応じて表示でき、画面をスッキリさせることができます。これにより、広告や商品情報を効果的に伝えつつ、見やすさを損なうことなく表示することが可能です。
また、このアコーデオンメニューの良いところは、初めて実装する方でも比較的簡単に挑戦できる点です。基本的なHTMLとCSS、そして少しのJavaScriptを組み合わせるだけで、洗練された動きのあるページを作成できます。手順もシンプルで、HTMLの構造を理解した上で少しずつ手を加えていくことで、自分なりのデザインや機能を追加してカスタマイズすることができるのです。
例えば、広告のタイトルをアコーデオンの「ヘッダー」として使い、その下にクリックで開く「コンテンツ」部分に広告の詳細やリンク、画像を表示させます。これにより、情報量の多い広告もコンパクトにまとめられ、ユーザーがクリックしたときだけ詳細を表示させる仕組みを簡単に作れます。
ぜひこの機会に、アコーデオンメニューの仕組みを使って、自分の広告や商品情報をスマートに見せる方法に挑戦してみましょう。最初は難しく感じるかもしれませんが、一度動かしてみると、その効果に驚くはずです。
アコーデオンメニューの基本構造
まず、アコーデオンメニューを作るための基本的なHTML構造を見ていきます。ここでは、各広告アイテムを1つのアコーデオン項目として表示し、クリックするとその詳細（画像とリンク）が見られる仕組みを取り入れています。
html
<div class="accordion" id="adAccordion"></div>この部分がアコーデオンメニューのコンテナです。コンテナは、動的に生成される複数のアコーデオン項目を保持します。アコーデオン項目は、JavaScriptを使ってAPIから取得したデータを基に作られ、**広告タイトルを表示する「ヘッダー」**と、**詳細情報を表示する「コンテンツ」**の2つの部分で構成されています。
CSSによるアコーデオンのスタイル設定
次に、見た目を整えるために使用するCSS（スタイルシート）を見てみましょう。デザイン的には、シンプルかつユーザーが操作しやすいように設定しています。特にヘッダー部分は、クリックできることが明確にわかるようなデザインにしています。
css
<style>
.accordion {
width: 100%;
max-width: 800px;
margin: 20px auto;
}
.accordion-item {
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
}
.accordion-header {
background-color: #ff69b4;
color: white;
padding: 15px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.accordion-content {
display: none;
padding: 15px;
background-color: #fff;
border-top: 1px solid #ccc;
}
</style>
.accordion: アコーデオン全体のスタイルを定義しています。最大幅800pxで、画面中央に寄せるためのレイアウトです。
.accordion-item: 各アイテム（広告項目）のコンテナです。背景色や枠線、角の丸みを設定し、見やすくしています。また、overflow: hidden; により、コンテンツが開閉される際に余分な部分が表示されないようにしています。
.accordion-header: 広告のタイトル部分（ヘッダー）で、クリック可能なスタイルにしています。背景をピンク色に設定し、視認性を高めています。cursor: pointer; を使って、クリックできることが分かるようにしています。
.accordion-content: 広告の詳細部分です。初期状態では表示されず（display: none;）、ユーザーがヘッダーをクリックした時に表示されます。詳細情報として商品画像やリンクボタンを表示します。
JavaScriptでアコーデオンを動作させる
ここからは、JavaScriptを使ってアコーデオンメニューを動かす方法を説明します。今回は、DMM APIを使って商品データを取得し、それを元にアコーデオンメニューを動的に生成します。この部分が、広告や商品情報を自動で取得・表示する重要なポイントです。
javascript
<script>
// APIのエンドポイント
const apiURL = 'APIエンドポイントのURL';
// APIからデータを取得する関数
async function fetchDMMData() {
try {
const response = await fetch(apiURL);
const data = await response.json();
const items = data.result.items;
// アコーディオンメニューを作成
const adAccordion = document.getElementById('adAccordion');
items.forEach((item) => {
// アコーディオン項目を作成
const accordionItem = document.createElement('div');
accordionItem.className = 'accordion-item';
// アコーディオンのヘッダー（商品タイトル）
const accordionHeader = document.createElement('div');
accordionHeader.className = 'accordion-header';
accordionHeader.textContent = item.title;
accordionHeader.addEventListener('click', function () {
const content = this.nextElementSibling;
content.style.display = content.style.display === 'block' ? 'none' : 'block';
});
// アコーディオンのコンテンツ（商品詳細）
const accordionContent = document.createElement('div');
accordionContent.className = 'accordion-content';
accordionContent.innerHTML = `
<img src="${item.imageURL.large}" alt="${item.title}">
<a href="${item.affiliateURL}" class="cta-button" target="_blank">詳細を見る</a>
`;
accordionItem.appendChild(accordionHeader);
accordionItem.appendChild(accordionContent);
adAccordion.appendChild(accordionItem);
});
} catch (error) {
console.error('データの取得に失敗しました:', error);
}
}
// ページ読み込み時にデータを取得
document.addEventListener('DOMContentLoaded', fetchDMMData);
</script>
fetchDMMData: この関数は、APIを使って商品データを取得し、それを元にアコーデオンメニューを生成します。
accordionHeader: 商品タイトル部分です。ユーザーがクリックするたびに次の要素である詳細部分（accordionContent）が表示されるようになっています。これを**addEventListener**で監視し、クリックで表示と非表示を切り替えます。
accordionContent: 商品の詳細情報です。画像と「詳細を見る」というボタンが表示され、そのボタンをクリックすると外部リンクに飛びます。
メリット・デメリット
メリット
省スペース: アコーデオンメニューは情報をコンパクトにまとめられ、ユーザーが必要な情報だけを展開して見ることができます。画面がスッキリし、複数の広告を効率よく表示するのに適しています。
使いやすさ: インタラクティブな要素があるため、ユーザーがクリックして広告や商品の詳細を見るといった自然な動きが可能です。
デザイン性: シンプルかつ柔軟にカスタマイズが可能で、サイトのデザインを損なうことなく実装できます。
デメリット
JavaScript依存: このアコーデオンメニューはJavaScriptに依存しているため、JavaScriptを無効にしているブラウザでは動作しません。SEO的にも、JavaScriptで生成されたコンテンツは検索エンジンにインデックスされにくい場合があります。
表示速度の影響: APIから商品データを取得して表示するため、データ量が多い場合や通信環境が悪いと、表示速度が遅くなる可能性があります。
注意点と掲載不可なシチュエーション
通信エラーへの対応
APIのデータ取得に失敗した場合、ページが表示されないことがあります。そのため、データ取得が失敗した際にはエラーメッセージを表示するなどの対応が必要です。JavaScriptが動かない環境
一部のユーザーは、セキュリティ設定などでJavaScriptを無効にしている場合があります。そうした場合には、アコーデオンメニューが機能しないため、代替手段を検討する必要があります。コンテンツの量
多くの広告や商品をアコーデオンメニューに詰め込みすぎると、ユーザーにとって使いづらいサイトになる可能性があります。あまりに多くの項目を一度に表示せず、適切な数に調整することが重要です。
アコーデオンメニュー以外の選択肢
アコーデオンメニューは、情報をコンパクトにまとめる優れた手法ですが、他にも広告や商品情報を効果的に表示するさまざまな方法があります。目的やサイトのデザインに応じて、これらの選択肢を組み合わせることで、ユーザー体験を向上させることが可能です。以下に、それぞれの手法を詳しく解説します。
タブメニュー
タブメニューは、複数のカテゴリや情報を整理して表示するのに適した手法です。ページ内にタブを設置し、ユーザーがタブをクリックすると、その内容が切り替わる仕組みです。例えば、商品ページで「概要」「詳細」「レビュー」といったタブを用意すれば、各タブごとに異なる情報を分けて表示することができます。これにより、複数の内容を1ページに収めながら、画面が散らかることを防ぎ、ユーザーにとっても探しやすい設計になります。また、タブは瞬時に切り替わるため、ページの再読み込みが不要な点も大きな利点です。特に、商品をカテゴリごとにまとめたい場合や、詳細情報が多い商品を扱うサイトで有効です。
モーダルウィンドウ
モーダルウィンドウとは、ページ内で別のウィンドウを表示し、詳細な情報を表示する手法です。ユーザーがボタンやリンクをクリックすると、画面上にポップアップが現れ、その中に商品詳細や広告情報が表示されます。これにより、ユーザーはページ遷移することなく、元のページを維持したまま追加の情報を確認できます。ページを離れることなく、商品を詳しく知りたい場合に便利で、ユーザーの操作感を損なうことなく、スムーズな閲覧が可能になります。また、モーダルウィンドウはデザインの自由度が高いため、商品の詳細な画像や動画を含むリッチなコンテンツを簡単に表示できる点も魅力です。
ホバーボックス
ホバーボックスは、ユーザーがマウスを商品画像や広告の上に置いた際に、詳細情報や追加の画像が表示される仕組みです。この方法は、商品情報を目立たせたい時や、視覚的に動きを持たせることでユーザーの興味を引きたい場合に有効です。例えば、商品画像の上にマウスを乗せると、サムネイルが拡大されたり、価格や商品の説明が表示されたりします。この手法は、静的な画像表示に比べて動的な効果を持たせることで、閲覧者の注目を集めやすく、インタラクティブな体験を提供します。また、ページ全体に余分なスペースを使わずに、必要な情報を表示できる点が強みです。
その他の選択肢
さらに、リスト型レイアウトやカルーセル（スライダー）など、商品情報の表示方法には多様なアプローチがあります。リスト型は商品を縦に並べて表示し、商品数が多い場合に適しており、カルーセルは複数の商品をスライドで表示し、視覚的なインパクトを強調したい場合に向いています。これらの方法を活用することで、ユーザーにとって最適な閲覧体験を提供できるでしょう。
これらの手法を組み合わせたり、サイトの目的に応じて使い分けることで、より多様なユーザー体験を提供でき、広告や商品の効果的な表示を実現することができます。どの手法を採用するかは、商品の特性やターゲットとなるユーザー層に応じて選択するのがポイントです。
これまで紹介してきた様々な広告表示方法を取り入れながら、さらに効率的にDMMの商品を紹介したいとお考えの方には、**「DMM API アドレス作成ツール」**がおすすめです。このツールを使えば、専門的な技術知識がなくても、簡単にアフィリエイトリンクを作成することができます。複雑なAPI設定をわかりやすく簡略化しており、直感的に操作ができるため、時間をかけずにスムーズな収益化を実現できます。アフィリエイトの成果を最大化するために、ぜひ試してみてください！
いいなと思ったら応援しよう！
