/** * ギャラリーの表示をカスタマイズするスクリプト * 1. 記事アイテムを8個に制限する * 2. モバイルビュー(767px以下)で2列表示にするCSSを挿入する */ document.addEventListener('DOMContentLoaded', () => { // --- 1. 記事数を8個に制限する --- function limitGalleryItems() { // '.summary-item' クラスを持つすべての記事アイテムを取得 const items = document.querySelectorAll('.summary-item-list.sqs-gallery .summary-item'); // 取得したアイテムをループ処理 items.forEach((item, index) => { // 8番目(インデックスは0から始まるため 0〜7)より後のアイテムを非表示に if (index >= 8) { item.style.display = 'none'; } }); } // --- 2. スマホ表示で2列にするCSSを動的に追加 --- function injectMobileStyles() { // スマホと見なす画面幅の境界(ブレークポイント) const breakpoint = '767px'; // 適用するCSSルール // 画面幅がbreakpoint以下の時に、.summary-item-list.sqs-gallery を2列グリッドにする // (!important は、既存のスタイルを確実に上書きするために使用) const cssRules = ` @media (max-width: ${breakpoint}) { .summary-item-list.sqs-gallery { grid-template-columns: repeat(2, 1fr) !important; } } `; //