MicrosoftのAI Copilotを利用して、はてなブログの編集テクを身に着けよう！！AIとの協働の実際例
今回は、”はてなブログ”を開始して約半年たち、記事も85本書きました。これまでは衝動的に書きたい事を書いてきまました。
やっと周囲を見る気持ちになり、他のブロガーの方々のように体裁も整えていきたいという気持ちになりました。
それなら目次を設置しようと思いましたが、やり方がわからない！！
そこでAIに”はてなブログ”のことを聞きながらまずは目次の設置と、目次に”目次”という文字を記入する方法をAIに聞いて実際にやってみたことを記事にしてみました。
今回利用したのは無料で利用できるMicrosoftのCopilotを利用しました。Copilotの良いところはChatGPT4.0が無料で使えかつ、Microsoftの検索エンジンから引用したサイトのアドレスもでてくるところですね。
ちなみにネコケンはChatGPTの有料会員ですが、調べ物で根拠が必要なものを利用する際にはMicrosoft Copilotを利用することが多いです。また、職場に導入されるのも将来的に Microsoft Copilotだと思っています。今のうちに無料版で使用感を味わっておきたいと思います。
- MicrosoftのAI Copilotを利用して、はてなブログの編集テクを身に着けよう！！AIとの協働の実際例
- はてなブログで目次を作成する方法
- 目次に”目次”という字を入れる方法
- ここで問題が！！スマホには”目次”が挿入されてなかった！！
はてなブログで目次を作成する方法
手順
Copilotを利用してみる
早速 Copilotに聞いてみましょう！
Q１：「はてなブログの目次の作成方法を教えて」
A１：「はてなブログの目次の作成方法はとても簡単です。😊
以下の3ステップで目次を作ることができます。
- 記事内に見出しを入れる。見出しは「見出し」ボタンをクリックするか、`Shift+Alt+2`キーを押すことで設定できます。
- 目次を入れたい場所にカーソルを合わせて、目次のアイコンをクリックする。もしくは`[:contents]`と入力する。
- 記事をプレビューすると、見出しに応じて目次が自動的に作成される。
これで目次の作成は完了です。👍」
と回答してくれました。併せて根拠の記事のアドレスをのせてくれているので軽く目を通します。
見出しを使う
AIが提示したサイトを見ても、ちょっと「見出し」の使い方がわからなかったので改めて聞いてみました。
Q２：「はてなブログでは、目次を作成する際の見出しは大見出しと決まってますか？」
A２：「はてなブログでは、目次を作成する際の見出しは大見出しと決まっているわけではありません。😊
目次を作成するには、記事内に見出しを入れて、目次記法（[:contents]）を目次を入れたい場所に記入するだけです。
見出しは、大見出し、中見出し、小見出しの3種類があります。
見出しの種類によって、目次の階層が変わります。
大見出しは、目次の一番上の階層になります。
中見出しは、目次の二番目の階層になります。
小見出しは、目次の三番目の階層になります。
例えば、以下のように見出しを入れた記事を作ったとします。
```
# 大見出し1
## 中見出し1-1
## 中見出し1-2
### 小見出し1-2-1
# 大見出し2
## 中見出し2-1
```
この記事に目次記法を入れると、以下のような目次が作成されます。
```
- 大見出し1
- 中見出し1-1
- 中見出し1-2
- 小見出し1-2-1
- 大見出し2
- 中見出し2-1
```
このように、見出しの種類に応じて目次の階層が決まります。
目次の階層は、自分の好みや記事の内容に合わせて調整できます。
見出しの種類を変更するには、記事編集画面で見出しにしたい文字を選択して、入力補助ツールバーの「見出し」ボタンをクリックして、大・中・小のいずれかを選びます。
また、はてな記法モードやMarkdownモードでは、それぞれの簡易記法で見出しを指定できます。
参考になりましたら幸いです。😊」
⇒実際にやってみました。ただ、#をいれても - にはならなかったです。
目次を作成
実際に`[:contents]`をいれてみました。
目次に”目次”という字を入れる方法
さて、念願の目次を作成できました。ネコケンは喜びましたが「なぜ目次という文字が入っていないのか？？？」となりました。
これだけだと足りないのでcssを利用して“目次“という文字をいれてみる
やっぱり目次が欲しいです。早速、AIに助けをもとめました。
Copilotを利用してみる
Q１：「目次という字を挿入するにはどうしたらいいの？」
A１：「はてなブログで目次という字を挿入する方法は、CSSを使って目次の前に文字を追加することができます。1 以下の手順に従ってください：
はてなブログの管理画面にログインします。
「デザイン」設定に進み、「カスタマイズ」を選択します。
「カスタマイズ」画面で「デザインCSS」または「HTML/CSS編集」を選びます。
目次という字を追加するためのCSSコードを貼り付けます。例えば、以下のようなコードを使用できます：
CSS
.table-of-contents:before {
content: "目次"; /* 目次という字を指定 */
font-size: 150%; /* 文字の大きさを指定 */
color: black; /* 文字の色を指定 */
}
AI で生成されたコード。ご確認のうえ、慎重にご使用ください。
設定を保存し、ブログを確認して目次という字が表示されているかをチェックします。
このコードは目次の前に目次という字を追加します。文字の大きさや色はお好みで調整してください。
ご不明点があれば、お気軽にお尋ねください。お手伝いできることがあれば幸いです。😊」
お～！そうゆうことか、フムフム、えっとコードの内容はわからないけど、どうすればいいのか、なんか説明文があるようだが…。ここも聞いてみよう！
Q２：「質問です。以下の
.table-of-contents:before {
content: "目次"; /* 目次という字を指定 */
font-size: 150%; /* 文字の大きさを指定 */
color: black; /* 文字の色を指定 */
}
の**の囲みの部分は説明？」
A２：「このコードの**の囲みの部分は、CSSのコメントと呼ばれるものです。コメントは、コードの説明やメモを書くために使われますが、ブラウザには無視されます。 つまり、コメントはコードの動作に影響を与えません。コメントは、/* と */ で囲むことで作成できます。例えば、以下のように書くことができます：
/* これはコメントです */
.table-of-contents:before {
content: "目次"; /* 目次という字を指定 */
font-size: 150%; /* 文字の大きさを指定 */
color: black; /* 文字の色を指定 */
}
AI で生成されたコード。ご確認のうえ、慎重にご使用ください。
コメントは、コードを読みやすくするために役立ちます。特に、他の人とコードを共有する場合や、自分で後でコードを見直す場合に便利です。コメントを使って、コードの目的や意味を説明したり、変更点や注意事項を記録したりすることができます。
ご質問があれば、またお尋ねください。😊」
つまり説明文なのでした。実際にはいらないので、
Q３：「上記コードのコメントを抜かした部分を記述して」
A３：「上記コードのコメントを抜かした部分は以下のようになります。
.table-of-contents:before {
content: "目次";
font-size: 150%;
color: black;
}
AI で生成されたコード。ご確認のうえ、慎重にご使用ください。
このコードは、目次の前に「目次」という文字を表示します。コメントは、コードの説明やメモとして書くために使われますが、ブラウザには無視されます。
ご質問があれば、またお尋ねください。😊」
では実際に「デザインCSS」に貼り付けましょう。
↓
ここで問題が！！スマホには”目次”が挿入されてなかった！！
ここで再びCopilotにヘルプを求めます。
Q１：「上記の目次のCSSをいれました。PC版では成功しましたが、スマートフォン版のプレビューではでないのはなぜ？」
A２：「スマートフォン版でCSSが表示されない場合、はてなブログの設定でスマートフォン用のCSSが有効になっていない可能性があります。PC版とスマートフォン版でCSSを適用する方法が異なるため、以下の手順を試してみてください：
はてなブログにログインし、左メニュー内の「デザイン」をクリックします。
スマートフォンマークをクリックし、「PCと同じHTMLを表示する」にチェックを入れます。」
実際は上記の操作をやったところきちんと表示されました！！
問題は以下の記述がありましたが、以下のように貼り付けても逆に”目次”が消えてしまいました。このあたりCopilotに聞きましたが理由はよくわかりませんでした。でもまあ、目的は達成したので当面は上記までで、一旦終了とします。
（以下は実施したがかえってダメだった）
「スパナマーク → 「記事」の順にクリックします。
「記事上」欄にカスタマイズCSSを記載します。このとき、<style>タグで囲うことを忘れないでください。
HTML
<style>
.table-of-contents:before {
content: "目次";
font-size: 150%;
color: black;
}
</style>
AI で生成されたコード。ご確認のうえ、慎重にご使用ください。FAQ で詳細を確認。
変更を保存し、スマートフォン版でのプレビューを確認します。
これでスマートフォン版でも目次が表示されるはずです。」
実際は、先ほど述べた通り「目次」がきえてしまいました。これに関しては、ChatGPTに聞いてみましたが、はっきりしたことはわかりませんでした。
とりあえず、今回はここまでにしますね。AIとの協働はこうやっているのを実際にみせたかったので、次も考えてみたいと思います。次回は目次を線で囲んでみたいです。
できたら記事にしますね！！
ーネコケンー
