2024年7月20日3 min readDEVAstroのサイトでGoogle Adsenseを遅延読み込みするAstroで構築したサイトでGoogle Adsenseを遅延読み込みする実装方法についてまとめる。AdsenseはPartytownで動作させることができなかった。よってobserverを使用し、広告エリアの表示を起点にロードする実装を行う。
2024年7月20日4 min readDEVAstro Googleアナリティクス（GA4）のJavaScriptを遅延読み込みするAstroで構築したWebサイトにGoogleアナリティクスのJavaScriptを遅延読み込みする実装を行う。partytownというパッケージを使用する。
2024年7月19日3 min readDEVAstroのブログ記事にYouTubeをlazy loadingで埋め込むAstroで構築したBlogの記事にYouTube動画を埋め込む。パフォーマンスの影響を避けるため、astro-embedというパッケージを使用し、動画をlazy loadingする。
2024年7月19日6 min readDEVAstro Blog記事の画像にキャプションを付けるAstroで構築したブログサイトの記事にキャプション付きの画像を掲載できるようにする。2つの実装例をまとめる。1つ目はremarkプラグインによる実装。2つ目はAstroの画像最適化とキャプションをWrapperするcomponentを作成する。1つ目はmarkdown・MDX共通で使用できるが、2つ目はMDXのみ。
2024年7月18日5 min readDEVシンプルなブログカードとブックマークレットを作る【Astro】Blogでシンプルなブログカードを使いたい。Astroで構築したBlogサイトを例に、ブログカードのcomponent、追加したいサイトのmeta情報をブラウザ上でコピーできるブックマークレットを作成する。サンプルコードはこのBlogで実際に使用しているものを掲示する。
2024年7月17日6 min readDEVAstroのBlogにモバイル表示用のタブバー（TabBar）を追加するAstroで構築したBlogサイトにモバイル表示用のTabBar（タブバー）を実装する。今回は次の3つのボタンを配置する「ホームへ戻る」「Topへ戻る」「目次を表示する」。一連の実装手順についてまとめる。
