BloggerでMarkdown記法を利用するには

<!-- ここに Markdown 記法で記述するとプレビュー時に変換される --> <img src="https://www.notion.so/images/page-cover/met_terracotta_funerary_plaque.jpg" referrerpolicy="same-origin" style="display: block; object-fit: cover; border-radius: 0px; width: 100%; height: 30vh; opacity: 1; object-position: center 10%;" /> ### Markdown記法<i class="fa-brands fa-markdown fa-flip"></i>をBlogger<i class="fa-brands fa-blogger fa-bounce" style="color: #f57c00;"></i>で利用する手順 <i class="fas fa-tag"></i>BloggerでMarkdown記法を利用するためのステップを詳しく説明します。 **ステップ 1: テーマのカスタマイズ** 1. Bloggerの管理画面にログインし、ダッシュボードにアクセスします。 2. 左側のメニューから「テーマ」を選択します。 **ステップ 2: HTMLを編集** 3. テーマページにアクセスしたら、テーマのカスタマイズを開始します。画面上部に「カスタマイズ」ボタンがあるかもしれませんので、それをクリックしてください。 4. カスタマイズ画面で、右上にある歯車アイコンをクリックし、「HTMLを編集」を選択します。 **ステップ 3: Markdown対応コードの追加** 5. HTML編集画面が開いたら、</body>タグの直前に以下のコードを追加します。 <div class="code-box"> <pre class="code lang-html" data-lang="html" data-unlink=""> <span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">"https://cdn.jsdelivr.net/npm/marked/marked.min.js"</span><span class="synIdentifier">></</span><span class="synStatement">script</span><span class="synIdentifier">></span> <span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier">></span> <span class="synSpecial"> </span><span class="synStatement">const</span><span class="synSpecial"> mdEls = </span><span class="synStatement">document</span><span class="synSpecial">.querySelectorAll</span>(<span class="synConstant">'.markdown'</span>)<span class="synSpecial">;</span> <span class="synSpecial"> </span><span class="synStatement">for</span><span class="synSpecial"> </span>(<span class="synIdentifier">let</span><span class="synSpecial"> i = </span>0<span class="synSpecial">; i < mdEls.length; i++</span>)<span class="synSpecial"> </span><span class="synIdentifier">{</span> <span class="synSpecial"> </span><span class="synStatement">const</span><span class="synSpecial"> mdEl = mdEls</span><span class="synIdentifier">[</span><span class="synSpecial">i</span><span class="synIdentifier">]</span><span class="synSpecial">;</span> <span class="synSpecial"> </span><span class="synStatement">const</span><span class="synSpecial"> converted = </span><span class="synStatement">document</span><span class="synSpecial">.createElement</span>(<span class="synConstant">'div'</span>)<span class="synSpecial">;</span> <span class="synSpecial"> converted.innerHTML = marked.parse</span>(<span class="synSpecial">mdEl.value</span>)<span class="synSpecial">;</span> <span class="synSpecial"> mdEl.parentNode.replaceChild</span>(<span class="synSpecial">converted, mdEl</span>)<span class="synSpecial">;</span> <span class="synSpecial"> </span><span class="synIdentifier">}</span> <span class="synIdentifier"></</span><span class="synStatement">script</span><span class="synIdentifier">></span> </pre> <button class="code-copy-btn">Copy</button> </div> **ステップ 4: Markdownでブログを記述** 6. ブログ記事を書くときは、HTMLモードで記述します。Markdown記法を使用するには、以下のように記述します。 <div class="code-box"> <pre class="code lang-html" data-lang="html" data-unlink=""> <span class="synIdentifier"><</span><span class="synStatement">textarea</span><span class="synIdentifier"> </span><span class="synType">border</span><span class="synIdentifier">-</span><span class="synType">style</span><span class="synIdentifier">:dotted=</span><span class="synConstant">"border-style:dotted"</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"markdown"</span><span class="synIdentifier"> </span><span class="synType">disabled</span><span class="synIdentifier">=</span><span class="synConstant">"disabled"</span><span class="synIdentifier">></span> <span class="synComment">\<!-- ここに Markdown 記法で記述するとプレビュー時に変換される --></span> <span class="synIdentifier"></</span><span class="synStatement">textarea</span><span class="synIdentifier">></span> </pre> <button class="code-copy-btn">Copy</button> </div> **ステップ 5: 保存とプレビュー** 7. マークダウンで記事を書き終えたら、記事を保存します。 8. プレビューを確認すると、Markdown記法がHTMLに変換されて正しく表示されるはずです。 これらのステップを実行すると、BloggerでMarkdown記法を使用してブログ記事を書くことができます。記法を理解し、記事の品質を向上させるために、Markdownの基本ルールを学ぶこともおすすめです。