マークダウン形式(ｍｄ):::開き方｜bloggerのアンカーメニュー｜初心者｜メモ帳｜


　マークダウン記法ではアンカーリンクがどうやっても反映されないので、元に戻しました。。
　マークダウンと言うと、今まではエンジニアの人御用達の難しいもの・特別なソフトが必要・費用も掛かるのでは･･と思っていたのですが、
  いつも利用しているbloggerもマークダウンの仲間なのでは？（htmlも同類だそうなので、急にそう思った）
  じゃあ、もしかすると意外に簡単に使えるかも･･と、使ってみたくなり調べました。  
　

私と同じくあまり詳しくない・初心者の方に参考になりましたら幸いです。

　

１：　MarkDownの記法など初心者のサワリ部分　

  一応、開くだけなら

  •  ＡＴＯＭというツールをダウンロードしてもいいと思います。サポート終了しましたが使い易いし無料なので未だに人気のソフトです。
  • メモ帳（ｔｘｔファイルと同じ様に）・ワードパッド・ｗｏｒｄ・ブラウザでも普通に開けますが、 markdown式で表示されず普通のテキスト方式でした。

　

２：　マークダウン方式で表示したい場合

  •  ＶＳＣｏｄｅも良いそうです（自分は使えないので割愛）。  
  •  「拡張機能を追加」するとブラウザでエディターとして閲覧が見易く出来る様ですね。  
  • ＡＴＯＭというツールをダウンロードしてもいいと思います。サポート終了しましたが人気のソフトです。
  •  たまたま目についた名前ですが、「Stackedit」などというものなどがありました。  

３：　どうやって書くのか

  •   マークダウン方式で文書を作成・表示したい場合、上記と重複しますが  
  •   ＶＳＣｏｄｅや  
  •   拡張機能を追加」するとブラウザでエディターとして使えます（例：「Stackedit」など）  
  • ほかの方法（ｂｌｏｇｇｅｒの記事編集）  偶々、bloggerで使っているという人の記事を見たので以下のようにして使えます。（コピペで使えるように残します。下の方を見てください。）  
  ソース元は以下のサイト様です。そちらが非常に分かりやすいと思われます。  
  リンクがご迷惑であれば直ぐに外しますので、お手数をおかけしますがコメント欄よりお申し出ください。 （メールアドレスは必須ではありません）
   [Google Blogger でマークダウンとシンタックスハイライトを使えるようにする](https://manymanyuni.blogspot.com/2025/03/google-blogger.html #GoogleBloggerでマークダウンとシンタックスハイライトを使えるようにする)  
  あとで確認しましたが、上記のリンクは機能していないかもです・・誠に相すみませんが、ご覧になりたい方は手動（コピペ）でお願い致します。。  

　

４：　コピペなどはこの下にあります

 先ずはテーマの編集　＞　カスタマイズ　＞　HTML編集の画面の一番下の方の

＜／ｂｏｄｙ＞直前へ以下をコピペ

    <script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/>

<script>

  const mdEls = document.querySelectorAll('.markdown');

  for (let i in mdEls) {

    const mdEl = mdEls[i];

    const converted = document.createElement('div');

    converted.innerHTML = marked.parse(mdEl.value);

    mdEl.parentNode.replaceChild(converted, mdEl);

  }

＜/ｓｃｒｉｐｔ＞・・最後の行のみは半角へ変更して下さいませ。この行（文字）だけがどうしても赤字になってしまうので、すみません。  



  引き続き、テーマの編集でhtml編集部分の少し上の方へ  
  ＣＳＳの部分に以下をコピペ（自分は＜／ｈｅａｄ＞の直前くらいに下のほうへ入れました）  

     /*   マークダウン用

---------------------------------------------------------------------------- */

.markdown  {

  width:100%;

  height:auto;

  overflow:scroll;

  background-color:#ffffff; 

}

.showdown {

  background-color:#ffffff

}

.showdown img {

  height:auto;

  width:100%;

}

  バッククオートという記号は探すと<strike>ありません</strike>でしたので、仕方なくいちいちコピペして「そのうち辞書登録しよう」と思っていましたが、  
  後日何の気なしに見ると「Ｐ」の横でした（ごく普通の安いキーボードです）。

記事内の本文に以下のタグを入れます。

<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled"> 
  <!-- ここに Markdown 記法で記述するとプレビュー時に変換される --></textarea> 
    

画像の貼り方（ブロガーで出来た方法）

  
  ```  
  ![画像が表示されなかった時に表示される文字列][blogger（適当な名前など）]
 
[blogger]:画像のＵＲＬ～～．ｊｐｇ（pngとかgifなどお好きなものを）


これで、画像の表示も出来ました。  



  これらの方法は、10年くらい前のブロガーさんの以下の記事から分かったものです。  
しかも、Githubなどの外部で編集されているみたいでした。でも、ブロガーでも使えて良かったです。  
参考になりました。ありがとうございました。

　　

５：　あとがき・参考・終わり

[Jupyter Notebookに画像を表示させる方法](https://p--q.blogspot.com/2015/10/jupyter-notebook.html #Jupyter Notebookに画像を表示させる方法)  
[ページ内リンクが動作しない場合の対処方法（https://daisuke20240310.hatenablog.com/entry/anchorlink #スペースやピリオド「.」などを含む場合）](ページ内リンクが動作しない場合の対処方法（スペースやピリオド「.」などを含む場合）)

マークダウンのチートシート（ミニ）

  以下のようにhtmlのタグも使えます。
  •   - 下線は＜ｕ＞文字＜／ｕ＞
  •   - 訂正線は＜ｓｔｒｉｋｅ＞文字＜／ｓｔｒｉｋｅ＞  

  後で分かったこと：アイキャッチの画像は不可

bloggerでマークダウンへ画像を挿入したものは記事一覧のアイキャッチ画像にはならない様です。  html式だと、いつもの通りアイキャッチになりました。  


　記事内のアンカーメニューを付けるのに色々試しているのですが、
今のところ毎回URLを指定しないと出来ません。簡単な記法などがあれば追記します。

終わり｜参考：

　ずっと難しくてソフトやプログラミング言語の必要な大変なものだと思い込んでいましたが、

やってみて良かったです。ソフトのＤＬしなくても使えて助かりました。

　他の人が「文書がスッキリする」「楽」などと仰って勧められている気持ちが分かりました。

後日追記：記事内のメニュー（アンカーリンク）が反映されていませんでした。お見苦しくて申し訳ございません。 「このブログ内でお探しのページは存在しません。」というページになってしまいますが、調整中ですが、アンカーリンク（記事内のメニュー）が反映されていたり飛べなかったりして困っています。 なんで日によって違うのでしょうか。。分かったら加筆修正します。  

参考：

【初心者向け】Markdown記法の基本と活用テクニック｜簡単にキレイな文書を作成！
https://www.choge-blog.com/programming/markdown/

ーーーここと

Google Blogger でマークダウンとシンタックスハイライトを使えるようにする
https://manymanyuni.blogspot.com/2025/03/google-blogger.html

【令和最新版】Blogger で Markdown を用いて記事を書く方法
https://qiita.com/wk8oor/items/267ea5ad4f8c120eaeb8

　－－－ここと

【初心者向け】Qiitaでよく使うMarkdownの記法チートシート
https://qiita.com/FlatBone/items/a7159a28a47cc9ece4cc

BloggerでMarkdown書けるようにした。https://qiita.com/her0m31/items/1804bdc251a647e0e9a8

　－－－ここと

Markdown で Blogger の記事を書く
https://kuttsun.blogspot.com/2017/06/markdown-blogger.html

Bloggerテーマの作成(2)マークダウンで記事が書けるようにする　p--qhttps://p--q.blogspot.com/2021/11/blogger2.html

Jupyter Notebookに画像を表示させる方法
https://p--q.blogspot.com/2015/10/jupyter-notebook.html

ーーーここと

様々なブラウザやテキストエディタでMarkdownを表示させる

https://qiita.com/C_HERO/items/194d477475f3a7f49a85

Markdown で Blogger の記事を書く -へっぽこプログラマーの備忘録 https://kuttsun.blogspot.com › 2017 › 06 › markdown-blogger.html

　－－－ここと

Qiitahttps://qiita.com › Yarakashi_Kikohshi › items › af0b334af1a1e73a5661 Markdown のアンカーリンクを理解したい - Qiita

コメント

コメントを投稿

読んで頂きありがとうございます。
お気軽にコメントして頂けると嬉しいです。
返事は９０％くらいお返ししますが、めちゃくちゃ遅い場合があります。
気長にお待ちください。

このブログの人気の投稿

tuta:::暗号化メールの登録方法｜ブロックの原因｜複数アカウント｜エイリアス｜｜

イメージ
　2025年、新規登録は格段にスムーズになっています。しかし、うまくいかない時は以下の方法が確実です。 複数のアカウントは、有料の契約であれば作成は出来るが無料アカウントは１人につき１つだけに限られているとの事。 　後日談：2024年4月頃に、2つ目のアカウントを登録しようとしたら・・普通に申込フォームでは出来ませんでした！！ アカウントの作り難さは全く変わっていない様子です！なので、以下は参考になると思います。 　ドイツ製の暗号化メールtuta（ツタ・tutanota・ツタノタ・トゥータノータ)メールは 「全文検索」出来るとのことで（protonmail でも出来る様になりました。 は出来ない、又は有料（高額なプラン）かもしれません） 使ってみたくてスマホから登録してみましたが。（アプリで登録しようとしてもブラウザに飛びました。直近の情報） 色々問題もあったのですが、ブロックも解決したのでその方法と、 登録する為に調べたこと・少し使って気になった事を備忘録として残します。。 （申し訳ないですが・・この記事には細かい手順は参考程度しかありませんが。。） 私と同じくあまり詳しくない人に・・、参考になりましたら幸いです。 目次 　　 １：　新規登録でブロックされた・確認・原因 　　 ２：　複数アカウント・複数アドレス（エイリアス）は？ 　複数アカウントは可能？ 　エイリアスメール（複数アドレス）の方法 　複数のアドレスを統合する方法 　 ３：　検索した結果：解決方法 　　 ４：　取得できるメールアドレス（ドメイン）一覧 　　 ５：　料金プラン・参考・終わり 　　　 　 １：　新規登録でブロックされた・確認・原因 　後日追記：おそらく、運営までメールしないことには新規の登録は 出来ないみたいでした。 す 。かくいう自分は、メールをして数時間後に開通出来ました。 できた方法は、当初は他の記事でしたが、ブログ引っ越し中で重複してしまい そっち（他の記事）は下書きに戻し、重複にならない様にこの記事にまとめました。 自分が成功した一つの方法は、簡単に言うと運営の会社へメールでお願いすれば ...
Read more »

protonmail::メールアドレス変更｜複数アカウント｜届かない原因｜パスワード忘れ｜｜

イメージ
　複数アカウントは運営に問い合わせたこともあり、Ｑ＆Ａなども何度か確認していますが、何年も前から禁止されてないので可能です。けど、有料アカウントでエイリアス使う方が安全度が増すのは確実で、使い捨てメールがいくつでも作れます。子会社のSimpleLoginというエイリアスメールも沢山作れて便利です。 あと、さっき気付いたのですが、2024年9月の時点では「友達を紹介」して、最大ＵＳ＄９０のクレジットが付与されるそうです。 これも有料アカウントだから？ （以前、紹介したことあったんですけど、その時は無料で使っていたせいか、こんな制度は数年間で一度もなかった・・） 随分と調べたのでまとめて覚書備忘録を残しています。 目次 　　 １：　protonmailのメールアドレス変更｜新しいデバイスの追加・機種変　　 　　 ２：　有料プラン｜支払い方法について｜サイトのヘルプ 2-1　有料プラン 2-2　支払い方法について 　 　 ３：　アカウント２つの使用感｜何台まで｜複数の設定｜ログイン失敗 　　 3-1　２つのアカウントを使っての使用感（複数アカウント） 3-2　何台まで使える？複数のデバイスの設定 3-3　ログインで失敗｜パスワードリセット 　 ４：　protonmail で、メール一斉配信で届かない場合｜VPNの場合と比較 4-1　protonmail で、メール一斉配信した場合 4-2　VPNの場合と比較 　 ５：　全文検索・参考・終わり 　　　 　 １：　protonmailのメールアドレス変更｜新しいデバイスの追加・機種変 　protonmailのメールアドレス変更をしたいと思ったのですが・・なんかややこしそうだと思って、変更しないと困ることも何もなかったので、ずっと後回しにしていました。 時間があった時、その方法について調べましたが未だによく分からないので、記事に残したいと思います。 散々、設定を弄ったりヘルプを見た感じでは、公式な方法はありませんでした。 なので、もう一つアドレスを作ってしまう（...
Read more »

フォートナイトのアカウント::ブロック｜ミュートの方法｜みまもり設定のリセット｜

イメージ
　Fortniteでフレンドから誘われても気分が乗らない・一人でプレイしたい時などに、人間関係もあって断るのが難しい場合の話です。 一時的に「ブロックは？」「ミュートは？」とか時々話していたのですが、 「そこまでしたくない」「バレる」とか言われて、本人からは何度も却下されましたけど。。。 相手が「嫌い」という訳ではなく、「良い子だったんだけどな～」と悩んでいたので フォートナイトは設定のメニューが少ないのかな？と思っていました。 （当人はＬＩＮＥ（ライン）とかは感心するほど設定や使い方を色々と知っていて、 逆に裏技の様な方法を教えてくれるほど使いこなしているので、分からないとは全然思えなくて） そこで、パソコン版の画面ならば、何かあるのではないかと調べました。 それにしても、ゲーム中にケンカとかも結構あるみたいなので「ブロック」「ミュート」は必要不可欠な筈なのですが。。 うちのうるさい子供は「死体打ち」「通報」と、物騒な言葉でキーキー言っていましたけど。。 引き続き、良い方法があればと調査中です。 　フォートナイトはリニューアルというのか、画面のデザインやメニューも結構変わってしまったらしく、知恵袋を見ていても「古い情報しかない」という意見も多かったので、今の調べた中では新しい方法のみ（２０２４年秋の時点）覚え書きを置いておきます。 目次 　 １：　オンラインステータス｜離席 ２：　設定｜ソーシャル通知の表示をオフ（と、裏技？） ３：　epicgamesの公式サイトのブロック・ミュート方法 ４：　名前変更後、フレンドを切るという方法 ５：　みまもり設定のリセット｜終わり｜参考サイト：　 １：　オンラインステータス｜離席 　オンラインステータスを「オフライン」表示にする 　離席状態だとオフラインと同じような見え方になるそうです。 「基本中の基本」な方法だそうです。ほかの方法は一応、分けました。 ２：　設定｜ソーシャル通知の表示をオフ（と、裏技？） 　設定　＞　アカウント　プライバシー　＞　ソーシャル通知を表示をオフ この設定「ソーシャル通知表示をオフ」と、 上記の「１．離席」 を同時に２つ行う（以下「オフライン表示★」）とオフライン表示に...
Read more »