このブログでのMarkdown記法の一覧 | munus

目次

見出し#

見出し

## レベル1
### レベル2
#### レベル3

リスト#

ネストも可能。

リスト

- ul-1
- ul-2
  - ul-2-1
  - ul-2-2

ul-1
ul-2
- ul-2-1
- ul-2-2

番号付きリスト#

番号付きリスト

1. ol-1
2. ol-2

ol-1
ol-2

インラインスタイル#

強調#

強調

これは**強調表現**になります。

これは強調表現になります。

取り消し線#

取り消し線

これは~~取り消し線~~になります。
 
<! -- or -->
これは~取り消し線~になります。

これは~~取り消し線~~になります。

斜体#

斜体

これは*斜体*になります。

これは斜体になります。

脚注#

脚注

これは脚注です[^1]。
 
[^1]: これは脚注の内容です。

これは脚注です¹。

区切り線#

区切り線

---

リンク#

URL 直書き#

URL 直書きでリンクカードになります。

URL直書き

https://hypb.dev

Web技術を知る・試す・楽しむためのテックブログ

нуль favicon

нуль

インラインリンク#

インラインリンク

私については[こちら](https://munus.dev/about)

私についてはこちら

画像#

画像は assets/images/blog/[year]/[month]に入れる。

画像

!['ダミー画像'](../../../../assets/images/blog/dummy.webp "ダミー画像")

'ダミー画像' — ダミー画像

表組み#

表組み

| 指定なし | 左揃え | 右揃え | 中央揃え |
| -------- | :----- | -----: | :------: |
| a        | b      |      c |    d     |

指定なし	左揃え	右揃え	中央揃え
a	b	c	d

コード#

インラインコード#

インラインコード

`inline code`はこう書きます。

inline codeはこう書きます。

コードブロック#

コードブロック

console.log("Title example");

Highlightingコードブロック

function hoge() {
  console.log("Title example");
}

引用#

ブロック引用

コールアウト#

remark-calloutを使用してます。
コールアウトを使うときは以下のように記述します。

コールアウト

> [!note] Note
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

現状、以下のようなコールアウトを用意しています。

type	description	color
Note	注釈	default
Success	成功	green
Info	情報	violet
Example	例	violet
Faq	質問	amber
Warning	注意	red
Bug	バグ	red

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Faq

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bug

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

埋め込み#

Astro のコンポーネントを利用していくつかの Web サービスを埋め込むことができます。

Youtube#

Youtube

<Youtube videoId="9GkVhgIeGJQ" />

Spotify#

Spotify

// トラック
<Spotify trackId="3mcxHfLGMkv8PpGatFVkIm" />
 
// アルバム
<Spotify albumId="54DjkEN3wdCQgfCTZ9WjdB" />

SoundCloud#

SoundCloud

<SoundCloud query="367488743" />

Amazon リンク#

Amazon リンク

import AmazonLink from "@/components/markdown/AmazonLink.astro";
 
<AmazonLink
  imageId="41OSXObwCOL._SY425_"
  linkId="4kpJMw8"
  title="バウハウス (コンパクトミディ・シリーズ)"
  author="マグダレーナ・ドロステ"
/>

バウハウス (コンパクトミディ・シリーズ)

バウハウス (コンパクトミディ・シリーズ) マグダレーナ・ドロステ Amazon.co.jpで購入する

CodePen#

CodePen

<CodePenEmbed penId="jORZoNe" title="Matrix Rain with Canvas" />

Baseline Status#

Baseline Status

<BaselineStatus featureId="anchor-positioning" />

Twitter / X#

Twitter / X

Twitter url="https://x.com/kameno_no3/status/1784879479430525070" />

Astroで個人ブログを作ったので公開してみますhttps://t.co/jzflJqFSrX
— かめのの (@kameno_no3) April 29, 2024

数式#

インライン数式#

インライン数式

$a^2 + b^2 = c^2$ はインライン数式です。

$a^2 + b^2 = c^2$ はインライン数式です。

ブロック数式#

ブロック数式

$$
\forall \epsilon > 0, \exists \delta > 0 \text{ s.t. } |x - a| < \delta \Rightarrow |f(x) - b| < \epsilon
$$

\forall \epsilon > 0, \exists \delta > 0 \text{ s.t. } |x - a| < \delta \Rightarrow |f(x) - b| < \epsilon

これは脚注の内容です。 ↩

Meta Data

公開日:2025-03-25

Tags:

#ブログ #Markdown

Related Post

ブログのデザインを大幅に変更しました

はじめに

このブログのデザインを大幅に変更しました。

変更後のTopページ

変更した経緯としては、2つあります。以前のブログのデザインは、Astroのfuwariテーマを参考にして作成していたのですが、fuwariベースの派生テーマが公式の方でも増えてきており、ブログのデザインが他の人と被るのが嫌だなとなり思い切ってデザインを大幅に変更してみました。

また、以前は記事にカテゴリーを設定していたのですが、この雑記ブログにはタグのみの方が記事の分類として迷いがなくなって書きやすくなると感じたので、カテゴリーを廃止して一覧性をよくしようと思いました。

この記事では、デザインを変更したAstro製のこのブログについて、サムネイルに記事の一部を表示する方法を紹介します。

公開日:2026-02-06

技術ブログにブラウザの対応状況を表示するBaseline Status Webコンポーネントを入れる方法

はじめに

技術ブログを複数運営しているのですが、CSS などのプロパティで一部のブラウザのみでしか対応していないものがあります。その際に、ブラウザの対応状況を表示するコンポーネントを入れておくと、ブラウザの対応状況が分かるので、ブログを見ている人にも分かりやすいと思います。

↓ 運営している技術ブログ

https://hypb.dev

https://feylo.dev

今回紹介する Baseline Status Web コンポーネントは、ブラウザの対応状況を表示するための Web コンポーネントです。このコンポーネントをブログ内で使用することで、ブラウザの対応状況を簡単に表示することができます。この Web コンポーネントを Astro 製のブログと Nuxt 製のブログで使う方法を紹介します。

使用イメージは ↓ のような感じになります。

<BaseLineStatus featureId="anchor-positioning" />

Baseline Status Web コンポーネントの使い方

npm で使う場合

npm でbaseline-statusをインストールします。

npm install baseline-status

使用する際はそのまま import して表示する featureId を指定するだけで上記のような感じで表示されます。

import "baseline-status";

<baseline-status featureId="anchor-positioning" />

公開日:2025-07-16

Astroで雑に書ける個人ブログを作りました

雑に書ける場所が欲しくなったので、Astro で 2 個目の個人ブログを作成しました。普段は、👇 の技術ブログで主にフロントエンドに関しての記事を書いています。

https://hypb.dev

上記のブログでは、技術系しか書けない感じになっていたので、こちらではもっと雑にインターネット上に残していきたいと思います。

Aboutページに書いてある通り、音楽・映画・小説などが好きなので、それらに関する記事を書いていきたいです。

デザインについて

デザインに関しては、Astro テーマのFuwariを参考にして作成しました。ほぼ丸パクリですが、Fuwari テーマを見て雑記ブログを作りたいと思ったのでこれで良しとします。

フォントは日本語はKiwi Maru、英語はIBM Plex Monoを使っています。フォントのおかげで可愛い感じが出て良かったです ✨

Fuwari テーマの方は、Svelte や swup を使ってたりでカスタマイズするのが難しそうな感じですが、自分の作成した本ブログはコードも分かりやすく作成したので、サクサク作成することができました！

公開日:2025-04-01

Profile

kamenono / かめのの
音楽・読書・数学・プログラミングが好き。

Social

SNS 関係は下記です。フォローはお気軽にどうぞ。

X / Twitter
GitHub
Filmarks
読書メーター

My Favorite

私を構成する 42 枚は下記です。
趣味が合う人がいたら仲良くしてください。

音楽

技術ブログです。
主にフロントエンド周辺について書いています。
サイト名の由来はロシア語で零を意味することからつけました。

初学者向けの Web 制作についての
メディアサイトになります。
主にWeb制作におけるアニメーションの実装方法について解説しています。