迅速ブログ

マークダウン（Markdown）はテキストをHTMLに変換するための記法です。

「マークダウン記法」と呼ぶこともあります。

マークダウンの例

マークダウンはブログなどの文章をHTMLで書きたいときに知っていると便利です。

例えば、以下のような文章を書くとします。

<h1>こんにちは</h1>

<p>元気ですか？</p>

<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

これを全て入力するのは面倒です。

しかし、マークダウンなら以下のように入力するだけで同じ意味になります（正確には対応しているサービスを使うことで、上記のHTMLに変換されます）。

#こんにちは
元気ですか？

- りんご
- みかん
- ぶどう

マークダウンに対応しているサービスを使えばHTMLの文書も非常にカンタンに書くことができるので便利です。

マークダウンが使えるサービス

マークダウンは有名なサービスだとWordPressやTumblr、Qiita、GitHubなどで使用することができます。

ただし、これらの中には完全に対応していないサービスもあります（WordPressなど）。

マークダウンの基本情報

マークダウンで作ったファイルの拡張子は「.md」「.markdown」です。

公式サイトは「Daring Fireball: Markdown」になります。（英語）

また、以下のページで実際にマークダウンをHTMLに変換し、プレビューすることができます。

Daring Fireball: Markdown Web Dingus

（マークダウンを入力したら「Convert」をクリック）

マークダウンの書き方のまとめ（チートシート）です。

段落を表す方法（pタグ）

マークダウンで段落を表す場合は、空行を入れます。

以下のように1行空ければOKです。

こんにちは。こんにちは。こんにちは。こんにちは。

さようなら。さようなら。さようなら。さようなら。

HTMLに変換すると以下のようになります。

<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>

<p>さようなら。さようなら。さようなら。さようなら。</p>

それぞれの行がpタグで囲まれていて、段落が変わったことがわかると思います。

改行する方法（brタグ）

マークダウンではどれだけ改行しても、最終的な結果（HTMLに変換した結果）では無視されます。

改行したい場合は、行末に半角スペースを2つ挿入しましょう。

こんにちは  
こんにちは

わかりづらいですが、最初の「こんにちは」の後ろに半角のスペースが2つ入っています。これをHTMLに変換すると以下のようになります。

<p>こんにちは <br />
こんにちは</p>

改行を表すbrタグ<br />が挿入されているのがわかると思います。

また、2行に渡っていますが、1組のpタグで囲まれており、1つの段落であることがわかるかと思います。

強調（斜体・emタグ）

文字を斜体(イタリック)にするには斜体にしたい文字をアスタリスク「*」かアンダースコア「_」で挟めばOKです。

*斜体*
_斜体_

これをHTMLに変換すると以下の様になります。

<em>斜体</em>

文字を斜体にするemタグ<em>に変わったのがわかると思います。

強い強調（太字・strongタグ）

文字を強い強調(太字)にする方法もあります。

太字にしたい文字を2つのアスタリスク「*」かアンダースコア「_」で挟めばOKです。ちなみに<b>タグではなく<strong>になります。

**強調**
__強調__

こちらをHTMLに変換すると以下の様になります。

<strong>強調</strong>

strongタグ<strong>で囲まれているのがわかりますね。

引用（blockquotタグ）

引用を表すためには、文の先頭に半角で「>」を入れればOKです。空行を入れなければ、複数行でも問題ありません。

>こんにちは。こんにちは。こんにちは。こんにちは。

マークダウンをHTMLに変換すると、以下のようになります。

<blockquote>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</blockquote>

空行を入れたい場合は、全ての行に「>」をつければOKです。

>テキストテキストテキストテキストテキスト

>テキストテキストテキストテキスト

<blockquote>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</blockquote>

二重引用

「>」の記号を複数つけることで何重にも引用をすることができます(引用した文章内に引用文がある状態)。

>テキストテキストテキストテキスト
>>テキストテキストテキストテキスト
>>>テキストテキストテキストテキスト
>>>>テキストテキストテキストテキスト

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>

順序なしのリスト（ulタグ）

マークダウンで順序なしのリストを書くにはハイフン「-」、「+」プラス、「*」アスタリスクを使います。

これらの記号を使って箇条書きに書くと、リストタグに変換されます。

- ハイフン
- ハイフン
- ハイフン

+ プラス
+ プラス
+ プラス

* アスタリスク
* アスタリスク
* アスタリスク

このように書きます。記号の後に半角スペースを必ず入れてください。

このように書いたマークダウンをHTMLに変換すると以下のようになります。

<ul>
<li>ハイフン</li>
<li>ハイフン</li>
<li>ハイフン</li>
</ul>

<ul>
<li>プラス</li>
<li>プラス</li>
<li>プラス</li>
</ul>

<ul>
<li>アスタリスク</li>
<li>アスタリスク</li>
<li>アスタリスク</li>
</ul>

リストの中に文章を入れる

また、リストの中に文章を入れることもできます。

文章の前後に空行を入れ、行頭に半角スペースを1つ入れればOKです。

- りんご
- みかん

 フルーツです。

- ぶどう

わかりにくいですが「フルーツです。」の行頭には半角スペースが1つ入っています。

これでリスト内の項目として字下げされたHTMLに変換できます。

<ul>
<li>りんご</li>
<li><p>みかん</p>

<p>フルーツです。</p></li>
<li><p>ぶどう</p></li>
</ul>

リストの中にリストを作る（入れ子）

リスト内にリストを作る(入れ子)こともできます。

半角スペースを1ついれて、字下げすればOKです。

- りんご
 - 青リンゴ
 - ブレイバーン
- みかん
- ぶどう

この様にマークダウンを書くと、「青リンゴ」と「ブレイバーン」が「りんご」内に入ったリストになります。

<ul>
<li>りんご
<ul><li>青リンゴ</li>
<li>ブレイバーン</li></ul></li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

ちょっとわかりづらいかもしれませんが、以下の様になるということです。

• りんご
  • 青リンゴ
  • ブレイバーン
• みかん
• ぶどう

ちなみに、階層構造は番号なしリストの中に番号付きリストを作ることもできます。

順序ありのリスト（番号付きリスト、olタグ）

マークダウンでは順序ありのリスト(行頭に数字が付いた箇条書き)も書くには、リストの最初に半角数字とピリオドを書けばOKです。

1. 番号
2. 番号
3. 番号

ピリオドの後には半角スペースを必ず入れてください。

これをHTMLに変換すると、以下のようになります。

<ol>
<li>番号</li>
<li>番号</li>
<li>番号</li>
</ol>

なお、数字は以下のように全て同じ数字を使たり、順番がめちゃくちゃでもOKです。

1. 番号
1. 番号
1. 番号
5. 番号

これでも問題なくHTMLに変換できます。

全て同じ数字でリストを作ると、リストに後から項目を足したり、順番を変える際にも番号を振り直さずに済むのでオススメです。

また、こちらも順序なしのリストと同様の方法で、リスト内に文章を入れたり、階層構造（入れ子）にすることができます。

コード（codeタグ）

プログラミング等のコードをシンタックスハイライトでインライン(文中)に記すには、コードをバッククオート(`)で囲めばOKです。

HTMLの例です。`<h1>Hello World</h1>`こんな感じ。

<p>HTMLの例です。<code>&lt;h1&gt;Hello World&lt;/h1&gt;</code>こんな感じ。</p>

また、複数行にわたるコードをシンタックスハイライト(codeタグで囲む)には、タブもしくは4つ以上の空白(半角スペース)を行頭におくか、3つのバッククオートで囲めばOKです。

    function x() {
      return x;
    }

```
function x() {
    return x;
}
```

これらをHTMLに変換すると、codeタグがpreタグで囲まれ、複数行のコードをシンタックスハイライトすることができます。

<pre><code>function x() {
  return x;
}
</code></pre>

画像（imgタグ）

画像を表示するには以下のように書きます。

![image](https://example.com/image.jpg)

![image](https://example.com/image.jpg "画像です。")

角括弧([])の中に書いたテキストがalt属性、ダブルクォーテーションで囲ったテキストの中身がtitle属性になります。

<p><img src="https://example.com/image.jpg" alt="image" title="" /></p>

<p><img src="https://example.com/image.jpg" alt="image" title="画像です。" /></p>

画像をリンクにする

画像を表示するマークアップをリンクを表示するマークアップと組み合わせれば、画像をリンクにすることができます。

[![image](https://example.com/image.jpg "画像です。")](https://example.com)

<p><a href="https://example.com"><img src="https://example.com/image.jpg" alt="image" title="画像です。" /></a></p>

水平線・区切り線（hrタグ）

1行の中に、3つ以上のアスタリスク（*）、ハイフン（-）、アンダースコア（_）だけを並べると水平線になります。

***
---
___
- - -

これらは全て<hr>/に変換されます。

<hr />

なお、ハイフン、アスタリスク、アンダースコアを並べる際は、間にスペースが入っていても構いません（表示は同じです）。

また、ハイフンで水平線を表す時は、その前のパラグラフ（段落）との間に空行を入れないと<h2>の見出しになってしまう場合があるので注意しましょう。

マークダウンの方言

マークダウンは使用するサービスやエディタによってローカルルール（方言）があるため、ここで記載した通りに動かない場合もあります。

この記事の通りに記述してもうまく表示されない場合は、サービスのローカルルールを確認してみてください。

パーマリンクとはパーマネントリンク（Permanent Link）の略で、ウェブサイトやブログの各記事やページ毎に設定したURLのことです。

パーマリンクとは、ウェブサイトの各ページに対して個別に与えられているURLのことです。つまりURL自身のことになります。パーマネントリンク（Permanent Link）の略で、ページが増えても恒久的に変わることのないリンクであることから、固定リンクとも呼ばれます。

出典：パーマリンクとは？SEOへの影響や注意点について解説

パーマリンクの「パーマ」は「パーマネント」の略で「長持ち、半永久的」という意味です。髪の毛のパーマと同じですね。

意味どおり、URLが半永久的に変わらないため、パーマリンクと言います。

このパーマリンクを自分で設定できるものだと、URLを見ただけで記事の内容が分かる上、ブログサービスなどを引っ越しても記事のURLが変わらないのでとても便利です。

noteやライブドアブログなど、無料ブログの場合はパーマリンクを自由に設定できませんが、WordPressなどCMSであれば、自由にパーマリンクを設定できます。

最適なパーマリンク

WordPressなどを使用していて、自分でパーマリンクを設定できる場合にはどのような形にするのが良いのか？

基本的には、できる限りシンプルで分かりやすいパーマリンクを設定する事が大切です。

無意味な英数字や長く複雑なパーマリンクは避けるべきです。

また、ニュースサイトや日記ブログであれば日付を入れる（例：https://example.com/2023/0131/apple/）、複数人で展開するメディアであれば記者名を入れる（例：https://example.com/yamada/apple/）など、ウェブサイトに応じて工夫をする事も大切です。

決まった答えがある訳ではなく、ウェブサイトの種類や性質、機能や目的によって最適なパーマリンクの形は変わるという事です。

基本的にパーマリンクは一度決めたら後から変更するべきではありません。

しかし、何らかの理由でパーマリンクを変更する事になった場合は、リダイレクトを行い、過去のパーマリンクにアクセスしたユーザーが新しいURLの記事に移動できるように調整することが大切です。

パーマリンクを変更したままにしておくと、リンク切れを起こし、過去のパーマリンクを使ったリンクが機能しなくなってしまいます。

SEOへの影響

パーマリンクがSEO（検索順位）に影響を与えることは基本的にありません。

しかし、どんなパーマリンクでも良いという訳ではありません。

あまりに複雑なパーマリンクは検索エンジンがサイトを認識する際に支障が出る可能性があるため、SEOにおいて（間接的に）マイナスになる可能性もあります。

Googleはパーマリンクをシンプルに分かりやすいものにすることや、単語を区切る際はアンダーバー（_）ではなく、ハイフン（-）を使うことなどを推奨しています。

参考：Google における URL 構造のベスト プラクティス | Google 検索セントラル

参考

• パーマリンクとは？SEOへの影響や注意点について解説 | ナイルのマーケティング相談室
• パーマリンクとは？SEOへの影響やおすすめの決め方・設定方法を解説 | WEB集客ラボ byGMO（GMO TECH）
• パーマリンクのSEO効果を強くする。WordPressの設定で最適化しよう | Appmart株式会社