はじめに
(前置き長いので飛ばしたい方は本題に飛んでください!)
どうも!RUNTEQ68期のほーぷと申します!
RUNTEQ Advent Calender 2025のシリーズ2で12/3を担当させていただきました!
初めての投稿だったので緊張しました、、、。
少しでも誰かの役に立てたら幸いです✨
さて、
勢いって怖いですねぇ、、、。
12/3の記事を書き終わった後にふとRUNTEQのAdvカレンダーのイベントページ見てみたら
わい「あっれぇ?なんかシリーズ1に空いてる日あるなぁ??
これは天啓か??神の思し召しか何かかなぁ?」
気づいたらこの記事を書き始めてました!
思いの外、記事を書くのが楽しかったというか
気づきもあったのでできる時にやってしまおうと。
勢いって大事w
そしてアウトプットも大事、ということで早速シリーズ1の12/6分執筆させていただきました!
本題 技術記事のtipsまとめ
さて何を書こうか?
と思った時に、
はじめて書いた記事で戸惑ったことがいくつかあり、、、
- URLを貼り付けたらそのまま文字列になってしもた💦
- 文字が太くなったり、その大きさも微妙に違ったり😗
色々と煩わしく感じたので
わい「せっかくだからQiitaで記事書くときの便利機能をまとめてしまおう!
忘れっぽいし、自分で記事にまとめとくと見返すのに便利だし!」
と思い本記事にまとめることにしました。
意外と1つの機能単発の紹介記事が多く、網羅的にまとまった投稿が少なく意外でした。
(自分の調べ方が悪だけか??w)
Markdown記法を活用しよう!
Markdown記法。
プログラミングの勉強を始めRUNTEQに入学して初めて出会いました。
どうやらアメリカのジョン・グルーバーさんが2004年に開発されたフォーマットだとか。
デジタル文章を作るときに使うHTML(HyperText Markup Language)などのマークアップ言語を、簡略化できるようにプログラムされた記法のこと。
以下に使用例を列挙します!
> で引用ブロックが作れる
> こんな感じ!
こんな感じ!
#(ハッシュ / シャープマーク)で見出しを調整できる
# 見出し1(H1)
## 見出し2(H2)
### 見出し3(H3)
#### 見出し4(H4)
##### 見出し5(H5)
###### 見出し6(H6)
####### 見出し7(H7)
見出し1(H1)
見出し2(H2)
見出し3(H3)
見出し4(H4)
見出し5(H5)
見出し6(H6)
####### 見出し7(H7)
AIに聞いたらQiita用の早見表作ってくれました!H6まで機能するようです。

どうやらH1〜H6まで目次機能(TOC)が使えるようです。
H1とH2の違いがいまいちわかりませんが、、、どなたかわかりますか??
:::note で注記ブロックが作れる
:::note
本記事の説明は **macOS** を利用した例です。
環境が異なる読者の方は、適宜読み替えてご参照ください。
:::
本記事の説明は macOS を利用した例です。
環境が異なる読者の方は、適宜読み替えてご参照ください。
* (アスタリスク) や _ (アンダースコア)で強調
Markdownの早見表
| 書き方 | 表示 | 用途 |
|---|---|---|
*text* |
text | 斜体 |
_text_ |
text | 斜体(アンダースコア版) |
**text** |
text | 太字(strong) |
__text__ |
text | 太字(アンダースコア版) |
***text*** |
text | 太字+斜体 |
~~text~~ |
取り消し線 |
**強調**したい文言には積極的に使いたいですね!
強調したい文言には積極的に使いたいですね!
目次機能 (TOC: Table of Contents)を活用しよう!
先ほど紹介した#を使った見出しですが、
Qiitaはそれらを読み取ってTOCを自動で作成してくれます!
よくパソコンの右側に見る、見出しクリックするとその部分まで飛んでくれるアレです。
読者目線で考えた際に、
どんな内容の記事か一目見てわかるように意識できると良きとおもわれます。
リンクカードを活用しよう!
https://help.qiita.com/ja/articles/qiita-article-guideline
👆URLむき出しだとなんだか詐欺サイトに飛ばされそうで怪しく感じたり、
見栄えもちょっと悪いですよね😅
せっかく記事を書くのであれば少しでも見やすいものにしたい、、、
こういう機能を知っているのとそうでないのとで、
記事そのもののクオリティや読者のモチベーションにも差が出る気がします🔥
やり方はめちゃ簡単!
(空欄)
https://(該当のURLを貼り付けましょう!)
(空欄)
これだけでQiita側が自動でリンクカードを作成してくれます!
念の為、プレビュー画面で反映されているか投稿前に確認しましょう!
キャッシュの問題や
OGP(Open Graph Protocol)を読んでカードを作る仕組みが破綻、
またはそもそもリンクがhtpps://でなくhtpp://だったりすると
リンクカードが作成されない場合があります。ご注意ください。
.
.
.
お気づきの方もいるかもしれませんが
実は先ほどの「👇いわゆる・・・」のリンクカードは
なんでかプレビューで崩れてしまったため「なんちゃってリンクカード」にしてます。
[](https://help.qiita.com/ja/articles/qiita-article-guideline)
こんな感じ💦
どうしてもリンクカードにしたいのにうまくいかない、、、
そんなと時はのこようにゴリ押しでいきましょう🔥
[](リンクURL)
リンクカードに限らず画像にリンクを紐づけられるので便利ですね!
編集画面(エディタとプレビュー)を活用しよう!
Qiitaで初めて記事を書いて感動したのは
「エディタ」と「プレビュー」を画面2分割で同時に編集できるところ!
Githubでpr書くとき等にエディタとプレビューの切り替えたぶをカチカチ押すんですが、
これを何回も押して エディタ⇔プレビュー の行き来が本当にストレスでw
めっちゃ助かったので自分はこの2分割画面での記事作成を推してます!
(ちなみに ⇔ は「すうがく」で変換すると候補の下の方に出てきます!)
おわりに
ある程度、使いそうな機能は網羅できなかな??
ちょっと途中から楽しくなってボリューミーになってしまいました💦
「こんな便利機能もあるよ〜♪」といったご意見やアドバイスあればお気軽にコメントいただけますと幸いです!
参考記事のリンクも貼ってますのでご活用ください!
(沢山あって見にくいかも、、、反省。)
皆さんの執筆活動の一助になれば幸いです!
ではまた👋
ほーぷでした⚽️
記事の下書きテンプレ
## はじめに
## 本題 〇〇
## 大見出し_01
### 中見出し_01
## 大見出し_02
### 中見出し_02
## おわりに
#### 🔗参考記事
🔗参考記事 (👇なんでかリンクカード崩れちゃってます😢)
⚪︎Qiitaで埋め込み可能なコンテンツ一覧
https://qiita.com/Qiita/items/612e2e149b9f9451c144
⚪︎良い記事を書くためのガイドライン
https://help.qiita.com/ja/articles/qiita-article-guideline
⚪︎CommonMark Spec(Markdownとは?について英語でずら〜っと書いてあります。)
⚪︎Markdown入門ガイド:これだけは知っておきたい基本と便利な技
https://qiita.com/i-chini-techoes/items/b77c4370be167c2def2b
⚪︎Markdown記法 チートシート
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
⚪︎Markdown記法一覧
https://qiita.com/oreo/items/82183bfbaac69971917f
⚪︎今日からできる!見やすい記事の書き方
https://qiita.com/aiandrox/items/f2f93a68a22bd460d3f4
⚪︎Qiitaで画像を表示してリンクさせるやつ(リンクカード)の書き方
https://qiita.com/taqro/items/becdef08007080b85d09
⚪︎記事内にQiita リンクカードが多い場合に、カードが表示されないことがある
https://github.com/increments/qiita-discussions/discussions/226
⚪︎QiitaのMarkdownパーサー変更にともなう「リンク」「オートリンク」「Qiita リンクカード」の記載方法について

