WordPressのCSSをChatGPTに良い感じにしてもらおう
ChatGPTにCSS全量を投げて、デザインを調整してもらう記事です。
なお、WordPressに限らず、CSS全般で使えます。
一応注意で、CSSを弄る前にきちんとバックアップはとりましょう。また、変更する際は、/* 変更前 */のようにコメントアウトして、すぐに戻せるようにすると良いです。
前半は、WordPressとは、やnoteとの違いなどの私感を述べていますので、読みたくないよって人は目次から飛んでいただければと思います。
WordPressとは
WordPressは、ウェブサイトやブログを作成・管理するためのオープンソースのコンテンツ管理システム（CMS）です。
2003年に開始され、その使いやすさと柔軟性から広く普及しています。
WordPressはPHPで書かれており、MySQLまたはMariaDBデータベースと組み合わせて使用されます。ユーザーは、プラグインを追加することで機能を拡張したり、テーマをカスタマイズしてサイトの外観を変更することができます。
これにより、個人ブログから大規模な商用サイトまで、様々な種類のウェブサイトを簡単に作成できます。
WordPressはSEO（検索エンジン最適化）にも優れており、コンテンツの公開や編集が簡単なため、初心者からプロフェッショナルまで幅広いユーザーに支持されています。
また、世界中の多くのウェブサイトがWordPressを利用しているため、大規模なコミュニティが形成されており、サポートや情報共有が活発に行われています。
（ChatGPTより）
noteとの違い
機能面、サポートの面では結構違ってくると思います。書いた記事が人目に触れる割合は、間違いなくnoteの方が上でしょう。
それはSEO最適化もそうですし、コミュニティ人口も多いですからね。
もちろんWordPressのコミュニティもありますが、各々が独自ドメイン、サーバで運用する都合、例えばフランチャイズに近い気がします（契約体系は違います、あくまでイメージです）。
ちなみに、基本的にWordPressそれ自体は無料ですが、サーバを借りたり、ドメインを取得したりでそこそこお金はかかります。
また、その運用やトラブル含めて、外注しない限りは自分で何とかしないといけません。そういう煩わしさはあります。
単に粛々と記事を書いて、ほどよく繋がりたい！というであれば、無料でできるnoteが最適でしょう。
使い分けても良いとは思います。自分も最近使い分けてみたところ、かえって日常が軽くなりました。
一応noteはサブ垢が許容されているようなので、いっそ別の名前で始めるのもアリだと思います。ちなみに、pixivはサブ垢が禁止されています。このようにサービスによってまちまちなので、規約等は確認してアカウントを取得するようにしましょう。
最終的に比較すべきポイントとしては、コスト、使いやすさ、カスタマイズ性だと思います。ほか、優先させたいことがあれば、そこで比較すれば良いでしょう。
コスト：note ：サーバおよびドメイン維持費など。
使いやすさ：note ≒ WordPress ：使い方次第。どこまで使うかによる。
カスタマイズ性：WordPress ：好き勝手弄れますし、プラグインも豊富。
WordPressのどこを弄ればよいのか
H2タグのデザインであったり、そういったものは基本的に「style.css」に記述されています。
ダッシュボード→外観→テーマファイルエディタ、でCSSを弄る事が出来るページに移動することができます。
なお、バージョンや導入している管理ツールによってはまちまちなので、変なファイルを弄らないようにご注意ください。
style.cssをChatGPTに連携しよう
以下は自分の選択したテーマの場合ですが、どこでも良いのでCSSが記述された場所にカーソルを置いて、ctrl + a または、command + a で全選択します。
選択したらctrl + cまたは、command + cでコピーして、ChatGPTに貼り付けます。
今回はh2タグをちょっと変えたかったので、そのように指示しています。
注意点として、GPT-3.5だと長すぎると怒られてしまいます。
もう少し抜粋して連携するか、GPT-4を使いましょう。GPT-4なら2100行くらいのCSSなら、そのまま飲み込んでくれました。
ChatGPTからの返答
以下のように返答が返されました。
他のデザインを酌んで、書いてくれました。
それを、今度はstyle.cssに反映させます。
以下のように差し替えます。
要らないものは消してしまっても良いと思います。
せっかく分かりやすくコメントがあるので、色など気に入らない場合は、書き換えてしまうのも手でしょう。
「Visual Studio Code」を使用してローカルでCSSを編集するのも便利です。
色コード（#333333）等は、もっと直感的に色指定できるので、かなり捗ります。
さて、WordPress側でこれで良い場合は、下部にある「ファイルを更新」を押します。これで即時、適用されます。
実際に見てみよう
実際に自分の投稿した記事を確認してみます。
たしかに、些細ですがメリハリがつきましたね！
個人的にはこのくらいが好きですが、もっと凝りたい場合は、さらにChatGPTとやりとりをして、詰めることもできます。
下が、もともとのデザインです。
ついでにナビゲーションバーも弄ってもらって、とやっていくと結構楽しいですね。
まとめ
この程度であれば、ChatGPTを使うまでも無いかもしれませんが、膨大なCSSを読み込んで、即時良い感じのアドバイスができるというのは、AIの方が優れています。
ただ、ChatGPTといったAIが提案してくるデザインは、人間のデザイナーが思いつくような、革新的であったり、そういうのとは違う種類かなと思っていて、やはり最終的にどう整えるか、というところでは人間の介在は不可欠だと思います。
今はWEBサイトを連携しても、コードで理解しますが、そのうち本当に「目で見て」理解出来るようになると、また変わってくるのかもしれませんね。
この記事が気に入ったらサポートをしてみませんか？