HTML・CSS

astro-notion-blogの(トグル)見出しをカスタマイズする

Featured image of the post

astro-notion-blogの見出しとトグル見出しをカスタマイズしました。

astro-notion-blogの目次を折りたためるようにする

Featured image of the post

astro-notion-blogの目次を折りたためるようにしました。detailsとsummaryを使用し、CSSのみで開閉します。

astro-notion-blogのInstagram埋め込みをカスタマイズする

Featured image of the post

astro-notion-blogのInstagram埋め込みをカスタマイズしました。

astro-notion-blogのX(旧Twitter)埋め込みをカスタマイズする

Featured image of the post

astro-notion-blogのX(旧Twitter)埋め込みをカスタマイズしました。

マウスホバーでアンカーリンクが浮き出る見出しを作る

Featured image of the post

GitHub・Zenn・Qiitaのように、マウスカーソルが触れるとアンカーリンクのアイコンが浮き出る見出しを作りました。

要素が自動配置されるトグルスイッチを作る(CSSのみ・計算不要)

Featured image of the post

幅と高さを設定するだけで、座標の計算を行うことなく要素が自動的に配置されるトグルスイッチをCSSのみを用いて作りました。

astro-notion-blogでサイドバーをカスタマイズする

Featured image of the post

astro-notion-blogのサイドバーをカスタマイズしました。

astro-notion-blogで「ページの先頭に戻るボタン」を設置する

Featured image of the post

astro-notion-blogの記事に、スクロールに追従する先頭に戻るボタンを設置しました。

Fusion360の埋め込みをレスポンシブ対応にする

Featured image of the post

Fusion360の埋め込み用HTMLを書き換えてレスポンシブ対応にしました。

astro-notion-blogの記事の最初にFeaturedImageを配置する

Featured image of the post

astro-notion-blogで記事の最初にFeaturedImageを表示するようにしました。