Markdown

🚀 はじめに この記事でわかること Markdown（マークダウン）がどんな書き方なのか なぜブログや技術記事でMarkdownがよく使われるのか Markdownがないとどんな不便があるのか Hugo＋PaperModでブログを書くときにどう役立つのか こんな人向け 中学生〜大人まで、IT知識がほとんどない初心者 「Markdownってよく聞くけど、結局なに？」を知りたい ブログやメモをシンプルに書ける方法を探している 初心者でも安心な理由 専門用語をできるだけ使わず、身近なたとえで説明 この記事だけで全体像がつかめる構成 Hugo や PaperMod を使う人にも役立つ内容 ✅ 概要解説 Markdownとは何か “記号を使って文章の構造を表す、シンプルな書き方” です。 たとえば、見出しを作りたいときは「#」、箇条書きは「-」を使います。 # 見出し - 箇条書き **太字** このように、特別なソフトを使わずに、記号だけで文章を整えるのがMarkdownの特徴です。 何のためにあるのか Markdownは、文章を「読みやすく・書きやすく・崩れにくく」するために生まれました。 HTMLのような難しいタグを書かなくていい メモ帳のようにサクッと書ける どの環境でも同じように表示される GitHub・ブログ・チャットなど多くのサービスで使える 特にHugoやPaperModのような静的サイトジェネレーターでは、Markdownが標準の書き方になっています。 Markdownがないとどうなるのか Markdownがない世界を想像すると… 見出しを書くたびに <h1>タイトル</h1> のような長いHTMLタグを書く必要がある 箇条書きも <ul><li>項目</li></ul> と書かないといけない メモ帳で書いた文章をWeb用に整えるのが大変 つまり、文章を書くたびに“作業”が増えるのです。 Markdownはこれを一瞬でシンプルにする魔法のような書き方です。 どんな場面で使えるのか Markdownは、実はあなたの身の回りの多くで使われています。 ブログ記事（Hugo / PaperMod / Cloudflare Pages） GitHubのREADME Qiita・Zennの記事 Notion・Obsidianなどのメモアプリ Slack・Discordのメッセージ装飾 特にブログでは、Markdownで書いた記事がHugoによってHTMLに変換され、PaperModテーマで美しく表示されます。 💡 小話・豆知識・逸話 1) Markdownは「読みやすさ」を最優先に作られた Markdownを作ったのはJohn Gruberというアメリカの技術系ライター。 彼は「生の文章がそのまま読める書き方」を目指してMarkdownを作りました。 実際、Markdownの文章はそのまま読んでも違和感がないのが特徴です。 2) 世界中のエンジニアが愛用する理由 エンジニアは「余計な作業を減らす」のが大好き。 Markdownは、文章を書くときの無駄な操作を極限まで減らすので、世界中で愛されています。 ...

🚀 はじめに：この記事でできること この記事は、Hugoのショートコード（Shortcodes）を使って、Markdown記事の表現力を高めるための完全ガイドです。 組み込みショートコードの使い方から、自作ショートコードの作成、PaperModでの最適化までを「操作→目的→結果→注意/補足」の順で、初心者でも迷わない構成で解説します。 補足 ショートコードは、YouTube埋め込み・画像最適化・カスタムHTMLの挿入・再利用可能なパーツ化などを簡単に実現できます。WordPressのショートコードに似ていますが、Hugoは高速でテンプレート連携が容易なのが特徴です。 🧭 前提：対象と環境 このガイドは Hugo + PaperMod + GitHub Pages でブログを運用する初心者〜中級者を対象に、記事内の表現力と保守性を高めるための実践的な手順をまとめています。 操作 作業環境：Hugo（最新安定版）・PaperModテーマ・GitHub Pagesで公開済み 記事はMarkdown（.md）で作成し、ショートコードを適宜挿入 目的 記事品質と生産性を両立：繰り返し使う表現をショートコード化し、統一感と更新容易性を確保する 結果（この時点でできること） 以降のセクションで、組み込みショートコードの活用から自作までをスムーズに実施できる 注意 テーマに同名ショートコードが存在する場合、プロジェクト側が優先されます。競合時は命名や配置を見直してください。 🧩 基本の使い方（組み込みショートコード） 組み込みショートコードの使い方を、操作→目的→結果→注意で確認します。この記事の例はPaperModでもそのまま使えます。 YouTube動画を埋め込む 操作 記事内で youtube ショートコードに動画IDを渡して埋め込みます。 目的 YouTube動画をレスポンシブ対応で簡単に埋め込む。 結果（この時点でできること） 記事本文に動画プレイヤーが表示され、モバイルでも崩れにくい。 注意 ページ表示速度への影響を抑えるため、動画の数は最小限に。必要なら折りたたみ（details）と併用して視認性を保つ。 操作（例） 🖼️ 画像ショートコード（figure） 画像をキャプション付きで挿入する標準ショートコードです。 ...