よく使うMarkdown記法

Qiitaの記事を書くにあたりMarkdown記法のやり方が調べてもなかなか分かりづらいのと個人的な備忘録のためにも内容を書いていきます。

<br>

Qiita公式の記事はこちらです
Markdown記法 チートシート

https://qiita.com/Qiita/items/c686397e4a0f4f11683d


<br>


Markdown記法画像
![CheatSheetImage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/047a4665-dada-37f6-a37e-4d7c97ec4837.png)
よく使うのは記事書く前にQiita記事内画像で説明してくれています。

<br>

![slash.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/457e0659-8195-f206-3371-449c9cc3ba79.png)
また半角スラッシュでも補完機能で入力出来る機能もあります。


<br>


<br>

# 見出しを作る
見出しを作る場合は以下のようになります。

# これはH1タグ見本です
```
# これはH1タグ見本です
```
コピペできます。


<br>


### これはH3タグ見本です
```
### これはH3タグ見本です
```
コピペできます。


<br>


###### これはH6タグ見本です
```
###### これはH6タグ見本です
```
コピペできます。
このように『#』を入れることでタグが作れます。
#の数が多いほど文字の大きさは小さくなります。



<br>



<br>










# 行間隔を空ける
記事を書く際に文字が繋がっていると見にくいので行間隔を空けます。


一行空ける
 < br >
一行あける

```
<br>
```
コピペできます。
上と下を一行空けて下さい。
それで行間が空きます。
画像↓
![空白.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/a3f302a8-2f30-f3bf-3ca9-d8d90ab34667.png)



<br>


<br>



# コピー&ペーストのブロックを作る
コピペする時のブロックの作り方です
これです↓
```
バッククォート
```
コピーして貼り付けたい箇所の上下を『```』で囲みます。
この特殊文字『`』は「バッククォート」と言います。
MacBookで打ち込む場合は『@』と一緒のキーにあります。
英数にして『⇧』マークのシフトキーを押しながら入力して下さい。

<br>

```
[```]
```
コピペできます。[ ]は外して下さい。


<br>

画像↓
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/f650e4c4-4c60-e293-30e3-26891381c66f.png)
このように書いています。

<br>


<br>


# コードをコピー＆ペーストする
先ほどのコピペと同じですがより詳細にしたやり方です。

例えば以前使ったこちらで説明します
Qiita記事で見るとこのように表示されています。

```Root.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
 <key>StringsTable</key>
 <string>Root</string>
 <key>PreferenceSpecifiers</key>
 <array>
        <dict>
            <key>Type</key>
            <string>PSChildPaneSpecifier</string>
            <key>Title</key>
            <string>Licenses</string>
            <key>File</key>
            <string>com.mono0926.LicensePlist</string>
        </dict>
 </array>
</dict>
</plist>
``` 

<br>

実際の入力画面で見るとこのように書いています。
画像↓
![２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/2f94024c-0940-cd59-e50b-20235adb2d50.png)
コピペする時は基本的に『```』で上下を囲みます。

今回の場合のように『Root.plist』と何についてのコードなのかを記載する時は上の『```』の後に「Root.plist」と書きます。

<br>

```shell
if [ $CONFIGURATION = "Debug" ]; then
    ${PODS_ROOT}/LicensePlist/license-plist --output-path $PROJECT_NAME/Settings.bundle
fi
``` 
またこのようなコード内容を表示させたい時は『shell』をつけます。
すると白だけのコードから色がついた状態になるので分かりやすいです。

画像↓
![shell.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/07a24916-62e8-7aa1-a7af-75e10e2a3a49.png)
実際の入力画面です。

<br>

![shell2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/b75b5e98-8b34-4918-40da-7fdfeae9ed9c.png)
sheと入力するだけでQiitaの補完機能で何を表示させたいのか予測が出るので自分の書いているコードを選択して下さい。


![Ruby.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/44bf0341-a6a5-8ffc-149e-f64ab1a756dc.png)
『r』と入力しただけでRubyなどの言語も予測変換で表示されます。


<br>


<br>



# 色のついた見出しを書く
![GreenP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/9c279cf4-7954-eb85-c950-9b10c31660c9.png)
こんな感じの記事の書き方です。

<br>

画像です↓

![info.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/aa1787bc-0f5c-09cb-579e-347630ec74c6.png)
こちらのようにやります。
『:』この記号はコロンです。コロン3つで囲んだ後に上のコロンの後に「note info」と記載します。

他にもある詳細な書き方は公式を参考にして下さい。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

<br>


<br>



# 文字にリンクを貼る

文字にリンクを貼るケース

[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

画像です↓
![cheatsheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/547ea67b-8449-5777-666b-8c34b770b434.png)

[記事のタイトル] (記事のURL)という書き方になっています。

```
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
```
コピペできます。

<br>
※注意点

![cheatsheet2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/d781f20f-443e-ab7d-2678-c7a4cd2b83d4.png)
タイトルとURLの『](』の部分にスペースを空けないで下さい。正しく表示されません。



<br>


<br>


# リンクをそのまま貼る
リンクをそのまま貼るとタイトルと画像が表示されます。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

このようなリンクです。
こちらはURLを貼り付けて上下を一行空けて書いて下さい。

画像↓

![link.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/5978f509-8299-252f-8c3d-27bebf2682cf.png)
このように書いています。


<br>


<br>


# 画像を添付する
画像の添付方法です。

![PhotoP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/f06125cd-257c-dc83-278f-81a8d39512b8.png)
タイトルなどを入力する上の欄の本文の隣りにあるアイコンをクリックして下さい。

<br>


![uploadP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/c39ff276-ae5c-cccc-d719-3fecf8a70205.png)
載せたい画像を選択して『アップロード』をクリックします。

<br>

![uploding.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/6b07f4dc-f7fc-8e48-4547-236fc62f3524.png)

たまに白く「uploading...0」と画像が表示されないケースがあります。
大体は画像添付後にEnterキーで決定するか前後の行が空いていないなどなので空けて下さい。

画像↓
![loading2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/dedaf89c-059a-4af3-912b-a235d731d282.png)



<br>


<br>


# 画像のサイズを調整する
MacBookのスクショ画像を切り取るとちょうど良いサイズになっていますが、たまにとんでもなく画像がでかくなる時があります。

![iPhoneSettingsScreen.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/d4409be8-588a-092f-cd88-5e240c2bb903.png)
iPhoneの画面をスクショして添付するとなぜだか大きく表示されてしまいます。
これだととても見づらいので大きさを調整します。


<br>


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344207/d4409be8-588a-092f-cd88-5e240c2bb903.png" width="50%">

元のサイズから50％にリサイズしました。
これぐらいだと見やすくなるかと思います。

```
<img src="https://◯◯◯◯◯◯.png" width="50%">
```
このように書いています。
『"https://.png"』の部分は自分のサイズ調整したい画像のURLを載せて下さい。
また50%と書いてある数値を変更すると調整できます。


<br>


# 参考

https://qiita.com/Qiita/items/c686397e4a0f4f11683d