2022/08/10\感想やシェア嬉しいです/ツイートシェアはてブLINEこの間リンクの貼り方についての記事を書いたけど、ページ内リンクのことをすっかり忘れていました。笑なので今回はページ内リンクについて書きます。【html】リンクの貼り方〜aタグについて知っておきたいことchiiweb.net/media/html-a/ページ内リンクとはページ内リンクは、その名の通り「ページ内を移動するリンク」です。別ページに飛ぶことなく、そのページの指定した場所に飛んでくれるやつです。ページの上部に戻るページトップボタンや、記事の目次などに使われます。飛ばしたい箇所にidを指定して、「#id名」をリンク先に指定すればOKです。あるセクションや、見出しに飛ばしたい場合は、sectionタグやhタグにidをつけます。id="about">見出しAAA</h2>この場所までリンクで移動させたい場合は、リンク先を「#about」にします。href="#about">見出しAAAはこちら</a>余談ですが、cssを書くときも、idは#を使って表します。200%;}↑こんな感じです。ページトップボタンページの上部へ戻るボタンのリンク先は、「#」のみでOKです。href="#">ページトップへ</a>これでページの上部へ戻ってくれます。WordPress記事の場合WordPressの投稿で、ページ内リンクを貼るときは、簡単にidをつけることができます。飛ばしたい場所を選択した状態で、右側の「ブロック」エリアにある「高度な設定」をクリックします。高度な設定をクリックすると、「HTMLアンカー」を入れる入力欄が出てきますので、そこにid名にしたいアルファベットを入力してください。これだけで、見出しh2タグにidがついてくれています。検証ツールで確認してみます。idが設定されています。後は、ここに飛ばしたい場所に、飛び先を「#wordpress」とリンクで指定してあげればOKですね。注意事項idの名前は、1ページ内に1つのみです。同じ名前のidを同一ページで複数回使用することはできませんので注意してくださいませ。合わせて設定したいスムーススクロールページ内リンクをつけた時、必ず設定しておきたいのがスムーススクロールです。移動時にシュルシュルと移動してくれます。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Δコメントは承認後に表示されます。コメント投稿後元記事のトップに戻ります。使って画像の好きな場所をトリミングする【css】画像を角丸にする【コピペOK】スムーススクロールは必ずつけたい【html】リンクの貼り方〜aタグについて知っておきたいこと【CSS】Instagram風フレームコーディングはどうやる?【css】シンプルな見出しのデザインをまとめました半分隠れているように見えるテキストのコーディング方法Aboutこのサイトは、これからWebデザイナーを志す方の為の、情報発信サイトです。【css】テキストを右から左に流すアニメーションProfileSearch\Instagramでもwebデザイン情報発信中/このサイトについてプライバシーポリシーサイトマップ©chiiweb.net。