トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
Topic starter
いつもお世話になっております
モバイルでの視認性を高めたいと思い
アコーディオンブロックを活用しています
ページ内リンクで
アコーディオンブロックへリンクする設定ができれば
より読者の負担が減るものと考えています
アコーディオンのタイトル部分にHTMLアンカーが設定できるように調整いただければ幸いです
現状、アコーディオンブロック内のテキストにはHTMLアンカーを設定できますが
アコーディオンブロックのタイトル部分にはHTMLアンカーの設定ができない仕様のようです
また、ブロック内のテキストにHTMLアンカーを設定した場合
リンク先が先のブロックへずれて表示されてしまいます
ご検討いただければ幸いです
投稿済 : 14/06/2023 9:52 am
momo reacted
SWELLではなくWordPressコアのWP_HTML_Tag_Processorを使えば、アコーディオンブロックのsummaryでもdetailsでも好きな方にid属性を設定できます。
一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。
投稿済 : 14/06/2023 12:04 pm
Topic starter
投稿済 : 14/06/2023 7:25 pm
とりあえずリンクさせたい…という事であれば以下のコードを、カスタマイズ > 高度な設定 > bodyタグ終了直前に出力するコードにコピペしてお試しください。
上から順にacc_1, acc_2, ...とIDが振られるようになってます。
もし実装された場合には、こちらは不要なので削除してください。
<script>
// アコーディオンにIDを付与
const accItems = document.querySelectorAll('.swell-block-accordion__item');
accItems.forEach((accItem, index) => {
const accTitle = accItem.querySelector('.swell-block-accordion__title');
const accId = 'acc_' + (index + 1); // 順番にIDを割り当て
accTitle.setAttribute('id', accId);
});
</script>
お問い合わせ先▶︎https://blog-mi.com/contact/
投稿済 : 23/06/2023 12:50 pm