サイトを作っていて、
西暦と和暦を変換できるツール、置けたら便利だな。
と思いました。
でも私は、
コードを書けません。
というか、
1行も読めません。
そこでAI03に、
「西暦・和暦変換ツールをサイトに置きたいんだけど、どうしたらいい？」
と聞いてみました。
すると返ってきたのが、
「カスタムHTMLにコードを貼ればできます」
という答え。
いつも通り、言っていることはチンプンカンプンでしたが、
AI03の言う通りにやってみたら、
本当にサイトの中で、西暦と和暦を変換できるツールが動きました。
しかも、そのあとには、同じ仕組みを使って
表も、リンクカードも、簡単な計算ツールも置けるようになりました。
今回は、
コードが1行も読めない私が、AI03に作ってもらったコードをWordPressに貼って使ってみた話
です。
そもそも、カスタムHTMLって何？
WordPressでは、文章を書くときに
- 段落
- 見出し
- 画像
- ボタン
- テーブル
などのブロックを使います。
その中に、
「カスタムHTML」
というブロックがあります。
ここにHTMLコードを貼ると、その内容を記事や固定ページの中に表示できます。
……と言われても、
そのHTMLって一体なんですか？
という状態です。
これで何ができるのか分かったのは、
実際にAI03が書いたコードを入れてみたときでした。
ちなみに私は、
カスタムHTMLのことを勝手に「魔法BOX」、
そこに貼るコードを「呪文」と呼んでいます。
仕組みは分からなくても、
呪文を入れると何かが発動する。
今の私は、そのくらいの理解度です。
私がやったのは「欲しいものを説明する」だけ
たとえば西暦・和暦変換ツールなら、
「西暦を入れたら和暦が出て、和暦を入れたら西暦も出るようにしたい」
とAI03に伝えました。
私は、
「この関数を使って」
「このCSSを書いて」
なんてことは口が裂けても言えません。
そもそも知らないからです。
代わりに、
何ができてほしいか
をそのまま言葉で伝えます。
するとAI03がコードを作ってくれます。
私はそれを、
丸ごとコピー。
ここまでの作業で、
私が考えているのは「何を作りたいか」だけです。
コードの中身は、
一切見ていません。
WordPressに貼る
次にWordPressの編集画面で、
＋ボタン
を押します。
検索欄に、
カスタムHTML
と入力。
表示されたブロックを選んで、そこにAI03が作ったコードを貼ります。
あとは、
プレビューで確認。
ちゃんと動けば完成です。
私の場合、
コードを理解して確認する
のではなく、
実際に動かして、何ができるのかを確認する
という使い方をしています。
「ここが違う」も日本語で伝える
最初から思った通りになるとは限りません。
たとえば、
「ボタンが大きすぎる」
「スマホだと見づらい」
「色をもう少し薄くしたい」
「入力欄を横ではなく縦に並べたい」
など。
そんなときも、私はコードを見ません。
AI03に、
「ここをこうして」
と伝えます。
すると修正版のコードが出てきます。
それをまた丸ごと貼り直して、
実物を確認。
この繰り返しです。
気づいたら、表まで作れるようになった
西暦・和暦変換ツールを置けたことで、
「これ、他にもいろいろできるのでは？」
と思うようになりました。
たとえば表。
WordPressには標準のテーブルブロックもありますが、
少し見た目を変えたいときや、
列の配置を工夫したいときには、
こういうときにも、
カスタムHTMLが使えるんだと知りました。
私は、
「この内容を見やすい表にして」
と頼んで、できたものを貼るだけ。
コードは相変わらず読めません。
リンクカードも作れた
さらに、
普通の文字リンクではなく、
もっと押しやすくて、目立つリンクを置きたい
と思うこともあります。
たとえば、こんなリンク。
それに加えて、
「2つ並べたい」
「スマホでは1列にしたい」
「サイトに合う色にしたい」
と希望を伝えると、
AI03がそれに合わせてコードを作ってくれます。
下は2列バージョン。
AI03には、「リンクカード」なんて言葉を使わず、
「見やすいリンクのボタンつくって」
くらい雑に伝えています。
それでも、できてきた実物を見ながら
私が欲しいものを少しずつ伝えていけば、
だんだん形になっていきました。
簡単な計算ツールまで置けた
さらに進むと、
入力した数字から結果を出すような、
簡単な計算ツール
まで置けるようになりました。
もちろん私は、
それにJavaScriptが必要だということすら、
知りません。
相変わらず、
何が書いてあるのか、さっぱり分かりません。
でも、
「こういう計算をしたい」
と伝えて、
作ってもらって、
貼って、
動かして確認する。
それだけで、以前なら自分には
到底無理だと思っていたものまで、置けるようになりました。
※WordPressの環境や設定によっては、同じ方法でJavaScriptが動かない場合もあります。
コードが分からなくても、使うことはできた
私は今でも、
HTMLもCSSもJavaScriptも、
全く分かりません。
でも今回、
コードを書けないことと、コードを使えないことは別
なんだと分かりました。
AI03に作ってもらって、
WordPressに貼って、
実際に動かして確認する。
必要なら修正をお願いする。
それだけでも、できることはかなり増えました。
もちろん、
よく分からないコードを何でも貼ればいい、
という話ではありません。
私の場合は、
「このコードは何をするもの？」
「危ないことはしていない？」
とAI03に確認したり、プレビューで実際の動きを見たりしながら使っています。
それでも、
以前なら最初から諦めていたことが、
「ちょっと試してみよう」
に変わったのは大きな変化でした。
まとめ
私が最初にやりたかったのは、
西暦と和暦を変換できるツールをサイトに置くこと
でした。
そこから、
AI03にコードを作ってもらい、
WordPressのカスタムHTMLに貼る方法を知りました。
今では、
- 変換ツール
- 表
- リンクカード
- 簡単な計算ツール
まで置けるようになりました。
でも、
コードは今でも1行も読めません。
それでも使えています。
AI03がいることで、
「コードが分からないから無理」
と思っていたことが、
「こうしたい、と伝えてみよう」
に変わりました。
やりたいことを言葉にして、
作ってもらって、
コピペして、
動かしてみる。
今の私には、それで十分サイトを作っていけています。
参考情報
WordPress公式
Custom HTML ブロック
WordPress公式「Custom HTML」
WordPress Developer Resources
Custom HTML – Block Editor Handbook
WordPress開発者向け資料「Custom HTML」
