スポンサーリンク

コクーン(Cocoon)別のページのH2見出しへリンクさせる方法

別ページH2リンクコクーン(Cocoon)

このブログはWordPressの無料テーマ「Cocoon」(コクーン)を使用しています。

なぜ利用しているか?

無料なのはもちろんうれしいのですが、なんといってもHTMLタグとかCSSとか全く分からなくても大丈夫って事です。

こんな風に蛍光ペンで下線を入れるもの標準装備。本来CSSを理解していない私にはできなかったことが可能になりました。

まあ、こんなレベルなのでCocoonをインストールしてからも大変。マニュアルを見ながら四苦八苦。

マニュアルの簡単な単語の意味も未だま分からず、笑われてしまうぐらいでお恥ずかしい!だから人一倍疑問が多いので、これらを書いてみました。

スポンサーリンク

別のページのH2見出しへリンクする

今回疑問に思ったのが、ワードプレスコクーンテーマ(Cocoon)にも標準装備されている、指定したページへジャンプする「」リンクマーク。

「リンクの挿入と編集」があるので、簡単に他のページへリンクを付けることができます。

さらにコクーンテーマでは目次機能が標準装備されていて、自動的に目次に表示されたH2見出しや、H3見出しにリンクされます。

このおかげで、目次の作り方がわからない初心者でもページ内のタイトルへリンクさせることができています。

ところが、ほかのページから同じように別のページのH2見出しへリンクさせることは標準機能としてはありません。

波乗りアヒル
波乗りアヒル

できるようにしたいよね!

サンプルとして、このブログで実際に使っている「ボウリング成績表選手登録方法~LTB個人リーグ編」での使用例に沿って書いていきます。

ボウリング成績表選手登録方法~LTB個人リーグ編」をクリックすると別ページでワードプレスのコクーン標準機能の別ページでリンク先が開きます。

同じく標準機能のもくじの一番下「エクセル数式(関数)」をクリックします。

上限HDCPを設定する【MAX関数】」に別ページh3見出しへリンクが設定されています

設定するには2つの手順が必要です。

まず最初に、リンク先(ここのh2見出しへ移動したい)に名前をつけておきます。

ワードプレスの「ビジュアルモード」では、h2見出しを使うと装飾された大きな文字で表示されていますが、「テキストモード」を見ると、このように書かれています。

テキストモード

この<h2>見出し</h2> 部分の先頭の<h2>に名前をつけます。

<h2 id=”名前”>見出し</h2>

名前は覚えやすい名前をつけておけば良いと思います。

先ほどのサンプルの場合はMAX関数を使っているのでid=”max”ってつけました。

次にリンク元(リンクを張り付ける部分)にリンクアドレス+名前を付け加えます。

先ほどと同じくリンクを挿入した部分をテキストモードで見ると、

<a href=”リンク先アドレス”/>リンク文字列</a>となっています。

このリンク先アドレスに、先ほどの名前をつけ加えると、

<a href=”リンク先アドレス/#名前”>リンク文字列</a>

このようになっています。

サンプルでは名前の部分が#maxとなっています。

波乗りアヒル
波乗りアヒル

とっても簡単に設定できるので、私にもできました!

波乗りアヒル
波乗りアヒル

早く🔰から卒業できるように!日々奮闘中!なので、CSS使わなくてもできるカスタマイズってありがたいですね。

初心者の🔰のあるあるを書き出してみました。

スポンサーリンク

コクーンテーマをひと工夫

コメント