Gravで使えるMarkdown記法

連載Grav CMSの使い方 第4回目:Gravで使えるMarkdown記法。

Gravで使えるMarkdown記法

Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。

  1. Grav の FTP を使ったインストール方法
  2. Grav の管理パネルを使った基本的な設定・使い方
  3. Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法
  4. Grav で使える Markdown 記法
  5. Grav のテーマ編集でよく使う変数と Twig の解説

第4回目は Grav で使える Markdown 記法です。

なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。

Grav では一般的な Markdown に加え、 一部の GitHub Flavored Markdown に対応しています。 また、 Grav だけで使える特殊な記法もあります。 解説は Grav だけで使える記法 のみします。

見出し H1~H6

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

水平線 hr

___
---
***

段落 p 改行 br

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.  
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

そのまま。行末にスペース2つで改行

太字 strong

**rendered as bold text**

イタリック i

_rendered as italicized text_

取り消し線 del

~~Strike through this text.~~

引用 blockquote

> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

順序のないリスト li

* valid bullet
- valid bullet
+ valid bullet
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem

順序のあるリスト ol

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

インラインコード code

In this example, `<section></section>` should be wrapped as **code**.

インデントコード pre code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

ブロックコード pre code

``` 
Sample text here...
```

シンタックハイライト

``` js
grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
});
```

表 table

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

右寄せ

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

中央寄せ

| Option | Description |
|:------:|:-----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

コメント <!-- -->

<!--
This is a comment
-->

リンク a

[Assemble](http://assemble.io)

タイトル付き

[Upstage](https://github.com/upstage/ "Visit Upstage!")

名前アンカー

# Table of Contents
  * [Chapter 1](#chapter-1)
  * [Chapter 2](#chapter-2)
  * [Chapter 3](#chapter-3)
## Chapter 1 <a id="chapter-1"></a>
Content for chapter one.

## Chapter 2 <a id="chapter-2"></a>
Content for chapter one.

## Chapter 3 <a id="chapter-3"></a>
Content for chapter one.

Grav だけで使えるリンク

[link](../../sky)
[link](/01.blue/01.sky)

相対/絶対パス・数値プレフィックスあり/なし どちらでも大丈夫です。

属性

[Big Button](../some-page?class=button,big)
[Unique Button](../some-page?id=important-button)
[NoFollow Link](../some-page?rel=nofollow)
[Link in new Tab](../some-page?target=_blank)
[Combinations of Attributes](../some-page?class=button&rel=nofollow&target=_blank)

classidreltarget 属性が使えます。

画像リンク

![Minion](http://octodex.github.com/images/minion.png)

Alt 付き

![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

id 指定

![Alt text][id]
[id]: http://octodex.github.com/images/dojocat.jpg  "The Dojocat"

Grav だけで使える画像リンク

![Test Image](../../01.blog/02.my_folder/test_image.jpg)
![Test Image](/blog/my_folder/test_image.jpg)

相対/絶対パス・数値プレフィックスあり/なし どちらでも大丈夫です。

属性

![My Image](my-image.jpg?class=float-left,shadow)
![My Image](my-image.jpg?id=special-id)
![My Image](my-image.jpg?class=float-left,shadow&id=special-id)

class id 属性が使えます。

メディア

Grav では多くのメディアファイルに対応しています。 また、 組み込み機能によってサムネイルなどを動的に生成できます。 生成されたファイルは自動的にキャッシュされ、 変更された時は最新のバージョンを使用できるシステムになっています。

Grav 対応メディアファイル

メディアタイプ ファイルタイプ
画像 jpg, jpeg, png
音声 mp3, wav, wma, ogg, m4a
アニメーション画像 gif
ベクタ画像 svg
動画 mp4, mov, m4v, swf
データ/情報 txt, doc, html, pdf, zip, gz

[title](url "alt"]{.classes}

![Some ALT text](sample-image.jpg "My title") {.myclass}

Sample Image

システム設定で Markdown Extra を有効にする必要があります。

リンク

![Image link](sample-image.jpg?link)

Image link

メディアファイルにリンクを付加します。

表示モード

![Image link](sample-image.jpg?link&display=text)

Image link

モード 説明
source 実際の画像、動画、ファイルなどメディアの標準表示
text メディアのテキスト表示(title)
thumbnail このメディアオブジェクトのサムネイル画像

Lightbox([幅、高さ])

![Sample Image](sample-image.jpg?lightbox=600,400)

Sample Image

FeatherLight プラグイン が必要です。

サムネイル

![Sample Image](sample-image.jpg?thumbnail=default&display=thumbnail)

Sample Image

pagedefault が選択できます。 サムネイル画像の保存先は以下の場所になります。

  1. 同じフォルダ
    • [media-name].[media-extension].thumb.[thumb-extension]
  2. user フォルダ
    • user/images/media/thumb-[media-extension].[thumb-extension]
  3. system フォルダ
    • system/images/media/thumb-[media-extension].[thumb-extension]

page で 1 を使用し、 default で 2 または 3(2が優先)を使用します。 なお、 1 がある場合は display=thumbnail を付けなくても、 自動的にサムネイルが使用されます。

リサイズ(幅、高さ、[背景])

![Sample Image](sample-image.jpg?resize=400,200,0x646464)

Sample Image

アスペクト比を維持して幅、高さでリサイズして、 指定サイズに足りない部分は指定がない場合 PNGなら透明、 JPEG なら白で背景が付加されます。

強制リサイズ(幅、高さ)

![Sample Image](sample-image.jpg?forceResize=200,300)

Sample Image

アスペクト比を無視して幅、高さでリサイズします。

切り取りリサイズ(幅、高さ)

![Sample Image](sample-image.jpg?cropResize=300,300)

Sample Image

アスペクト比を維持して幅、高さでリサイズします。

切り取り(X、Y、幅、高さ)

![Sample Image](sample-image.jpg?crop=340,50,300,200)

Sample Image

左上をX、Yとした位置で幅、高さで切り取ります

切り取りズーム幅、高さで

![Sample Image](sample-image.jpg?cropZoom=600,200)

Sample Image

アスペクト比を維持して、指定した長辺方向でリサイズしてから短辺方法を切り取ります。

クオリティ

![Sample Image](sample-image.jpg?cropZoom=300,200&quality=25)

Sample Image

画質を 0~100 で設定します。 100が最高画質です。

ネガポジ反転

![Sample Image](sample-image.jpg?cropZoom=300,200&negate)

Sample Image

画像の色を反転させます。

明るさ

![Sample Image](sample-image.jpg?cropZoom=300,200&brightness=-100)

Sample Image

輝度フィルタを -255~255 で設定します。 正数が明るく、 負数が暗くなります。

コントラスト

![Sample Image](sample-image.jpg?cropZoom=300,200&contrast=-50)

Sample Image

コントラストフィルタを -100~100 で設定します。 正数がコントラストを低下し、 負数が増加します。

グレースケール

![Sample Image](sample-image.jpg?cropZoom=300,200&grayscale)

Sample Image

グレースケールフィルタを設定します。

エンボス

![Sample Image](sample-image.jpg?cropZoom=300,200&emboss)

Sample Image

エンボス加工フィルタを設定します。

スムース

![Sample Image](sample-image.jpg?cropZoom=300,200&smooth=5)

Sample Image

スムースフィルタを -10~10 で設定します。 正数がスムースになり、 負数がシャープになります。

シャープ

![Sample Image](sample-image.jpg?cropZoom=300,200&sharp)

Sample Image

シャープ加工フィルタを設定します。

エッジ

![Sample Image](sample-image.jpg?cropZoom=300,200&edge)

Sample Image

エッジ加工フィルタを設定します。

彩色(赤、緑、青)

![Sample Image](sample-image.jpg?cropZoom=300,200&colorize=100,-100,40)

Sample Image

彩色フィルタを設定します。 赤、緑、青の値を -255~255 で調整します。

セピア

![Sample Image](sample-image.jpg?cropZoom=300,200&sepia)

Sample Image

セピア加工フィルタを設定します。

回転(度)

![Sample Image](sample-image.jpg?cropZoom=300,200&rotate=-90)

Sample Image

画像を回転させます。 正数が反時計回り、 負数が時計回りです。

反転(垂直、水平)

![Sample Image](sample-image.jpg?cropZoom=300,200&flip=true,true)

Sample Image

画像を垂直、 水平に反転させます。 どちらか1つは true でなければなりません。

向き修正

![Sample Image](sample-image.jpg?fixOrientation)

Sample Image

Exif 情報にあわせて画像を回転させます。 Exif 情報がない場合はエラーになります。

組み合わせ

![Sample Image](sample-image.jpg?negate&lightbox&cropZoom=200,200)

Sample Image

アニメーション・ベクタ画像・動画

リサイズ

アニメーション画像・ベクタ画像・動画は PHP でリサイズ処理できないので指定したサイズで表示しますが、 実際に変換はされていません。

Cat

音声

![To Be a Master P.](Boom_Boom_Beckett_-_To_Be_a_Master_P..mp3)


To Be a Master P. by Boom Boom Beckett / CC BY-NC 3.0

動画

![Nature Time Lapse 2](Nature_Time_Lapse_2.mp4)


Nature Time Lapse 2 by mockmoon2000 / CC BY 3.0

サムネイル風に動画をリンクする

[![Nature Time Lapse 2](Nature_Time_Lapse_2.png)](Nature_Time_Lapse_2.mp4))

Nature Time Lapse 2)
Nature Time Lapse 2 by mockmoon2000 / CC BY 3.0

Youtube でサムネイル付きのリンクも作れます。 サムネイル取得方法は Youtube動画からサムネイル画像を取得する方法が分かりやすかったです。

[![Nature Time Lapse 2](http://img.youtube.com/vi/2t87TWp1Nxg/mqdefault.jpg)](https://www.youtube.com/watch?v=2t87TWp1Nxg?target=_blank "Nature Time Lapse 2 -微速度撮影動画まとめ2- (HD 720p) - YouTube")

Nature Time Lapse 2

レスポンシブ画像

![Retina Image](retina.jpg)

Retina Image

[image-name]@[density-ratio]x.[image-extension] を同じフォルダに用意します。 上記の場合 retina.jpg の他に retina@2x.jpgretina@3x.jpg を置いてあります。 HTML5 の srcset を指定してくれているのですが、 詳しくはHTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう が分かりやすかったです。 HTML は以下のように書きだされます。

<img alt="Retina Image" src="retina.jpg" srcset="retina.jpg 640w, retina@2x.jpg 1280w, retina@3x.jpg 1920w" sizes="100vw">

sizes の指定できます。(Media Queries は まだ Markdown では対応していません)

![Retina Image](retina.jpg?sizes=50vw)

Retina Image

次回、 Grav のテーマ編集でよく使う変数と Twig の解説に続きます。

Blog Comments powered by Disqus.