WP初心者でも簡単！ページ内リンクの作成方法(Cocoon)

ページ内リンクとは

ページ内リンクとは、表示されているページ内の表示させたい箇所へピンポイントで飛ばすことです。

もっと分かりやすく言えば、下のこちらを押すと起こる現象のことです。

WordPressの知識がなくてもブログを始められたワケ

HTMLとCSSの知識はあったものの、WordPressの知識がない私がブログを始めようと思ったのは、

ウェブカツのブログを読んだからです。

ウェブカツのブログはこちら

ウェブカツはレギュラー部員、スタメン部員、スター部員に分かれていて、

レギュラー部員には練習の制限があります。

ウェブカツレギュラー部員の練習制限

さらに詳しく知りたい方はこちらからどうぞ。

このブログを開設したのは2022年9月。

つまり、ブログを開設しようとしましたが、その時点ではまだWordPress部が開放されておらず、

ワードプレスの知識はありませんでした。

そのときに読んだのがウェブカツのブログでした。

そのブログを読んでブログを自力で開設しました。

Cocoonでブログを開設

WordPressでブログを自力で開設するために使ったテーマはCocoon。

Cocoonはわいひら氏が開発した無料のワードプレステーマです。

Cocoonは2022年9月にエックスサーバーと業務提携されました。

Cocoonのテーマを使用して、管理画面の外観 > テーマファイルエディターで

style.cssにCSSを追加してこのブログを作成しました。

本題！Cocoonで内部リンク作成

さて、本題です。以下が手順です。

１．まずは飛ばしたい先の見出しへ移動してください。

２．ツールバー(下にある図の一番右)のオプションをクリックして、

「HTMLとして編集」をクリック

３．そうすると下のようにコードが表示されます。(一例です。)

・見出しがh2の場合

<h2>本題：Cocoonで内部リンク作成</h2>

あるいは

<h2 class="has-white-background-color has-background">本題：Cocoonで内部リンク作成</h2>

・見出しがh3の場合

<h3>ウェブカツレギュラー部員の練習制限</h3>

４．そのコードの中にid名を入力します。

<h2 class="has-white-background-color has-background" id="h2_link">本題：Cocoonで内部リンク作成</h2>

注意しなければいけないのは、半角スペースを前に設けること。全角ではなく半角です。

id名は半角アルファベットのみ、あるいはアンダーバーかハイフンを混ぜて使うのがオススメです。

id名は1ページに１つと決まっているので、他に同じid名がページ内に存在しているとうまく動作しないと思います。

id名は任意でいいのですが、以下の感じでいいと思います。(コピペして使ってください。半角スペースを前に開けるのを忘れずに！)

５．次に飛ばす元へ行き、リンクさせたい文字をドラッグし、

ツールバーのリンク(右から3番目)をクリックして、id名に#(シャープ)をつけて入力します。

よければコピーして使ってください。上で選んだid名と同じものを必ずコピーしてください。

１文字でも間違えたり、スペースが入るとうまく動作しませんのでお気をつけください。

以上で完成です。

最後までお読み頂き、ありがとうございました。