ブログを作ったはいいけど、なんか…ダサい。
記事は書いてる。投稿もできてる。でも見た目が「初心者感まるだし」でなんとなく恥ずかしい。「デザイン変えたいな」と思ったものの、何をどうすればいいのかまったくわからない。そんな状態からAIに全部聞きながらブログの見た目を改善した話です。
「CSS」って何？から始まった
AIに「見出しのデザインを変えたい」と伝えたら、「CSSで変えられますよ」と返ってきました。
CSS？なにそれ。
聞いてみたら、「ウェブサイトの見た目を変える設定のこと」だそうです。「この文字を青くして」「この見出しに背景色をつけて」という指示を書くもの、とのこと。
「でも私、コードとか全然わからないんですけど」と言ったら、「コピペするだけでいいですよ」と言われました。本当に？と半信半疑でしたが、やってみたら本当にコピペだけでした。
H2見出しを青背景に変えた
「見出しをもっとブログらしくしたい」とAIに伝えたら、こんなコードが出てきました。
.entry-content h2 {
background-color: #2980b9;
padding: 10px 16px;
border-radius: 6px;
color: #ffffff;
font-weight: bold;
text-align: center;
}意味は全然わかりません。でも「外観 → カスタマイズ → 追加CSS」に貼り付けて「公開」したら…一発でそれっぽくなりました。青背景に白文字でセンター揃え。
「え、これだけ？」と思わず声が出た。
本文の行間も広げた
次は「本文が詰まって読みにくい」と伝えたら、また短いコードが出てきました。
.entry-content p {
font-size: 16px;
line-height: 2.0;
}貼り付けるだけ。それだけで行間がゆったりして、スーッと読める感じに変わりました。
同じ文章なのに「読みやすさ」がまったく別物。意味がわからなくてもコピペで変わる、これがCSSか、と初めて実感しました。
サイドバーも整理した
気づいたらサイドバーに「Recent Comments」というエリアがありました。コメントゼロのブログで「最近のコメント」が表示されてるのは逆に寂しい。即削除。
他にもサイドバーの見出しが全部英語でした。「Recent Posts」「Archives」「Categories」。日本語ブログなのに英語が混ざってると違和感がある。これも直しました。
- Recent Posts → 最近の投稿
- Archives → アーカイブ
- Categories → カテゴリー
記事に画像を入れるのも初めてだった
Before/Afterで見せようと思ったら、そもそも記事に画像を入れたことがない。
「どうやるの？」とまたAIに聞きました。「投稿画面で＋ボタンを押して『画像』ブロックを選ぶだけです」と言われました。
やってみたら、あっさりできた。画像を選んでアップロードするだけ。この記事のBefore/Afterの画像も、初めて自分で入れました。
で、実際にBefore/Afterを見比べてみると…正直そこまで劇的には変わってないです。「ガラッと変わった！」という感じはなかった。
でも、なんとなく気になってたモヤがスッキリした感じはある。見出しがブログらしくなって、サイドバーが整って、文字が読みやすくなった。「ちゃんとしたブログになってきたな」という手応えは確かにあります。
「難しそう」と思ってることほど、やってみたら5分で終わったりする。わからなければAIに聞けば全部教えてくれます。劇的な変化はなくても、やって損はなかったと思ってます。
コメント