Gatsbyサイトで使える自作のMDXショートコードの紹介

<Point>ポイント</Point>

<Marker>マーカー</Marker>

<Fw>文字の太さ。デフォルトはbold</Fw>

<p style="overflow-wrap: anywhere;">
デフォルト
<Fw w="bold">bold</Fw>
<Fw w="lighter">lighter</Fw>  
<Fw w="bolder">bolder</Fw>  
<Fw w="100">100</Fw>  
<Fw w="200">200</Fw>  
<Fw w="300">300</Fw>  
<Fw w="400">400</Fw>  
<Fw w="500">500</Fw>  
<Fw w="600">600</Fw>  
<Fw w="700">700</Fw>  
<Fw w="800">800</Fw>  
<Fw w="900">900</Fw>
</p>

<Fs>文字の大きさ。デフォルトは1.1em</Fs>

<p style="overflow-wrap: anywhere;">
デフォルト
<Fs s='0.5em'>0.5em</Fs>
<Fs s='0.75em'>0.75em</Fs>
<Fs s='1em'>1em</Fs>
<Fs s='1.25em'>1.25em</Fs>
<Fs s='1.5em'>1.5em</Fs>
<Fs s='10px'>10px</Fs>
<Fs s='20px'>20px</Fs>
<Fs s='30px'>30px</Fs>
</p>

なお、この<Fs s='1.3em'>文字列のように<Fw w="bolder">複数を<Fs s="0.7em">組み合わせる</Fs></Fw>ことが</Fs>できる。

<Table>

|abc|def|ghi|
|:--|---|--:|
|overflow-x: scroll;を設定している。|画面サイズを飛び出したらスクロールできるようになる。|以上がableの説明。|

</Table>

<Table title="タイトルだよ">

|abc|def|ghi|
|:--|---|--:|
|タイトル|つけるには|title=""で|

</Table>

<Insert title='更新' dt='2020-12-16'>
  追加した情報です。pタグとinsタグに囲われる。行中なら、insタグをつかうべき。
</Insert>

<Acc title='タイトルですよ'>
  中身がアコーディオンになる。

[[emphasis]]
| 中にコンテンツを入れることも可能。

</Acc>

<Scroll href='#アコーディオン'>👆アコーディオンに移動</Scroll>

<Scroll href='html'>👆ページのTOPに移動</Scroll>

<Q>疑問です🤔</Q>
<A>答えです😎</A>

<Q>ながーーーーーーーーーーーーーーーい疑問でも上手く折り返してくれます。長いですよね。この文章。私もそう思います。でも、例示のためには仕方ないことだと思います。ご容赦ください。</Q>
<A>そうそう、書くときは一行で書いてください。出ないとpタグに挟まれてデザインがおかしい感じなってしまいます。よろぴ🙌</A>

<Grid col="3">

<p>colに一行にいくつ並べるか指定</p>

![1350*650の写真です。](./example.png)
![ここにはaltを入れる。](./example.png)
![写真です。](./example.png)

<p>600pxを下回ると一列になります。</p>

![写真です。](./example.png)
![写真です。](./example.png)
![写真です。](./example.png)
    
<p>自動でdivタグでコンテンツが囲まれます。</p>

![写真です。](./example.png)

<p>写真、文章を入れるのがいいかと。</p>

</Grid>

<Image w="50%" border="solid 5px red" br = "10px" bs="10px 10px black" f = "blur(2.5px)">

![色々できます。](./example.png)

</Image>

<BQ cite='https://sukiburo.jp/raspberry-pi-electricity-bill/'>
  電圧(V)と電流(A)から消費電力(W)を求めて、その値を時間で掛けて1000で割って1時間あたりの消費電力(kWh)を求めて、さらに1kWhあたりの単価27円を掛けて、最後に１ヶ月あたりの時間24h*30days=720hを掛けて求めるよ。
</BQ>

なんか<ASIN2Link ASIN='B08DD1F4RP'>スイッチの桃鉄</ASIN2Link>欲しい

<Talk name="default">
  デフォルトです。
</Talk>

<Talk name="default2" right>
  デフォルト2です。
</Talk>

<CfIn slugs="md-design mdx-shortcodes" />

<CfEx href="https://sukiburo.jp" title="ラズパイの設定" />

<ImgTxt>

![example](./example.png)

<Txt>
  exampleの説明です。600pxでスタイルが変わります。
</Txt>

</ImgTxt>

<KbdKey>Enter</KbdKey>を押す。
そのあと、
<kbd>
  <KbdKey>command</KbdKey>+
  <KbdKey>Enter</KbdKey>
</kbd>
を押す。

<Kbd>
  <KbdKey>command</KbdKey>+
  <KbdKey>Enter</KbdKey>
</Kbd>

<KbdMenu>ファイル</KbdMenu>を選択してください。
そのあと、
<kbd>
  <KbdMenu>ファイルを保存</KbdMenu>👉
  <KbdMenu>別名で保存</KbdMenu>
</kbd>
を選択します。

<Kbd>
  <KbdMenu>Code</KbdMenu>👉
  <KbdMenu>基本設定</KbdMenu>👉
  <KbdMenu>ユーザースニペット</KbdMenu>
</Kbd>

<ChangeLog>
  <Log time='2020/10/14'>リンクを最新の情報に変更</Log>
  <Log time='2020/12/14'>レイアウトを変更</Log>
</ChangeLog>

<Stepper>
  <Step title='title1' />
  <Step title='title2' done />
  <Step title='title3' done>
    doneでチェックマークを表示
  </Step>
  <Step title='titll4'>

  ボックスも入れることができる。ただ、インデントを一番左にしないと上手くいかない。

[[emphasis]]
| ボックスです。

  </Step>
  <Step title='title5' />
</Stepper>