ブログの見た目もAIに相談|テーマ選びからCSSまでやってみた

AIでできること

前回、ChatGPTに相談しながらWordPressでブログを開設しました。

サーバーも決まった。
WordPressも入った。

「よし、これでブログ書ける!」

……と思ったんですが。

ブログを開いてみて、次の問題が。

見た目、どうしよう。

WordPressのテーマ、どれにしたらいい?

WordPressには「テーマ」というものがあります。

簡単にいうと、ブログ全体のデザインやレイアウトの土台になるもの。

調べてみると無料も有料もあって、とにかく種類が多い。

当然、私はこうなりました。

わたし
わたし

見た目考えるのも大変だな・・・
どんなのがいいと思う?(丸投げ)

ChatGPT
ChatGPT

どんなブログにしたいの?

わたし
わたし

シンプル。あんまりゴチャゴチャしたくない。
あと初心者でも使いやすく

いくつか候補を出してもらって、特徴も教えてもらいました。

自分で「WordPress おすすめテーマ」と検索していたら、

たぶんここで比較記事を10個くらい開いていたと思います。

そして、

わたし
わたし

結局どれがいいん…?

となっていたはず。

候補を絞ってもらえたので、テーマはわりとあっさり決定。

わたし
わたし

じゃあこれにする!

テーマ問題、終了!

……と思ったら、もちろん終わりませんでした。

テーマを設定してブログを見てみると、

「おお!ブログっぽい!」

最初はそれだけで嬉しい。

でも、しばらくプレビューを眺めていると……

見た目を変えたくなる。

そもそも「テーマ」と「スキン」って何?

WordPressには、ブログのデザインや機能の土台になる「テーマ」があります。

私が使っているのは、無料テーマの Cocoon(コクーン) です。

そして、Cocoonの見た目を着せ替える「スキン」は、グレイッシュを選びました。

……と書いていますが、実は私も、この違いをちゃんと分かっていませんでした。笑

わたし
わたし

テーマとスキンって、違うものなの?

ChatGPT
ChatGPT

うん!テーマはデザインや機能の土台。
スキンは、そのテーマの見た目を着せ替えるものだよ

わたし
わたし

じゃあ、Cocoonを使っていても、みんな同じ見た目にはならないんだ?

ChatGPT
ChatGPT

そう!選ぶスキンで、色や装飾などの雰囲気が変わるよ。
ただし、すべてのテーマに同じようなスキン機能があるわけではないよ

なるほど。私はCocoonという土台に、グレイッシュという見た目を選んでいたんですね。

テーマには無料・有料があり、種類もたくさん。私は無料のCocoonで始めました。

私のイメージでは、

WordPress=お部屋・家そのもの
→ ブログを動かすための土台・仕組み。

Cocoon=お人形の本体
→ WordPressに入れて、ブログの基本的なデザインや機能を決める「テーマ」。

スキン=お人形の着せ替え
→ Cocoon本体はそのままで、服を着替えるように色・雰囲気・見た目を簡単に変更するもの。

余計わかりにくいでしょうか。笑

テーマによって、何が違うの?

わたし
わたし

ほかのテーマだと、何が変わるの?

ChatGPT
ChatGPT

見た目だけじゃなく、記事の飾り付けや、設定のしやすさにも違いがあるよ。
代表的な3つを比べると、こんな感じ!

テーマ無料・有料主な特徴
Cocoon(コクーン)無料吹き出しや目次など、ブログに便利な機能がそろっている。スキンで見た目を着せ替えられる
SWELL(スウェル)有料記事の編集操作に力を入れている。ボタンや囲み枠などを、画面上の操作で整えやすい
JIN:R(ジンアール)有料用意されたデザインを取り込んで、ブログ全体の雰囲気を整えられる。記事の装飾機能も豊富
わたし
わたし

無料だと、できることが少ないの?

ChatGPT
ChatGPT

Cocoonにも、ブログを書くための機能は十分あるよ。
有料テーマは、好みのデザインや操作のしやすさにお金を払う、
と考えると分かりやすいね

私はCocoonを使いながら、気になる部分をチャピに相談して整えていくことにしました。

設定で変更できる個所を教えてもらう

WordPressには、もともと見た目を変更できる設定がたくさん用意されています。

ただ、初心者の私には、「そもそも、これって設定で変えられるの?」「変えられるなら、どこにその設定があるの?」が分かりません。

そんなときは、

わたし
わたし

ここの表示変えたいんだけど
(スクショを送る)

ChatGPT
ChatGPT

この設定から変更できるよ!
(文字で回答が表示される)

わたし
わたし

……わからない
スクショに〇をつけて教えて!

ChatGPT
ChatGPT

スクショ送るね!
(画像に〇付けしたものを表示してくれる)

あとは言われた通りに、「ここをクリック → 次にここ → この項目を変更」と進めていくだけ。

これもかなり助かりました。

名前が分からなくても「これ」で通じる

便利だったのが、変更したい部分の名前が分からなくてもいいこと。

わたし
わたし

ここにこの画像追加したい
スクショ送るから教えて

ChatGPT
ChatGPT

クリックして、出てくるリストから
〇〇→〇〇を選ぶと追加できるよ

わたし
わたし

ありがとう!

スクショを送って、

「これ」

で通じる。

これがとても便利!

ネット検索だと、その「これ」を検索するために、

まず「これ」の名前を知らないといけない。

でもChatGPTなら、

「この右のやつ」、「この文字」、「スマホに出てくるこれ」

でも話が進む。

ブログ初心者の私には、かなり助かりました。

そして…

わたし
わたし

ここを変えるには?

ChatGPT
ChatGPT

設定画面を見せて!
…設定から変えられそうにないから、
CSSで変える必要があるね

CSSか…名前は知っています。

プログラミング言語のようなもの。(正確にはスタイルシート言語です)

AIを使う前の私だったらここから、

「WordPress CSS ○○」

と検索していたと思います。

でも今回は違いました。

わたし
わたし

どこにどう書けばいい?

ChatGPT
ChatGPT

WordPressのこの画面を開いて、スクショ送って!
(わたし:スクショを送る)
この画面に、このCSSコードを追加して

言われたCSSをコピーして貼る。

プレビューを確認。

わたし
わたし

いらない表示が消えた!

これ、めちゃくちゃ楽でした。

ただ、CSSは少しPCに慣れた方でないと難しいかもしれませんので、

① まずWordPressやテーマにもともとある設定で変更

② それでは変更できない部分だけCSSで調整

が大切

AIにCSSでの変更を提案されても、一旦

「これ、画面の普通の設定で変えられない?」

と聞いてみるのがおすすめです。

CSSは一個ずつ試す

とはいえ、ChatGPTが出したものを何でもそのまま入れているわけではありません。

わたし
わたし

このCSS貼ってブログのスタイル崩れん?

ChatGPT
ChatGPT

一気に変えるのは絶対ダメ!!
一件ずつ、プレビューを確認しながらやって!

ということで、

CSSを一つ追加。

↓

プレビューを見る。

↓

問題なし。

↓

次を追加。

という感じで進めました。

もし変になったら、今追加したものを戻せばいい。

この方法なら、CSSがよく分からない私でも触れました。

実際にChatGPTに聞いて見た目を変えた画面の一例

実際の画像がこちらです↓

スマホで見た場合の画面

まずインストールしたテーマで初期値で表示されたのは一枚目。

とてもおしゃれなんですが、タイトルのみ表示され、

記事はスクロールで下がらないと見れませんでした。

記事が見えないので、

わたし
わたし

最初に開いた一画面で最新記事が見えるようにしてほしい!

とChatGPTに伝え、設定からは変更できないことを確認し、

CSSを提案してもらい、書き換え。

次に出たのが二枚目の画像です。

記事は一画面内に表示されましたが、

すでに記事が見えているのに「Scroll」の文字が見えていて不自然だったので、

わたし
わたし

記事が見えてるのにScrollの文字があるの変じゃない?
Scrollを消して、もっと記事を上げたいんだけど
(実際の入力も↑のような感じで、
 人との会話するイメージをそのまま入力しても通じます。)


そして再度CSSを提案してもらい、コピペ。

出来上がったのが完成品、最後の画面です!

ChatGPT
ChatGPT

スマホ、パソコンで閲覧した場合は見え方が違うから、
両方で確認してね!

わたし
わたし

ちなみに二番目のアイキャッチ画像は、
シンプルなデザインにしたかったのと、
今後管理しやすいようChatGPTに依頼して変えました!
それはまた別の記事に記載します!

AIがPCの設定をやるのも完ぺきではない

自分で一から調べて試すより、

ChatGPTに聞きながら進めた方がはるかに速かったのは事実です。

ただ、AIも完ぺきではありません。

古い設定方法を教えてきたり、

今使っているWordPressの画面と説明が違ったりすることもありました。

もちろん、AIがすべての環境や設定を把握しているわけでもありません。

WordPressを触っている方の中には、

「PCの勉強も兼ねてブログを始めたい」という方もいると思います。

そういう場合は、何でもAIに答えを聞いてそのまま実行するのではなく、

自分でも調べたり、「なぜこの設定をするのか」を確認しながら進める

のがおすすめです。

教えてもらった通りにクリックしていくだけだと、確かに速い。

でも、覚えにくいんですよね。

私自身も、分からないところはChatGPTに助けてもらいつつ、

できるだけ「今、何を変更しているのか」を意識しながら進めるようにしています。

AIに全部やってもらうというより、

分からないところをすぐ聞ける先生が隣にいる。

今のところ、それくらいの使い方がちょうどいいなと思っています。

AIに聞きながらだと「ちょっと変えたい」ができる

ブログを始める前は、

WordPressを入れて記事を書けば終わりだと思っていました。

実際に始めてみると、

テーマを選んだり、

スマホ表示を調整したり、

CSSを触ったり、

画像を作ったり。

意外とやることが多い。

でも今回は、

わたし
わたし

チャピ、ここどうしたらいい?

ChatGPT
ChatGPT

ここをこうして

わたし
わたし

できた!じゃあ次これ!

という感じで、一個ずつ進めることができました。

そして今日もブログを眺めながら、

わたし
わたし

チャピ…ここ、もうちょっと変えたい

たぶん、しばらく終わりません。

コメント

タイトルとURLをコピーしました