素人がスマホでのブログ作成で目次・リンクを作るには with ChatGPT

なにかを探してる時、サイト内に目次があって、すぐに目的の場所に飛べるようになってるのって便利ですよね。


私のブログはスマホ(Amebaアプリ)で書いてるのですが、そんな人間でも目次は作れるのでしょうか？ということをトライしました


※サイト内リンクはブラウザで見た時のみ有効です。Amebaアプリでは機能しません。



書いてる人：このブログを書いてる夫婦の夫の方。HTMLの知識は皆無。プログラミングはちょっとできるので、フィーリングはわかる。



スマホでもHTML編集できるけど……

HTML編集できれば、目次を作れそうです。

▽参考

HTML編集はスマホのアメーバアプリでもできるのですが……

狭い画面で見づらく編集できる気がしません……。

そもそも私はHTMLは齧ったことすらないです。










chatGPTを使う

そんなHTML編集する気が起きない人の代わりをChatGPT様にやってもらいます。

【手順】

①Amebaアプリで記事の下書き→HTML編集 を開いて、すべてコピーする


②ChatGPT (ここでは無料で使えるGPT4oを選択)に

・目次を作りたい旨

・目次のデザイン仕様(画像でも文字でも)

・先ほどコピーしたHTML


③ChatGPTさんのコードをAmebaアプリのHTML編集に貼り付けます。(元々のコードは完全に消してから)



▽左が依頼。右が回答


④完成(本ブログ)


特にミスはなく、さすが、ChatGPT様でございます👏

参考までにサンプルのコードを貼り付けておきます


<style>
/* Anchor adjustment */
.anchor {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
</style>

<div style="padding: 10px; border: 1px solid #ddd; border-radius: 5px; max-width: 300px; background-color: #f0f0f0;">
<h3 style="font-weight: bold; color: #424242; font-size: 16px; margin-bottom: 10px;">目次</h3>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding: 0.5px 0; border-bottom: 1px solid #ddd;"><a href="#section1" style="text-decoration: none; color: #424242;">[ここに入力]</a></li>
<li style="padding: 0.5px 0; border-bottom: 1px solid #ddd;"><a href="#section2" style="text-decoration: none; color: #424242;">[ここに入力]</a></li>
<li style="padding: 0.5px 0; border-bottom: 1px solid #ddd;"><a href="#section3" style="text-decoration: none; color: #424242;">[ここに入力]</a></li>
<li style="padding: 0.5px 0; border-bottom: 1px solid #ddd;"><a href="#section4" style="text-decoration: none; color: #424242;">[ここに入力]</a></li>
<li style="padding: 0.5px 0; border-bottom: 1px solid #ddd;"><a href="#section5" style="text-decoration: none; color: #424242;">[ここに入力]</a></li>
</ul>
</div>

<div id="section1">
<div class="anchor" id="section1-anchor"></div>
<h2 class="limited_heading06" data-entrydesign-alignment="center" data-entrydesign-count-input="part" data-entrydesign-part="limited_heading06" data-entrydesign-tag="h2" data-entrydesign-type="heading" data-entrydesign-ver="1.54.1" style="background:url(https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/limited041_heading.png) no-repeat;background-size:178px 11px;padding-bottom:19px;margin:8px 0;font-weight:bold;color:#424242;font-size:20px;line-height:1.6;min-height:32px;line-break:loose;overflow-wrap:break-word;text-align:center;background-position:center bottom"><span style="display:block"><span data-entrydesign-content="" style="display:block">section1</span></span></h2>
</div>
<p><br></p>
<p><br></p>
<p><br></p>
<p></p>

<div id="section2">
<div class="anchor" id="section2-anchor"></div>
<h2 class="limited_heading06" data-entrydesign-alignment="center" data-entrydesign-count-input="part" data-entrydesign-part="limited_heading06" data-entrydesign-tag="h2" data-entrydesign-type="heading" data-entrydesign-ver="1.54.1" style="background:url(https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/limited041_heading.png) no-repeat;background-size:178px 11px;padding-bottom:19px;margin:8px 0;font-weight:bold;color:#424242;font-size:20px;line-height:1.6;min-height:32px;line-break:loose;overflow-wrap:break-word;text-align:center;background-position:center bottom"><span style="display:block"><span data-entrydesign-content="" style="display:block">section2</span></span></h2>
</div>
<p><br></p>
<p><br></p>
<p></p>

<div id="section3">
<div class="anchor" id="section3-anchor"></div>
<h2 class="limited_heading06" data-entrydesign-alignment="center" data-entrydesign-count-input="part" data-entrydesign-part="limited_heading06" data-entrydesign-tag="h2" data-entrydesign-type="heading" data-entrydesign-ver="1.54.1" style="background:url(https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/limited041_heading.png) no-repeat;background-size:178px 11px;padding-bottom:19px;margin:8px 0;font-weight:bold;color:#424242;font-size:20px;line-height:1.6;min-height:32px;line-break:loose;overflow-wrap:break-word;text-align:center;background-position:center bottom"><span style="display:block"><span data-entrydesign-content="" style="display:block">section3</span></span></h2>
</div>
<p><br></p>
<p><br></p>
<p></p>

<div id="section4">
<div class="anchor" id="section4-anchor"></div>
<h2 class="limited_heading06" data-entrydesign-alignment="center" data-entrydesign-count-input="part" data-entrydesign-part="limited_heading06" data-entrydesign-tag="h2" data-entrydesign-type="heading" data-entrydesign-ver="1.54.1" style="background:url(https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/limited041_heading.png) no-repeat;background-size:178px 11px;padding-bottom:19px;margin:8px 0;font-weight:bold;color:#424242;font-size:20px;line-height:1.6;min-height:32px;line-break:loose;overflow-wrap:break-word;text-align:center;background-position:center bottom"><span style="display:block"><span data-entrydesign-content="" style="display:block">section4</span></span></h2>
</div>
<p><br></p>
<p></p>

<div id="section5">
<div class="anchor" id="section5-anchor"></div>
<h2 class="limited_heading06" data-entrydesign-alignment="center" data-entrydesign-count-input="part" data-entrydesign-part="limited_heading06" data-entrydesign-tag="h2" data-entrydesign-type="heading" data-entrydesign-ver="1.54.1" style="background:url(https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/limited041_heading.png) no-repeat;background-size:178px 11px;padding-bottom:19px;margin:8px 0;font-weight:bold;color:#424242;font-size:20px;line-height:1.6;min-height:32px;line-break:loose;overflow-wrap:break-word;text-align:center;background-position:center bottom" data-tmp-entrydesign-uuid="lo2bmqcnx5"><span style="display:block"><span data-entrydesign-content="" style="display:block">section5</span></span></h2>
</div>
<p><br></p>
<p></p>
<br>
<p></p>
<br>
<p></p>
<br>
<p></p>
<br>







注意点

この目次をHTMLで作る方法でいくつかChatGPTとAmebaアプリの注意点です。

①文字が多いとChatGPTの回答が途切れる

途切れた場合でもchatGPTさんに「続けて」と言えば、続きのコードを書いてくれます。

ただ、つなげるのが面倒なので、ブログの文字数が少ない原案の段階で実施するのが良いかと思います


②目次の文字を後からAmebaアプリ側で変更したいときは、HTML編集のほうで変更すること

ただの文字になってしまい、目次のリンク機能が無効になることがあります。


③リンクが上手くいってるかの確認はAmebaアプリではなく、ブラウザで。

Amebaアプリではサイト内リンクは無効のようです。











おわりに

今回はHTMLを触ったことがない人でもブログを作れるか？試してみました。


ChatGPTさえ使えば、もっと高度なブログデザインもいけそうですねよだれ