見出し画像

noteに表が欲しい【初心者向け】【gist】

表って整理されてるように見えるから結構好き。
なのにnoteには表がない!
そして私が思ってることは大体先に思ってる人がいるはず…いた!!!

ただ、これはなかなか初心者さんだと「難しそう…」って思ってやらないやつだなと思ったので私が一からやってみようと思う。

手順

ログイン/アカウント登録(開始)

もうさー、この時点で結構ハードル高くない?アカウント登録が面倒くさいのよ。とか言いつつ進めなければならないので、下記リンクをクリック

右上の赤枠で囲ったところ「Sign in」もしくは「Sign up」をクリックする。

リンクをクリックすると現れるこの画面

Sign in:アカウントを持っている人
Sign up:アカウントを持っていない人
今回私は未登録なのでSign upをクリックする

ログイン/アカウント登録(必要情報の入力)

Sign upをクリックした

ここから先、以下の入力が求められる。
どれも1回入力ごとに「Continue」と出てくるので、それぞれクリックしながら進める。

・メールアドレス
・パスワード
・ユーザー名
・メール送信可否
→「Receive occasional product updates and announcements.」は
「製品のアップデートやお知らせを受け取りますか?」という項目なので、チェックはつけてもつけなくてもいい。

基本的なデータを設定する

入力が終わったら「Continue」を押すと画面が変わる。

ログイン/アカウント登録(人間であることの証明)

「検証する」でロボットではないことの証明をする。下の「音声」部分でもOK

ロボットではないかを確認される
無事検証が完了するとこんな感じ。

検証が完了すると、メールアドレスあてにコードが送付されるのでそれを確認してくる。

8桁ある。

メールでコードを受け取って入力する。
やりがちなミスとして全角でいれてると変な感じになるので注意。半角で入力すること。

メールで届くコードのイメージ

入力が終わると勝手にログイン画面になるので、自分で登録した内容でログインしよう

ここでSign inができるようになる

ログイン/アカウント登録(初回アンケート)

ログインが成功したら、初回アンケートに答える。2ページ分。

アンケート1枚目

How would you desclibe youself? (あなたの属性を教えて)
・学生
・教師
・会社員
・その他

How many tesm members will be working with you? (何人のチームですか?)

アンケート2枚目

What are the top 2 things you want to do with GitHub? (あなたがGitHubに登録した理由を2つ教えて)
・新しいプロジェクトが始まる
・新しいビジネスを始める
・GitHub Copilotを使いたい
・ほかの開発者とつながる
・オープンソースプロジェクトに貢献する

プランの設定、今ここであるんだ…

アンケートが終わると、プランの選択がある。
あまり使わないことがわかっているならFreeでOK

ログイン/アカウント登録(完了)

やっっっっっっっっとだよ

やっとこさログインできた。
note作るという強めの意思がなかったらやめてたぞ。

gistを開く

ここまで来たらもう9割終わったようなもんだろ。な?そうだと言ってくれよ。

ログイン完了後の画面

そんなわけで、右上赤枠で囲ったとこのアイコンをクリックする。初期アイコンなので、みんなそれぞれ違うのかも。注意してね。

右側にメニューが出てくるのでその中で選択

真ん中らへん「+ Create new」をクリック

「+Create now」の中でもさらにメニューがある

上か下に追加で選択が出てくるので「<> New gist」をクリックする

画面が変わって出てくる。うりぼうさんが貼ってくれてた画面!!!

するとこの画面が出てくる。
改めてこのリンクを見てみよう。

わかる。これくらいさらっとになるんよ。

さらっと「右上の+押したりして以下の画面を出します」と書いてあるところ。今やっとここ。
リンク押して+押したりして出す画面。
ほらあ、未登録だとここまでに8割の人が脱落するって。

ファイル名を指定する

赤枠で囲ったところに好きなファイル名を付ける。
半角英語がおすすめ。
ファイル名の後に「.md」を半角でつける。

すると、微妙に画面が変わるのがわかるかしら(赤枠のところ)

記法に関しては一旦スキップ

うりぼうさんのnoteの画面

コードで表を書く

あとは下のスペースにゴリゴリ表を書いていくだけ。
今回はうりぼうさんが作成してくださっているコードを使おうと思う。

# markdown_Table.mdのソースコード

| 記法 | 記号(ソースコード) |
| :---: | :---: |
| 枠 | \| 内容 \| |
| 見出しのやつ | --- |
| 左寄せ(デフォ) | :--- |
| 右寄せ | ---: |
| 中央寄せ | :---: |
| **太字** | \*\*太字\*\* |
| *斜体* | \*斜体\* |
| 注釈[^1] | 注釈[^1] |

[^1]: ←は半角スペースが必要。あと絶対最後に記述される

これをコピーするにはカーソルを合わせるとコピーのマークが出てくるので、これを使うと一瞬。

PC版の画面かもしれん

gistの空白部分に張り付ける

要はここに書きたいことを書けばよい

ここでPreviewをクリックするとうりぼうさんが作っていた表と同様のものが出てくる

書いたものがどんな風に見えるのかがとても分かりやすい

どんな表ができるか確認したら、右下の「Create secret gist」をクリック

保存する

正直なところsecretでなくても何の問題もないけど、無駄に公開する必要はないのでsecretでいいと思う。

表のURLを取得

ここまでくるとうりぼうさんのページ見たほうが早いかも。
noteにリンクを貼り付けるために右上の「Embed」をクリックして、「Share」に変える

▼押すとメニューが出てくるので選択できる

コピーマークを使ってコピーする。

noteに埋め込みをする

ここまで来たらあとはnoteの埋め込み機能を使う。

ここまでくるといつもの画面

埋め込みのリンクにコピーしたリンクを貼り付けて

「適用」をクリックするとほらどんなもんだい。

私がドヤることではない。うりぼうさん本当にありがとうございました。

修正するときは

gistに戻って右上の「Edit」をクリック
「Update secret gist」をクリックすると自動でnoteにも反映される。

noteから消したいときは

埋め込みでリンクを張ってるだけなので、埋め込み部分を削っちゃえばOK。
らくちーん。
レシピ書くときとかこれ使おうかな。

最後に

で、作った表がこちらです。
をやろうと思ったけど、就寝時間が迫っていてとても眠くなってきたので、また今度。
表を作るハードル下がるのとてもよかった。

いいなと思ったら応援しよう!