生成AI Geminiで、投稿タイトルの下に黒い下線を引いてみた【WordPress:Cocoon】

Horizontal Line
note・書くこと

最近、生成Ai活用にはまっています、SIKAです。

今日はWordPress個人サイトの投稿記事中のタイトルが少し寂しいので、記事本文との区別をつけるために下線を引こうと四苦八苦していました。

WordPress、テーマはCocoonです。

下線を引く方法をまとめます。

記事のタイトルに下線を引く方法(テーマ:Cocoon)

Cocoonテーマではタイトルの編集画面が表示されない

Cocoonのテーマでは、記事本文に下線やマーカーを引くことは記事の編集画面から直感的に行うことができます。

しかし、記事のタイトルについては、編集メニュー(下記の画像のもの)が表示されません。

カスタムHTML設定から下線を引く

そのため、全体の外観設定から下線を引く必要があると考えました。

WordPressダッシュボードの左端メニューの「外観」から→「ウィジェット」→「投稿タイトル下」

「投稿タイトル下」に、「カスタムHTML」を追加します。

ここにHTMLを書き込んでいきます。

そこで、Geminiの出番です。

Geminiを活用したHTML生成

僕もですが、HTMLに親しみがある人は必ずしも多くはないでしょう。
そんな人にとって、サイトを見て勉強して自分で書いてみる、というのは労力のいる作業です。

コピペで思った通りのHTMLコードを作りたい、そんな思いから生成Ai(今回はGoogleのGemini)にコード生成を頼んでみました。

・今回使用したのは Gemini 2.0 Flash です。

Gemini

生成結果

僕

黒い線を真横に一本引くHTMLを出力してください

Gemini
Gemini

はい、承知いたしました。真横に黒い線を引くHTMLを出力します。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Line</title>
  <style>
    .line {
      width: 100%; /* 線を引く幅 */
      height: 1px; /* 線の太さ */
      background-color: black; /* 線の色 */
    }
  </style>
</head>
<body>
  <div class="line"></div>
</body>
</html>
解説
  • <!DOCTYPE html>: HTML5であることを宣言します。
  • <html>: HTML文書のルート要素です。
  • <head>: HTML文書のメタデータ(タイトル、スタイルなど)を記述する要素です。
  • <title>: HTML文書のタイトル(ブラウザのタブに表示される文字列)を記述する要素です。
  • <style>: CSSスタイルを記述する要素です。
  • .line: クラス名です。HTMLの要素にこのクラスを指定することで、CSSのスタイルが適用されます。
  • width: 100%;: 線を引く幅を要素の親要素いっぱいに広げます。
  • height: 1px;: 線の太さを1ピクセルに設定します。
  • background-color: black;: 線の色を黒に設定します。
  • <body>: HTML文書のコンテンツ(実際にWebページに表示される部分)を記述する要素です。
  • <div class="line"></div>: div要素にlineというクラス名を指定し、CSSでスタイルを適用できるようにします。
使用例

上記のHTMLをWebブラウザで開くと、要素の真横に黒い線が引かれます。

ポイント
  • 線の太さや色、幅は自由に調整できます。
  • borderプロパティを使用しても同様の線を描画できます。

ご希望に応じて、線のスタイル(点線、破線など)や色、太さなどを変更できますので、お気軽にお申し付けください。

Geminiが優秀すぎる

すぐにコピペして使えるHTMLを一瞬で生成してくれました。

それに加えて各要素の解説、変更点があればさらに書き換えできる旨の提案など、完ぺきです。

コピペ用HTMLコード

以下、Geminiが生成してくれたHTMLコードの再掲です。

下記画像のように、シンプルですが記事本文との区切りが分かりやすくなりました。

<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Line</title>
  <style>
    .line {
      width: 100%; /* 線を引く幅 */
      height: 1px; /* 線の太さ */
      background-color: black; /* 線の色 */
    }
  </style>
</head>
<body>
  <div class="line"></div>
</body>
</html>

まとめ

いかがだったでしょうか。

WordPress初心者がHTMLをGeminiに書いてもらいました。

初心者の僕が求めるレベルのことは、Geminiでも簡単に生成してくれる時代なのですね。

みなさまもぜひ活用してみてください。

コメント

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