【初心者】Astroでホームページ作成チュートリアル
AIを使ってWebサイトを作り、HTMLコードを出力することも増えてきました。そのままサーバーにアップしてもいいのですが、ヘッダーなど複数ページで繰り返す部分がそのままだと後で修正が大変なことに...
10
16
Comment0
51 search resultsShowing 1~20 results
Stocked
You need to log-in
AstroサイトにGA4、GTMを導入する
アクセス解析のために、GA4やGTMのトラッキングコードをAstroサイトに導入する必要があります。 Astroを使うとサイト共通のレイアウトコンポーネント（例: src/layouts/Bas...
1
1
Comment0
Astro.js サイトマップを追加する方法
サイトマップは、サイト内のページ一覧を検索エンジン（Googleなど）に伝えるファイル。これがあると、新しいページや更新したページが検索エンジンに見つかりやすくなります。 Astroなら、公式イ...
1
0
Comment1
Astroのサイトに構造化マークアップ(JSON-LD)を導入する
検索エンジンにサイトの情報を正確に伝え、検索結果での見栄えを良くするために、構造化マークアップを追加します。 ここでは、JSON-LD形式を使って、サイト共通の情報とページ固有の情報を設定する手...
2
2
Comment0
Astroサイトに動的なOGP/Twitterカードメタタグを追加する方法
ブログ記事などをSNSでシェアした際に、適切なタイトル、説明、画像が表示されるように、OGP (Open Graph Protocol) やX(Twitter)用のメタタグを設定します。 ページ...
0
1
Comment0
Astro.js サイトにTailwindCSS(v4)を導入する
TailwindCSSは、あらかじめ用意されたクラス名（font-boldやtext-lgなど）をHTMLに直接書き込むことで、CSSファイルを書かずに素早くスタイルを適用できる人気のフレームワ...
2
0
Comment0
Astro.js CSSファイルの読み込み方、使い方
Astroでは、コンポーネントごとにスタイルを当てたり、サイト全体に共通のスタイルを適用したり、SCSSを使うこともできます。 ここでは基本的な使い方を4つのパターンに分けて説明します。 Ast...
1
2
Comment0
Astro.js Javascriptの読み込み方と使い方
Astroサイトに動きを加えたり、便利なプラグインを利用したりするにはJavaScriptを使うことになります。 ここでは、Astroを使って作成したWebサイトでJavaScriptを扱う方法...
0
2
Comment0
Astro.js HTMLで作成したLPを移植する
Astroの src/pages/ ディレクトリにLP用の .astro ファイルを作成し、そこに既存のコードとアセットを組み込む方法が最もシンプルです。 すでに作成したLPを、開発中のAstr...
0
2
Comment0
Astro.js ブログ記事詳細ページをTailwindでスタイリングする
記事詳細ページはブログの最も重要な部分の一つです。情報を整理し、読みやすいようにスタイルを適用していきます。 ここでは、ページをヘッダー・ボディ・フッターのセクションに分け、ヘッダーとフッターは...
0
0
Comment0
Astro.js 記事一覧ページをTailwindでスタイリングする
前回トップページで作成した記事一覧を表示する RecentPosts.astro は「最新5件を取得するロジック」を含んでいるため、ページネーションされたデータを表示するこのページでは そのまま...
0
1
Comment0
Astro.js 記事一覧でページネーションを導入する
ブログの記事数が増えてくると、一覧ページが長くなってしまいます。ページネーションを導入すれば、ページを分割して表示でき、ユーザー体験が向上します。ここでは、Astroの paginate 機能を...
0
0
Comment0
Astroでトップページを作成する
トップページに表示する要素が増えてくると、1つのファイルにすべてのコードが書かれていると読みにくくなりがちです。コンテンツの区切りごとにコンポーネントとして分割することで、コードの見通しが良くな...
0
1
Comment0
Astroでヘッダーコンポーネントを作成する
サイトのヘッダーやフッターなど、どのページにも表示される共通の部分は、コンポーネントとして切り出すと便利です。コードの重複がなくなり、修正も一箇所で済むため、メンテナンス性が向上します。ここでは...
0
0
Comment0
AstroサイトをGitHubPagesで公開する方法
作成したAstroブログサイトを、GitHub Pagesを使って無料で公開してみます。すでにGitHubリポジトリで管理している場合は、いくつかの設定を追加するだけで簡単に公開できます。 ここ...
2
1
Comment0
Astro.js ブログ記事にアイキャッチ画像を追加する
Astroこコンテンツスキーマをカスタマイズすることでフロントマターでアイキャッチ画像を追加することができます。ここでは、AstroのContent Collectionsと <Image...
1
0
Comment0
Astro.js ファビコンの変更方法
ファビコンはブラウザのタブやブックマークに表示される小さなアイコンです。ここではAstroでファビコンを設定する方法を紹介します。 ファビコン設定の手順 1.ファビコンファイルを用意する サイト...
0
0
Comment0
Astro 新着記事一覧を最大5件で表示する
ブログのトップページに最新の記事が表示されていると、訪問者が新しい情報をすぐに見つけられて便利です。ここでは、Content Collections APIで管理しているブログ記事の中から、最新...
0
0
Comment0
Astro タグ別記事一覧ページの作り方
ここでは、「Content Collections API」とMarkdownの tags フロントマターを使って、タグごとの記事一覧ページを作成する手順を紹介します。 前提: Content ...
1
2
Comment0
AstroをCMS化してブログ記事を効率よく管理する方法
ブログ記事が増えてくると、管理が大変になりますよね。Astroの「Content Collections API」を使えば、記事を src/content ディレクトリにまとめて、安全かつ効率的...
1
2
Comment0
51 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles