ニュース記事にコメント窓を入れたい！→ 簡単なショートコードをAIに作ってもらい解決
記事の紹介で一言コメントをいれたいというのは昔からの私の常とう手段ではありますが、これをもっと見やすくやりたいなぁと思って AI に相談してみました。上のスクショはいろいろ試してたどり着いた完成品です。
私がどうやって AI を使いながらこのコメント窓を作ったか、備忘録的に書いておきたいと思います。
自分のコメントだと一目でわかるようにしたい
CDAi Focus はここ最近はじめたニュース紹介記事です。ここに自分のコメントを入れていたのですが、青枠で囲む形。
これでもまあよかったんですが、せっかくなんで、自分のアイコンとか入れれたらなぁと AI に相談してみました。
既存の枠線ブロック+追加CSSで挑戦
上の青枠は枠線ブロックという機能をつかって表現していたのですが、そこに追加のCSSでアイコン貼れないかと試してみました。
結果は「失敗」。
枠線すら消えてしまい、アイコンも出てきませんでした。
原因は特定できませんでした。追加CSSの指定やブロックへの設定方法など、確認すべき点が残りましたが、今回は別の方法で実現することにしました。
カスタムHTMLで見た目を完成
アイコン・文章・青枠を一つのHTMLにまとめてみたところうまくいきました。丸いアイコンを左に、コメントを右に配置できました。
おー、なかなかいい感じになりました。
これでとりあえずは運用すればOKってことになったのですが、このカスタムHTMLをどうやって呼び出すかが問題となりました。HTMLは複数行に渡るので辞書登録するわけにもいかず。。かと言って毎回コメント窓のブロック探してコピペするのもめんどくさい。
これだと日常運用には「複製がネックとなる」なぁと思いました。
WPCodeでショートコード化
もともと導入していた WPCode に PHPスニペットを登録すれば、ショートコードで先ほどのHTMLを呼び出せるではないかということで、AI にコードを書いてもらいました。（コード内容は割愛します）
これで長文のHTMLを扱うことなく、任意のショートコードで呼び出せるようになる。これで勝つる！
ここにコメントを書く
こんな感じでやってみました。
下書きプレビューで表示確認
おお。いい感じに表現できてます！
あとはショートコード呼び出し用のコマンドとショートコードそのものを辞書登録してミッションコンプリート！
これで今日からの記事にガシガシコメントでお邪魔することができます。
いやーこういう自分用にちょっと便利になる道具を簡単に作ることができるという意味でも生成AIってすごいなぁと思いました。ただ、曲作ったり、絵描かせるだけが生成AIじゃないんだなと実感できてよかったです。
みなさんもちょっと不便だなと思うことをさりげなく AI に愚痴ってみるのもいいかもですｗ
ではまた。