Tags: html, markdown, sample, test

更新日: 2017 年 06 月 09 日

投稿日: 2017 年 05 月 13 日

jekyllでのHTMLやmarkdownのサンプルだよー。LiquidやYAMLもちょっとあるよ。

変更点の確認用だよ。普通はこういう裏側は公開しないことが多いけど参考になるように公開するよ。

目次長いのでここから目的の場所に飛ぶと楽

Liquid
- 現在のポスト専用のイメージディレクトリのパス取得
- スクロールをトップに戻すボタン設置
YAML Front Matter サンプル
- 本ページの場合
Basic Tag 基本的なタグ
markdown での id の付け方、飛び方
Abbreviation Tag 略語であることを表す
quotation 引用
Class
Program, AA
- Code Tag
- Preformatted Tag そのままに表示
Decoration 装飾
Align 左中央右どこに揃えるか
- Text Align
  - Align Left 左 .text-left
  - Align Center 中央 .text-center
  - Align Right 右 .text-right
- Image Align
  - Align Left .align-left
  - Align Center .align-center
  - Align Right .align-right
  - Always Fit 常にぴったりなにもつけない
  - extend outside right 右に限界を越えることができる .full
Images
Misc その他
- Address Tag webサイトや記事に対しての連絡先に
- Keyboard Tag 入力してほしい内容

Liquid

Liquidのコメントアウト

{% raw %} {% endraw %}

現在のポスト専用のイメージディレクトリのパス取得

各ポストごとに専用のイメージディレクトリを作る。基本的には他のポストから使いまわしはしない。そのほうが依存が少ないのでポストが増えて過去記事を整理するときに楽。

そのとき、各ポストごとに逐一そのディレクトリのパスを手打ちするのは面倒なのでこのソースをタイトルになる最初の文章の次あたりにコピペするといい。ポストの最初の文章は一覧とかにも自動で使われるため。

使い回しが少なくなる分、リポジトリサイズは大きくなりやすいのでなるべく画像はjpgでサイズ小さく。このあたり、スマートポインタのように参照カウンタ方式にできないのだろうか………。

code

{% capture image_current_path %}{{ "/assets/images/" | absolute_url }}{{ page.title | downcase | replace: ' ' , '-'  }}/{% endcapture %}
{{ image_current_path }}

result

https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/

スクロールをトップに戻すボタン設置


{% include top_scroll %}

YAML Front Matter サンプル

本ページの場合

レイアウトのヘッダーオーバーレイ画像(ページ上のでかい画像)は3:1の1200x400pxを一応の目安にしようかな。記事一覧で画像比率バラバラだと表示がぐちゃぐちゃした感じになっちゃうので。あとでかいんだからなるべくjpgで小さく。

layout: single
author_profile: true
excerpt: "jekyllでのHTMLやmarkdownのサンプルだよ。"
# excerpt: 
header:
  #オーバーレイ画像は全部パスを上書きで/assets/images/Markdown Html Tag Sample/overlay.jpgにしてあるのでここのパスはなんでもいいよ
  overlay_image: /assets/images/overlay.jpg 
  # overlay_image: /assets/images/Markdown Html Tag Sample/sample-1200x400.jpg
  overlay_filter: 0 # same as adding an opacity of 0.5 to a black background
  caption: "祭壇………あらゆる道具(tag,markdown)が集まっている。"
  cta_label: "トップページへのリンクだよ"
  cta_url: "/"
tag: 
    - tes
    - html
    - markdown
    - sample
sidebar:
  title: "Sample Title"
  nav: sidebar-sample

Basic tag 基本的なタグ

h1 だよ

h2 だよ

h3 だよ

h4 だよ

h5 だよ

h6 だよ

# h1 だよ
## h2 だよ
### h3 だよ
#### h4 だよ
##### h5 だよ
###### h6 だよ

p

変更予定としてはdpiが普通、つまり96とかで文字が見辛い、細いのをなんとかしたいよ。あとは余裕あればちょい暗めにしたいよ。目に優しくしたいよ。あとコード例をもっとはっきりとわかりやすくしたいね。白背景に黒文字は細く見えやすい。黒背景に白文字は太く見えやすい。故にダークなテーマにするにはその辺りを考慮した調整がいる。日本語と英数字で線の太さが結構違うのが悩ましい。

pだよ

pだよ

改行 br

行末にスペースを２つ連続する。
一行と改行
一行と改行
一行と改行
一行と改行なし一行と改行なし一行と改行なし

一行と改行  
一行と改行  
一行と改行  
一行と改行なし
一行と改行なし
一行と改行なし

水平線 <hr> ————

***
----------------

Anchor Tag リンク

エディットできるロボゲーロボクラ

エディットできるロボゲー
[ロボクラ](http://robocraftgame.com/ "robocraft")

<p>エディットできるロボゲー
<a href="http://robocraftgame.com/" title="robocraft">ロボクラ</a></p>

Tables 表

名前	パワー
ちぇーん	1000	ばばばばばばばばばばばばばば・・・・
てすら	1000000	すどん！ずぎゃん！ずぎゃぎゃぎゃん

| 名前              | パワー |
| -----            | ----- | ---------------------------------|
| [ちぇーん](#)     | 1000 | ばばばばばばばばばばばばばば・・・・ |
| [てすら](#)       | 1000000 | すどん！ずぎゃん！ずぎゃぎゃぎゃん |

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6
cell1	cell2	cell3
cell4	cell5	cell6
Foot1	Foot2	Foot3

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|-----------------------------|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=============================|
| Foot1   | Foot2   | Foot3   |

Definition Lists

Definition List Title: Definition list division.

Definition List Title
:   Definition list division.

Unordered Lists (Nested) 数字なしのリストのネスト構造

List item one
- List item one
  - List item one
  - List item two
  - List item three
  - List item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

  * List item one 
      * List item one 
          * List item one
          * List item two
          * List item three
          * List item four
      * List item two
      * List item three
      * List item four
  * List item two
  * List item three
  * List item four

Ordered List (Nested)

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

  1. List item one 
      1. List item one 
          1. List item one
          2. List item two
          3. List item three
          4. List item four
      2. List item two
      3. List item three
      4. List item four
  2. List item two
  3. List item three
  4. List item four

数字ならなんでもよく、タブや順番しか見ていないらしい

List item
List item
1. List item
2. List item
List item

数字をインクリメントして記述するのはめんどくさいので全部1でいいや・・・
だけど、話のなかで「3.で2.をhogehogeする」みたいなことになっていたら
markdown上での可読性がよろしくないのでそのときは素直に順番を書いたほうがよさそう
1. List item
1. List item
    1. List item
    1. List item
1. List item

markdown での id の付け方、飛び方

test header

Go to test header

#### test header {#testid}

#### [Go to test header](#testid)

Abbreviation Tag 略語であることを表す

The abbreviation CB stands for “Cosmic Break”.

quotation 引用

Blockquotes 引用文であることを示す

A「マインクラフトしようず。」

> A「マインクラフトしようず。」

Multi line blockquote with a cite reference: 複数行版

A「今やってるゲームってなに」 B「ロボクラ。鬼斬。」 A「ほかにはないの？」 B「マイクラとかCBとかPSO2とかフィギュアヘッドとかやってたときもあったが、最近はそれらは全然。だから今というならロボクラと鬼斬。それだけだ。」 A「・・・鬼斬っておもしろいの？」 B「う～ん・・・」 A「・・・」 B「話はぶっとんでる。バランスもぶっとんでる」 A「・・・」

Cite Tag 引用内容に対して引用元の情報をつけるとき

“引用文をここに。” —引用元の著者名やタイトル、URLとかはこちらに入れる

"引用文をここに。" ---<cite>引用元の著者名やタイトル、URLとかはこちらに入れる</cite>

hatiyon — その者の頭の中より,　最近の事

<cite>hatiyon</cite> --- その者の頭の中より,　最近の事
{: .small}

Quote Tag 文章中に使う引用文

なすび投げるぞオラ––––…ッ –とはなすびの眷属の言葉。

<q>なすび投げるぞオラ&#8211;&#8211;&#8211;&#8211;&#8230;ッ</q> &#8211;とは なすびの眷属の言葉。

Class

Buttons

Make any link standout more when applying the .btn class.

Primary Button Success Button Warning Button Danger Button Info Button Inverse Button Light Outline Button

html

<a href="#" class="btn--success">Success Button</a>

markdown

[Primary Button Text](#link){: .btn}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

Large

X-Large Button Large Button Default Button Small Button

[X-Large Button](#link){: .btn .btn--x-large}
[Large Button](#link){: .btn .btn--large}
[Default Button](#link){: .btn}
[Small Button](#link){: .btn .btn--small}

Notices 注意や警告 .notice

注意! 注意したい文章にクラス {: .notice} を付与することで使えます。

Clear Float : floatのクリア .cf

てすと文章です
{: .cf}

Program, AA

Code Tag

mkdir dir ls などのコマンドやコードを文章中に書くときにどうぞ。

`mkdir dir ls` などのコマンドやコードを文章中に書くときにどうぞ。

Preformatted Tag

<pre></pre> スペースや改行とかをそのままに表示したいときに使う。AA用に最適化

　　　　　　　　　　　　　　　　　　　　　　　　　　　＿
　　　　　　　　　　　＿　　　　　　　　　　　　　／　　|
　　　　　　　　　　/　　＼　　　　　　　　　 ／　　　/
　　　　　　　　　/　　　　　＼_..　-――／　 _　　/
　　　　　　　　 |　　　　　.／　 ,――／　 ／/　/_
　　　　　　　　 |　(＼_／）　 ./　 ／　　／/ 　/`＼
　　　　　　　　 |　　／／／）ィ7T.ﾌ厂￣｀ﾌｉ ‐-_　|〉.　＿人人人人人人人人人人人人人人人人人＿
　　　　　　　　ﾉ ／,.=ﾞ''"／ 　ﾌl/_×／/　|ﾊハl　.ﾄ、＞　　　　　細かいことはいいんだよ！！　　　＜
　　　／　　 ﾉ　 i f　,.r='"-‐'つｲ._T_i`　 　.r≦lハ!|｀`　^^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^ＹＹＹＹＹ^Ｙ^Ｙ^￣
　　/　　　　ソ /　　　_,.-‐'~|　|'弋..!ﾉ 　 　 i'＋!ｌ　|　　　
　　　　／　 　,i　　　,二ﾆ⊃l　|' ' '　 ,‐- ..__ﾞｰ' .!l .|　　
　　　/　 　　ﾉ　　　 i　lﾞフ..,!l .ﾄ､　　ｌ　　｀,! 　 .ハ.!　　
　　　　　　,ｲ｢ﾄ､　　,!　,!|.../_| |l: ＞ .ヽ.. ィ ＜l 　 l|　　　
　　　　　/　iﾄヾヽ_/　ｨ"＼. | | ＼ ＼ｰ'/ ./ ,,;:`:;'ﾞ

　　　　　　　 　 |　　　　| ヽ／／＼　　　　　　　　 ＼＼
　　　　　　　 　 |　　　　|／／　　　＼＿＿＿＿_／ |　|
　　　　　　＿＿|--‐‐　‐‐-＼　　　／ |　　　　　　　|／
　　　　 ／　　／: : : : : :/ー--＼／＿_|＿＿＿＿／、
　　　／＿ ／: : : : : : :/　　 / ＼ヽ: : : : : : : : : : : : : : ヽ 　 　あら、そわそわしてどうしたの？え？なあに？
　　 /　　 /: : : : : : : :〈　　_/　　､＼l: : : : : : : :ヽ : : : : : ヽ　　もしかして、したいの？わんわんしたい？あなた、わんわんしたいのね？
　　〈　　イ ヤｷ` : , -､' ,　 ﾍ　 / ＼Y: : :ヾ : : : ヽ : : : : : | 　ダメなの？ガマンできないの？限界？もうわんわんしちゃうの？
　　 ヽ　ヽ|:ｲらﾐ: : ､: : :＼　　　＼,∧|: : :､:ヾ : : : :| : : : : : | 　わんわんしたい？そんなに私でわんわんしたいの？したくてたまらないの？
　　　 |　,∧代:| ∨ヽらヾ:ﾍ　　　∧ 〉: :/ |: :||: : : :|: : |:|: : :| 　もうだめ？する？わんわんする？ホントにこのままわんわんしちゃう？
　　　 ヽv : l　　　　 弋z}}: ﾊ　　Y ∨ヽ/ .|斗└ー|: : | |: : | 　じゃあ言える？「サイバーステップのおねえさん、わんわんさせてください」って言える？
　　　　　,V,r‐っー　　 ノ: : :|　　 ／:| r- 、　　　 /: :/〉: :/ 　ダメよ？言うまでわんわんさせてあげないわよ？ほら、いって？
　　　 ／|　＼ヽ`ー‐＜斗ィ‐-／|／ ||　　| ヽ　/_:_//／　 　わんわんいって？ダメ、もっとわんわんよ？おちついてね？
　　　＼ ヒ | |_ｨ/|　/｀/入|┐_|／て X ヽ |　　 ＼　　　　　　そうよ、わんわん…あーあ、いっちゃった。じゃあ、わんわんしましょうね？
　　　　ヽ　 ／ ＼＼ 〈 (,,,xxxx,コ_ 　 Xr┴-----|＼　　　 　もうガマンしなくてもいいのよ？ほら、わんわんして。
　　　　　〉ー>--入＿_ /￣￣ |ー---|　＼＼＼＼_|　　　 　あぁ、わんわんしてる…ほら、こんなにわんわん…わんわん……
　　　 ／|／　　 ／　</-i＿_i- |r--v-＼　 ＼/二＼|＼
　　／||　　　／＿　 !/- i＿_i--|＼　 ＼ ＼/　|　　　||　|
　　| //　 ／　,、 >　ー----　 」|　/---i　　＼＿＿_|　 |
　　| !!ミ／　／ !／／　 |--‐‐| /|＼_＿_!　　　　＿__ ∨
　 └-、　／　／　|---/し___ノ/ ＼　　＼＼_i〃　　　ヾ

Decoration 装飾

Strong Tag 強調

これは強い確信。

これは **強い** 確信。

Emphasize Tag 強調

クソゲー を強調するな。 クソゲー を。

_クソゲー_ を強調するな。 _クソゲー_ を。

Strike Tag 訂正線

CBって~~クソゲー~~たのしーなー。このように使います。

CBって<strike>クソゲー</strike>たのしーなー。このように使います。

Insert Tag 下線

大事なのはバランス調整だとおもうの。

大事なのは <ins>バランス調整</ins> だとおもうの。

Subscript Tag

例えば H₂O

例えば H<sub>2</sub>O

Superscript Tag

例えば N²

例えば N<sup>2</sup>

Variable Tag 変数であることを示す。

変数 X に代入する。

変数 <var>X</var> に代入する。

Align 左中央右どこに揃えるか

Text Align

Align Left 左 .text-left

左に揃える

Align right 右 .text-right

右に揃える

Align Center 中央 .text-center

中央に揃える

##### Align Left 左 .text-left
左に揃える
{: .text-left}

##### Align right 右 .text-right
右に揃える
{: .text-right}

##### Align Center 中央 .text-center
中央に揃える
{: .text-center}

Image Align

Align Left .align-left

テスト画像

![テスト画像](https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-150x150.png "テス")
{: .align-left}

画像周りは特にfloatによる回り込みで意図しない重なりが起きるかも。そのときは{: .cf}でクリアするといいかも

Align Right .align-right

テスト画像

![テスト画像](https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-300x200.png "テス")
{: .align-right}

Align Center .align-center

テスト画像

![テスト画像](https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-580x300.png "テス"){: .align-center}

クラスをくっつけて一行で書く必要がある。なぜならくっつけないとimgではなくpにクラス付与になってしまうから。

Always Fit 常にぴったりなにもつけない

テスト画像

![テスト画像](https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-1200x400.png "テス")

extend outside right 右に限界を越えることができる .full

テスト画像

![テスト画像](https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-1200x400.png "テス")
{: .full}

Images

Caption

this is a placeholder image — This is a figure caption.


{% capture figure_image_path %}{{ image_current_path }}sample-580x300.png{% endcapture %}
{% include figure image_path= figure_image_path alt="this is a placeholder image" caption="This is a figure caption." %}

{% capture figure_image_path %}{{ image_current_path }}sample-150x150.png{% endcapture %}
{% include figure image_path= figure_image_path alt="this is a placeholder image" caption="This is a figure caption." class="align-right" %}

Caption 1 Line 自作した1行版

これは image_current_path を事前に定義する必要もなく、include 内部で定義、そして文字列連結もしているので1行書くだけでいい。 image_path には :// が含まれていたら絶対パスとして扱い、そのまま使う。含まれていない場合は include された post の専用イメージディレクトリからの相対パスとして扱う。


{% include figure_current image_path= "sample-150x150.png" alt="this is a placeholder image" caption="This is a figure caption." class="align-right" %}

2 Column Images ( 2列で画像 )

画像をクリックすることで原寸大の画像サイズで見られる。そこでクリックすると次の画像になる。

<figure class="half">
    <a href="/assets/images/kaso-1.png"><img src="/assets/images/kaso-1.png"></a>
    <a href="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-580x300.png"><img src="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-580x300.png"></a>
    <figcaption>Caption describing these two images.</figcaption>
</figure>

<figure class="half">
    <a href="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-300x200.png"><img src="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-300x200.png"></a>
    <a href="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-150x150.png"><img src="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-150x150.png"></a>
    <figcaption>Caption describing these two images.</figcaption>
</figure>

2 Column Images ( 2列で画像 ) 1Line 自作1行版


{% include figure_current_half 
image_path_1= "sample-300x200.png" alt_1= "てすとalt1" 
image_path_2= "sample-300x200.png" alt_2= "てすとalt2" 
caption= "きゃぷしょん" 
class= "" %}

3 Column Images

<figure class="third">
	<img src="/assets/images/kaso-1.png">
	<img src="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-300x200.png">
	<img src="https://notes84.bitbucket.io/assets/images/markdown-html-tag-sample/sample-150x150.png">
	<figcaption>Caption describing these three images.</figcaption>
</figure>

3 Column Images 1Line 自作1行版


{% include figure_current_third 
image_path_1= "sample-300x200.png" alt_1= "てすとalt1" 
image_path_2= "sample-300x200.png" alt_2= "てすとalt2" 
image_path_3= "sample-300x200.png" alt_3= "てすとalt3" 
caption= "きゃぷしょん" 
class= "" %}

Misc その他

Address Tag webサイトや記事に対しての連絡先に

hoge hoge おうこく
hoge hoge 県
hoge hoge町
hoge hogeかんぱに

<address>
  hoge hoge おうこく<br /> hoge hoge 県<br /> hoge hoge町 <br />hoge hogeかんぱに
</address>

webサイトや記事についての連絡先を示すのにつかう。直近の先祖タグが article ならその記事に対して。bodyならその全体。記事内容にある記事に関係ないアドレスに対して使うのは適切ではない。

Keyboard Tag 入力してほしい内容を示すのに使う。

ただし、いくつかの使い方がありめんどくさい。

自爆という文字列を入力して下さい。

自爆ボタンを入力して下さい。

自爆という2つのボタンを順に一回ずつ押して下さい。

Win+Shift+Sキーを押すと短形指定のスクリーショットになります。

メニュー項目

入力内容の表示

<kbd>自爆</kbd>という文字列を入力して下さい。

<kbd><kbd>自爆</kbd></kbd>ボタンを入力して下さい。

<kbd><kbd>自</kbd><kbd>爆</kbd></kbd>という2つのボタンを順に一回ずつ押して下さい。

<kbd><kbd>Win</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd></kbd>キーを押すと短形指定のスクリーショットになります。

<kbd><samp>メニュー項目</samp></kbd>

<samp><kbd>入力内容の表示</kbd></samp>

Twitter Facebook Google+ LinkedIn

Markdown Html Tag Sample

84

目次 長いのでここから目的の場所に飛ぶと楽

Liquid

Liquidのコメントアウト

現在のポスト専用のイメージディレクトリのパス取得

code

result

スクロールをトップに戻すボタン設置

YAML Front Matter サンプル

本ページの場合

Basic tag 基本的なタグ

Header

h1 だよ

h2 だよ

h3 だよ

h4 だよ

h5 だよ

h6 だよ

p

改行 br

水平線 <hr> ————

Anchor Tag リンク

Tables 表

Definition Lists

Unordered Lists (Nested) 数字なしのリストのネスト構造

Ordered List (Nested)

markdown での id の付け方、飛び方

test header

Go to test header

Abbreviation Tag 略語であることを表す

quotation 引用

Blockquotes 引用文であることを示す

Cite Tag 引用内容に対して引用元の情報をつけるとき

Quote Tag 文章中に使う引用文

Class

Buttons

html

markdown

Large

Notices 注意や警告 .notice

Clear Float : floatのクリア .cf

Program, AA

Code Tag

Preformatted Tag

Decoration 装飾

Strong Tag 強調

Emphasize Tag 強調

Strike Tag 訂正線

Insert Tag 下線

Subscript Tag

Superscript Tag

Variable Tag 変数であることを示す。

Align 左 中央 右 どこに揃えるか

Text Align

Align Left 左 .text-left

Align right 右 .text-right

Align Center 中央 .text-center

Image Align

Align Left .align-left

Align Right .align-right

Align Center .align-center

Always Fit 常にぴったり なにもつけない

extend outside right 右に限界を越えることができる .full

Images

Caption

Caption 1 Line 自作した1行版

2 Column Images ( 2列で画像 )

2 Column Images ( 2列で画像 ) 1Line 自作1行版

3 Column Images

3 Column Images 1Line 自作1行版

Misc その他

Address Tag webサイトや記事に対しての連絡先に

Keyboard Tag 入力してほしい内容を示すのに使う。

You May Also Enjoy

利用規約

【鬼斬】ゲイヴァルガはここだ

ブログ名変更

Cap 84 新機能

目次長いのでここから目的の場所に飛ぶと楽

Align 左中央右どこに揃えるか

Always Fit 常にぴったりなにもつけない