この記事を参考に SWELLの機能でショートコードから、カスタムバナーを作りました！
追従する目次の上か下の位置に置きたかったのですが、
完成までかなり遠回りしたので備忘録メモです
追尾する目次の上にカスタムバナーを置きたい
せっかく渾身の記事
理想全部入り！映像制作に特化したデスクツアー2026年1月 を作成したので宣伝したい！
そして、この先はもっと気軽に記事を投稿したい
どシンプルにした現在のレイアウトでは、記事が埋もれてしまう…
何かのきっかけで来ていただいた方に、とりあえずこのデスクツアー記事を見ていただきたい
そこで、追尾目次の上に「バナー画像」を置くことにしました
SWELL公式のこの記事を参考にしました
そもそもショートコードがよくわかっていなかったので、かなり詰みました
バナーにしたい画像のIDを知る方法
今回作成する簡易なバナーに使いたい画像のIDを調べます
すでにメディアライブラリにアップロードしている前提です
もしまだアップしていない場合は、メディアライブラリにアップしてください
- WordPressを開いたら、メディアをクリック
- ライブラリをクリックします
- バナーにしたい画像を選択します
クリックした後、アドレスバーに表示されるURLを確認します
ここにある「item = ####」 の ####が必要な数字です、メモしましょう
私は「さらに詳細を編集」を押していて、数字が出てこない！と焦っていました…
ウィジェットにカスタムHTMLを配置する
ここからは、ウィジェットに追加していきます
WordPress ダッシュボードから、
外観、ウィジェットの順にクリックします
「カスタムHTML」という項目があります
「追尾サイドバー」を一回クリックして開いたら、
「追尾サイドバー」のエリアにドラッグ&ドロップします
私はもともと「目次」をここに追加していました
カスタムHTMLにショートコードを入力する
カスタムHTMLの「内容」の中に、この記事のこの項目 を参考に好きな内容を書き込みます
気をつけたことは、
- 最初と最後が [ ] の かぎかっこでまとまるように
- また、それぞれの項目が半角スペースで区切られるように気をつけました
width（幅）は100%のままにして、
height（高さ）は確認しながら適当に数値を入れました
「保存」「完了」をクリックし、
ページを確認して変になっていなければ完了です！
タイトルを入れると…
この方法だと、
カスタムHTMLにタイトルを入れると
結構デカデカと表示されてしまうので、私はタイトルを入れていません
順番を入れ替える
目次とバナーの順番を入れ替えるには、
追尾サイドバーの中で順番を入れ替えます
ぐいっと上にあげたり下げたりして、好きな方に配置します
確認して完了！
どうやら追尾バナーは、PCのみのようです
スマホ版では、そこまでいらないかな…と思っているのでこれでよしとしました
参考になれば嬉しいです！
そのうち作成した画像を置いてみたいな〜とも思っています