はいこんにちは
りちゃんです。
ずーっとやりたいなーと思ってたんですけど出来ていなかった、内部リンク（記事紹介）の画像化！
簡単に言うと、
自分の記事を
自分の別の記事で！
紹介する事です笑
スライドバナー実装
というわけで現時点（2026/01/18）で実装した感じがこのような状態！
※このブログはWordPress、cocoonをカスタマイズして作っています。
その画像（バナー）を作ったり
HTMLを組んだり（ほぼchatGPT）
CSSを組んだり（こちらもほぼchatGPT）
php実装させたり（こちらは全てchatGPTw）
で完成しました〜
バナーと記事を決める
リンク先の記事を決めてバナーを作りました。
最初はヘッダーをプラグインでスライド表示させようとしていたので、
《1500px × 500px》で製作しています。
▲こんな感じで手書きバナー画像を適当に作りました！！笑
で、HTML、CSS、PHPを編集して横スライド、自動スクロール形式にしました。
HTML、CSS、PHPを書き出す
chatGPT様にお願いしまして、コードを書いてもらいます。
まず、「バナー貼ろうと思ってるんだ〜」的な趣旨を伝えたところですね…
バナー配置のおすすめ（重要）
ブログ内バナーは 「途中」か「読み終わり直前」 が一番強い。
- ❌ 冒頭すぎ → 本文読む前でスルー
- ⭕ H2を2〜3個読んだあと
- ⭕ 「ちょっと疲れたタイミング」
特に
👉 「おすすめ」「まとめ」「余談」前
に置くとジャンプ率上がる。
▲このような感じでうちのAIちゃん（chatGPT）から返答がありましたので
おっけー、バナー画像作ってるから、
ブログ内に自動で横スライドするコード書いて欲しいんだけど出来る？
WordPress、cocoonの環境
と投げるだけで良い感じにHTMLとCSSとphpのコードが…！
これをコピペして実際に動くか動作確認していくよ〜
細かい修正や希望も聞いてくれるよ
で、とりあえず表示がされていたら成功！
コードが読めない人は…
コピペするだけで良いように書き出して！！
と指示すると、必要な事を聞いてくれるので（リンク先のURLとか）、それに答えればぜーんぶ調整して書き出してくれるよ！！
もしエラーが出ていればその状態を伝えたら対策や原因を考えてくれるし、もうちょっとこうしたいな〜ってところも言ったら直してくれる。
いやぁ優秀ですね、AIちゃん。
指示は難しく考えずそのまま伝える
▼例えばこんな感じ
- 最後までいったら1枚目に戻る仕様には出来る？
- スライドがあることがわかりにくいから下に点々（複数ある、何枚目のスライドかわかる、）もしくは薄く矢印マーク左右につけたりできるかな〜？
- ドットの色？変えたんだけど！
もはやただの会話！けどこれでスライドが出来上がるよ！
▼最新版がこんな感じになっています
ショートコード化
cocoonの便利機能「ショートコード」
記事やウィジェットにHTMLを貼るのは良いのだが、更新がだるいのでショートコード化させました！
つまり管理が一括で出来るから楽ちんって事ね！！
こちらもAIちゃんにお仕事してもらってショートコードにするためのコードを書いてもらったよ。
＜完成したHTMLコード（コピペ）＞
今使ってるHTML、これをPHPに貼り付けられるように書き換えて！
▲これでphpに貼り付ければショートコード化完了！！！
なぜショートコード化？
ショートコードにする事で
[richan_slider]
▲このように入力するだけで
スライドバナーを表示させる事ができます。
一括管理のメリット
さらに、
一箇所（この場合さっき作ったphpコード）で管理しているので、
記事を変えたい、追加したい、画像を変えたいなどの時に
php部分を変更するだけでショートコードで表示している全てのバナー設定が切り替わるので
ミスも少なく楽ちんなのです！！
記事の中に入れたい時もこのショートコードを貼るだけでいいし、後から一括で変更出来る。
記事が増えるとどの記事に貼ったのかもわからなくなったりするわけですが、
全て大元のコードをいじれば変更されるのが最大のメリットです！
ついでに記事スライドも
前から一部記事につけていたおすすめ記事の横スライドをフッター上に配置してみた。
▲こういう埋め込み型カードより
サムネイルが並んでるほうが見やすいよね〜
勝手に見ちゃうもんな。（りちゃんの感覚値）
既存のショートコードで簡単配置
元々Cocoonにはメニューをショートコードで表示出来るので
少し指定をつけて表示させています！
[navi_list name="おすすめ記事" horizontal="1" type="large_thumb"]
おすすめ記事…こちらはメニューにて設定
（設定したメニュー名を”おすすめ記事”のところに置き換えたショートコードを使えばOK）
おすすめ記事の設定方法
▼管理画面 ＞ 外観 ＞ メニュー にて表示したいものを設定します
編集したいメニュー名を選択（もしくは新たに作成）して設定します。
▼ナビゲーションラベルが記事サムネの下に表示されるタイトル
こんな感じの表示になります。
ウィジェットや記事に貼る
上記で用意したショートコードを貼り付ければ設置完了！
簡単でした〜
▼管理画面 ＞ 外観 ＞ ウィジェット にて好きな場所（表示させたい場所）に貼る！
▼わかりにくかったらライブプレビューで編集すると良き◎
モバイルとPCで表示場所を変えています。
（どこが見やすくて邪魔にならないか実験中）
記事内やブログの一番下あたりに表示させていますので良ければチェックしてみてください！
横スライドのバナーはもう少しふやしていきます…！！
comment