Tag

よくある小さいタグ。小中大の3種用意。

Small

Jekyll

[markdown]

Jekyll
{: .tag .tagcard-small}

Medium

Jekyll

[markdown]

Jekyll
{: .tag .tagcard-medium}

Large

Jekyll

[markdown]

Jekyll
{: .tag .tagcard-large}

SCSS

[scss]

// Tag Card

.tag {
  display: inline-flex;
  height: 2em;
  width: fit-content;
  padding: 0;
  padding-left: 0.55em;
  padding-right: 0.55em;
  font-size: 0.85rem;
  color: #707070;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid #aaaaaa;;
  border-radius: 4px;

  &.tagcard-small {
    font-size: 0.85rem; 
  }
  
  &.tagcard-medium {
    font-size: 1.0rem;
  }
  
  &.tagcard-large {
    padding: 0 0.85rem;
    font-size: 1.3rem;
  }
}

バックや文字の色を変えたければ適当にbg-xxxxやfc-xxxxで。

Hello

Jekyll

World

その他の設定

図やコードなどのキャプション

図の表題とかコードの上にファイル名を付けたい時など、普通にPタグや H6 などでは地味であったりいらないマージンがあったりして使いづらい。クラスに.code-labelと付けると図やコードの左上キャプションになるようにする。

[css]

.code-label {
  font-size: 0.7rem;
  margin: 0 2px;
  padding: 0;
}

[markdown]

[print_out.cpp]
{: .code-label}
```cpp
std::cout << "Test";
```

それで、もうすでにこのサイトであちこち使っているキャプションだが、こんな感じになる。
　　　↓

[print_out.cpp]

std::cout << "Test";

実際にはこんなHTMLが書き出されるだけなので、デザインはCSSで好きに作りこめばいい。

<p class="code-label">[print_out.cpp]</p>

透明な線

バックが透明な線hrを入れることで、少し空きを持たせる方法もある。

次のように書くと透明な線になる。

[markdown]

-----------------------------------------
{: .none}

たまに前の段落とタイトルとかが思い通りの空きにならないときに使えるかも。ただしどの程度空くかはCSSのhrの設定しだい。

.noneはいろんな要素に使える。ただ背景だけでなくその要素自体全てが見えなくなる。もし背景だけ消したい場合は.bg-transparentを使う。 たとえばインラインコードでcodeというように小さく背景がつくようにしていた時に、その部分だけ

`code`{: .bg-transparent}

とするとcodeとなって背景が消える。

直下を狭く

線を------などで書いてhrにするのはいいけど、ブラウザデフォルトだとちょと下が広い時とかある。サブタイトルの上に区切り線を入れたが、もっとサブタイトルに近づけたいなど。.b-closerで下の要素が近づく。

↓普通のhr

サブタイトル

↓区切り線に.b-closerクラスを指定

サブタイトル

こんなふうに書くだけ

[markdown]

---------------------
{: .b-closer}
##### サブタイトル

これはもちろんhr以外にも使える。

Image, Cardの応用

Image

画像の大きさも指定できるようにしてみたかったが、markdown ( kramdown? )での画像の挿入方法に大きさを指定できる書き方があるので、わざわざ作る必要は無い。

[World Heritage]

world Heritage

[markdown]

![world Heritage](/Febris/assets/images/001.jpg){:height="128px" width="128px"}

Image variation

画像の形のバリエーションをいくつか

.border.bdr-rad-20pxなどで角丸指定

world Heritage

.roundedクラスを追加で丸い画像

world Heritage

.shadowクラスで影付き

world Heritage

丸画像で影付き.rounded .shadow

world Heritage

Shadow

.shadowクラスは1パターンのみで、凝った影をつけることはできない。ただ画像専用ではなく.shadowと追加するだけでいろんな要素に使える。

[Paragraph .border .shadow]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.box .shadow]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.card .shadow]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.button .shadow]

[Table .shadow]

Column 1 Column 2 Column 3
Cell Contents Cell Contents Cell Contents
You Can Also You Can Also You Can Also
Cell Contents Cell Contents Cell Contents
You Can Also You Can Also You Can Also

これらの仕組みを使って、サムネイル画像とリンクのついたよくあるリンクカードを作ってみる。

リンクカードを作るのに何かいいツールはないか？と探したところ、Google Chrome の拡張機能で GetTabInfoというのを見つけた。 GetTabInfoの使い方などは、リンク先を参照してほしいが、簡単なのですぐわかる。

このアドオンがなかなか便利で、リンクカードを作りたいページを単独のタブにして読み込み、テンプレートを指定すると、リンクカードのHTMLがクリップボードにコピーされるというもの。このテンプレートは%%TITLE%%,%%URL%%といった変数を置き換えているだけなので、自分でカスタマイズできる。ちなみに JSONバージョンのテンプレートも可能。

このテンプレートを下記のような markdown にしてみる。

[markdown template]

> ![%%TITLE%%](http://capture.heartrails.com/75x75/?%%URL%%){:height="75px" width="75px"}
> {: .card .link-card-image .border-none .wd}
> {: style="--wd:16%"}
>
> > [%%TITLE%%](%%URL%% "%%TITLE%%")
> > {: .link-card-title}
> > [URL: %%URL%%](%%URL%% "%%TITLE%%"){: .link-card-longurl-title}
> > {: .link-card-longurl}
> > 
> > [(short url) :  %%sURL%%](%%sURL%%){: .link-card-shorturl-title}
> > {: .link-card-shorturl}
> {: .card .link-card-url-block .border-none .wd-fit}
{: .link-card .to-flex .fc-dimgray .border .bdr-rad}
{: style="--bdr-set:1px solid lightgray; --bdr-rad:5px;"}

このテンプレートでニュースを一つ拾ってきた。最低限のスタイルは markdown で書いてあり、適当にクラス名を付けてあるのでCSSで味付けすれば、貼り付けるだけで簡単に使える。まあ用意されてる HTML のテンプレートを使っても同じことができるし、お世辞にも読みやすい markdown にはなっていないが、使い方のアイデアとして考えてみた。

プレビューがこれ

アメリカが頑なに「メートル単位」を拒絶する謎 - ライブドアニュース

アメリカが頑なに「メートル単位」を拒絶する謎 - ライブドアニュース

URL: https://news.livedoor.com/article/detail/16681735/

(short url) : https://gti.page.link/2DCfTCCpox1veH6E7

GetTabInfoから出力されたコードがこれ。

[markdown]

> ![アメリカが頑なに「メートル単位」を拒絶する謎 - ライブドアニュース](http://capture.heartrails.com/75x75/?https://news.livedoor.com/article/detail/16681735/){:height="75px" width="75px"}
> {: .card .link-card-image .border-none .wd}
> {: style="--wd:16%"}
>
> > [アメリカが頑なに「メートル単位」を拒絶する謎 - ライブドアニュース](https://news.livedoor.com/article/detail/16681735/ "アメリカが頑なに「メートル単位」を拒絶する謎 - ライブドアニュース")
> > {: .link-card-title}
> > [URL: https://news.livedoor.com/article/detail/16681735/](https://news.livedoor.com/article/detail/16681735/ "アメリカが頑なに「メートル単位」を拒絶する謎 - ライブドアニュース")
> > {: .link-card-longurl}
> > 
> > [(short url) :  https://gti.page.link/LHDQwFY3ot5gj6NA6](https://gti.page.link/LHDQwFY3ot5gj6NA6){: .link-card-shorturl-title}
> > {: .link-card-shorturl}
> {: .card .link-card-url-block .border-none .wd-fit}
{: .link-card .to-flex .fc-dimgray .border .bdr-rad}
{: style="--bdr-set:1px solid lightgray; --bdr-rad:5px;"}