Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
アコーディオンにリンクしたい
 
通知
すべてクリア

アコーディオンにリンクしたい

5 投稿
3 ユーザー
2 Likes
596 表示
momo-chan
(@momo-chan)
投稿: 46
メンバー
Topic starter
 

いつもお世話になっております

モバイルでの視認性を高めたいと思い

アコーディオンブロックを活用しています

 

ページ内リンクで

アコーディオンブロックへリンクする設定ができれば

より読者の負担が減るものと考えています

 

アコーディオンのタイトル部分にHTMLアンカーが設定できるように調整いただければ幸いです

 

 

 

現状、アコーディオンブロック内のテキストにはHTMLアンカーを設定できますが

アコーディオンブロックのタイトル部分にはHTMLアンカーの設定ができない仕様のようです

また、ブロック内のテキストにHTMLアンカーを設定した場合

リンク先が先のブロックへずれて表示されてしまいます

 

ご検討いただければ幸いです

 

 

 

 

 
投稿済 : 14/06/2023 9:52 am
momo reacted
かんた
(@swell_mania)
投稿: 591
Https://webrent.xsrv.jp/
 

SWELLではなくWordPressコアのWP_HTML_Tag_Processorを使えば、アコーディオンブロックのsummaryでもdetailsでも好きな方にid属性を設定できます。

一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。

 
投稿済 : 14/06/2023 12:04 pm
momo-chan
(@momo-chan)
投稿: 46
メンバー
Topic starter
 

@swell_mania さん

ご回答ありがとうございます

SWELLとアコーディオンブロック以外はまるで未知の言葉に感じるくらいレベルの低い私・・

ひとつづつ調べて理解してみようと思います

 
投稿済 : 14/06/2023 7:25 pm
His-
 His-
(@his)
投稿: 52
メンバー
 

@momo-chan 

とりあえずリンクさせたい…という事であれば以下のコードを、カスタマイズ > 高度な設定 > 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
momo-chan
(@momo-chan)
投稿: 46
メンバー
Topic starter
 

@his さん

アドバイスいただきありがとうございます

コードをいじることにアレルギーがあるので今すぐの実践は無理なんですが

徐々に挑戦していこうと思います

 
投稿済 : 14/07/2023 10:16 am
momo reacted
共有: