テンプレというかマニュアル。

はじめに

このサイトはJekyllという静的サイトビルダーによって生成されています。

JekyllはRubyのGemです（初心者は無視）。

サーバーはGitHub Pagesを利用しています。 無料です。

このサイトのソースはGitHubに置いてますが、masterブランチにpushするたびに自動でビルドするように設定されています。

サイトの更新方法

ローカルにJekyllの開発環境を整え、サイトの変更をコミットし、リモートリポジトリ（GitHub）へpushする方法が基本的です。

開発環境の構築についてはリポジトリのREADMEファイルの方に書いておきます。

Jekyllの基礎知識・文法

まずはJekyll公式サイトにあるStep by Step チュートリアルをやってみてください。 最低限の知識はここで学べます。

Liquid

ソースのhtmlファイルを除いてみると{% hoge %}のような記法がたくさん見受けられるかと思います。 これはLiquidというテンプレート言語の文法で「タグ」と呼ばれます。

Liquidのおかげでhtml中でfor文やif文などが使えたり、他にもいろいろなことができるようになります！

公開されるhtmlにはLiquidの記述は残っておらず、Jekyllでビルドする際にコンパイルされます。

詳細は適宜ドキュメントを見てもらうことにして、以下で{{ }}や{% %}や|が出てきたらLiquidの記法だと思ってください。

Markdownチートシート

Markdown記法のチートシートです。LiquidやJekyll独自の記法も混ざっています。

拡張子が.mdのファイル内でしか機能しないので注意です。

リンク

リンクは基本的には次のように書きます；

[立命館大学](http://www.ritsumei.ac.jp)

リンクを新規タブで開く場合は次のように書きます；

[立命館大学](http://www.ritsumei.ac.jp){:target="_blank"}

外部リンクは全て新規タブで開くルールにしています。できれば守ってください。

内部リンクを貼る場合は、下記のようにしてください；

[member]({% link _pages/member.md %})

linkタグの引数には、リンク先ページの（ビルド前の）ルートからの相対パスを指定します。

linkタグの詳細はこちらを参照してください。

画像 image

• ![alt](URL)
• centering:

• 注意：画像の出力は、基本的には後述の自作マクロ images.html を使うようにしてください。

文字の装飾

• 取り消し線： 取り消します
• 太字： 太いです
• inline code: \documentclass{jsarticle}
• code block:

  \begin{align}
    F = ma \label{eq:EOM}
  \end{align}
  

表 table

ソースコード

インラインコードは`hoge`のように書きます。

コードブロックは次のように書きます；

```
<section class="hoge">
  <h1>にゃあ</h1>
  <p>ほげほげ。にゃーん</p>
</section>
```

コードの言語を指定すれば文法でハイライトしてくれます；

```html
<section class="hoge">
  <h1>にゃあ</h1>
  <p>ほげほげ。にゃーん</p>
</section>
```

あるいはJekyllで用意されているhighlightタグを使うこともできます；

{% highlight html %}
<section class="hoge">
  <h1>にゃあ</h1>
  <p>ほげほげ。にゃーん</p>
</section>
{% endhighlight %}

自作マクロ

画像

画像ファイルの配置

画像ファイルは、 /assets/img/ 以下のしかるべき場所に配置する。

• ディレクトリ構造 (/assets/img/)
  • events/
    • 学祭や新歓の特設ページ用
  • gallery/
    • いまのところ、spacialページのチラシ用
  • member-icon/
    • memberページの会員のアイコン
  • pages/
    • 固定ページ（topとかaboutとか）用
    • 基本的に増えることはないはず
  • posts/
    • newsページに表示する各post用
    • post名と同じディレクトリを作成して入れる
  • site-icon/
    • bookmarkとかに使われるこのサイトのアイコン。faviconとか。

サムネは手動で生成する。 オリジナルは消してもいい。

というのが現状なのだが、なんとかして自動化したい。

使い方

画像ソースのパスは、使用するページのヘッダーのところ（--- で囲まれているとこ）に yml で書く。

• 配列の1つめは alt オプション。
• 配列の2つ目に /assets/img/ 以下のパスのみを指定する。

マクロ解説（/_includes/image.html）

• {% include images.html dir=page.dir src=page.images %}
• 引数 dir には共通なパス与える。
  • 複数ある画像の img/ からファイル自体までの path が同じとき、それをここで指定しておけばヘッダーの配列に書くのはファイル名だけでよくなるので便利。
  • 不要であれば、引数 dir は指定しなくてよい。
• 引数 src にはヘッダーの配列の名前を与える。
• page.** は「このページに書いてある ** という変数の値」という意味。

こんな感じで出ます。

見栄え

サイト上での表示の確認です。

見出し

注：見出しは h1 は使わず、h2から始めてください。

tables

tbodyなどを用いずtable要素にtrを直置きした場合でも、ブラウザではtbodyが存在するように解釈される。

なので、table > trのようにtrが直置きされるような場合は考えないことにする。

markdownで作成

テキスト方向、クラス指定（.col-border）

基本パターン

captionなし

thead, tbody使用

tbodyのみ使用

tbodyのみ使用。thなしでtdのみ

NG: theadとtbody使用。thなし

captionあり

レイアウトいろいろ

現状のcssでは下線を引くべきthを特定できないので、セルフでクラスを付けて区別する他無いです。

.left-headerクラスをセルフで付けることを妥協案とします。

フォントサイズ

1 + 8/8 = 2     | 16 * 2     = 32
1 + 6/8 = 1.75  | 16 * 1.75  = 28  h1
1 + 4/8 = 1.5   | 16 * 1.5   = 24
1 + 3/8 = 1.375 | 16 * 1.375 = 22  h2
1 + 2/8 = 1.25  | 16 * 1.25  = 20  h3
1 + 1/8 = 1.125 | 16 * 1.125 = 18  h4-h6
1 + 0/8 = 1     | 16 * 1     = 16  p
1 - 1/8 = 0.875 | 16 * 0.875 = 14  small
1 - 2/8 = 0.75  | 16 * 0.75  = 12