未ログイン状態で閲覧中
  • 投稿日:2026/03/24
【cocoonの方は必見】ChatGPTでデザイン性の高い比較表をつくる方法

【cocoonの方は必見】ChatGPTでデザイン性の高い比較表をつくる方法

  • -
  • -
会員ID:O8uoldwk

会員ID:O8uoldwk

この記事は約8分で読めます
要約
ブログのテーマでcocoon(コクーン)を使っていると「もっとこういうデザインにできたらいいのに!」と思うことがありますよね。 そんな時はChatGPTでHTMLコードを出力して『おしゃれな比較表』や『スクロールできる表』を作ってみませんか? 私がやっているやり方を伝えます!

ワードプレスでブログを開設する時に、よく使われるのが無料のテーマ「cocoon(コクーン)」。

私もブログ運営をしている中で、コクーンを利用していますが

ーーーーーーーーーーーーーーーーーー

・横にスライドする表が作れない

・列幅の調節ができない

・スマホ対応の表が作れない

ーーーーーーーーーーーーーーーーーー

こういった悩みがありました


そこで、私が実施したのが、ChatGPTにコードを出力してもらって、表を作るということ。

実際にチャッピーに作ってもらった表がこちら👇

スクリーンショット 2026-03-23 11.33.58.pngスマホの場合は、横にスクロールができるようになっています。


今回は、自分の希望するデザインの表をチャッピー(AI)に出力してもらうプロンプトを公開していきたいと思います。

ブログのデザイン性で悩んでいる人に、読んで良かったと思っていただける情報をお届けできるように頑張りますので、ぜひご覧ください♪

ChatGPTにコードを出す手順(5ステップ)


1. 作りたいデザインを決める

続きは、リベシティにログインしてからお読みください

ノウハウ図書館でできること
  • すべての記事の閲覧

  • ブックマーク

  • いいね・レビュー

  • 記事の投稿※応援会員(有料)のみ

  • ポイントの獲得※応援会員(有料)のみ

※会員登録には、新入生会員(初月30日無料)と応援会員(有料)があります

応援会員制度とは?
さらに!
  • リベシティの他の機能やサービスもご利用いただけます詳しく見る

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

会員ID:O8uoldwk

投稿者情報

会員ID:O8uoldwk

イルカ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(0

まだレビューはありません