このブログの記事を作成するためのスタイルガイドを掲載します。

目次

リンク

別の記事へのリンク

RYDENの新人がブログを始めました

[RYDENの新人がブログを始めました]({{ site.baseurl }}{% post_url 2016-06-24-hello-world %})

同じサブドメイン以下のページへのリンク

OGP画像

[OGP画像]({{ site.baseurl }}/assets/images/ogp.png)

詳しい仕様に関してはJekyllのドキュメントを参照してください。

見出し

必要に応じて見出しを利用してください。
記事タイトルが見出しレベル1になっており、記事中ではレベル2以降の見出しを適切に利用できます。スタイルはレベル4までしか設定されていません。

見出し2

## 見出し2

見出し3

## 見出し3

見出し4

## 見出し4

画像の貼り付け

記事中に画像を利用する場合、次のフォーマットから適切なパターンを選択してください。

大きい画像

ニューヨークの高層ビル
補足情報

画像を少し大きく表示します。コンテンツ幅より小さい画像の場合は、拡大して表示されます。キャプションの利用は任意です。

<figure class="large">
  <img src="{{ site.baseurl }}/assets/images/post/post-slug-name/image-file-name.ext" alt="代替テキスト">
  <figcaption>補足情報</figcaption>
</figure>

左にはみ出した画像

野田レッド

画像が左にはみ出して、その右には続くテキストが回りこむようになります。画像の幅は、最大でコンテンツ幅の半分です。それ以上大きい場合は縮小されます。

<figure class="drop-left">
  <img src="{{ site.baseurl }}/assets/images/post/post-slug-name/image-file-name.ext" alt="代替テキスト">
</figure>

右にはみ出した画像

野田イエロー

左にはみ出した画像の逆です。

<figure class="drop-right">
  <img src="{{ site.baseurl }}/assets/images/post/post-slug-name/image-file-name.ext" alt="代替テキスト">
</figure>

中央寄せされた画像

野田レッド

画像を中央寄せして表示します。

<figure class="centered">
  <img src="{{ site.baseurl }}/assets/images/post/post-slug-name/image-file-name.ext" alt="代替テキスト">
</figure>