Word press Cocoon クリックでブログ内の好きなところに移動する方法

Cocoon設定方法

Word pressのCocoonビギナーの皆さんSASUKE父です。

ブログを書き始めて、ようやくもうすぐ100記事になりますが、Cocoonの持ってる技術の10%も使っていないのでは思っています。

中だるみがあり、一時ブログを書かない時期がありましたが、充電して今は書こうという気持ちが出てきたので、再度Cocoonを勉強していきたいと思っています。

今回はブログ内の好きな所に1クリックで移動する方法を紹介します。

これからきっかけなど書いていきますので、やり方だけ知りたい方は下をクリックして下さい。

ブログの好きなところにワンクリックで飛ぶ方法はこちら

 

スポンサーリンク

きっかけ

もともとこのブログを始めたきっかけは、

①下道旅行が好きなので新潟から下道で行ける県外のおすすめルート
②子供のためにキャラクターショーを調べるついでにブログにする
③子供の成長日記

などを理由に始めました。

その中で②のキャラクターショー情報がおかげさまで現在8500ビューをいただいています。3月から始めたのですが、年末になるにつれて目次がすごいことに、、、、。

来年に向けて、作り方を変えようかなと思い、クリックするとその記事の部分に飛ぶ方法を調べようと思いました。

なので、今後は

・目次は月ごと
・記事の最初に最新の予定を書いて、そこをクリックすると詳細に移動する

ように出来るように設定したいと思っています。

この赤字の12月1日のところをクリックすればその詳細の記事に飛ぶように設定したいと思います。

それでは、やり方の紹介です。

リンクとアンカー設定する。

この2つをするだけ簡単に出来るようです。

私でもリンクを貼る方法は出来ますが、アンカー?です。

アンカーとは、ページリンクをさらに細かく指定する場合に使用されます。 ページリンクはそのページにジャンプするのに対してアンカーを配置することにより、そのページの5行目といった具合に表示する行位置まで指定することができるのです。 とても便利なアイテムです。
だそうです。アンカーを指定の所に配置することで、記事内の好きな所に表示が出来るようになるようですね。
そのためやる作業としては

1. テキストにリンクを設定する
2.リンク先にアンカーを設定する

の2つになります。

実際にやってみようと思います。

TinyMCE Advancedというプラグインを入れている人は簡単に出来るようです。
私も入れていましたが、文字のスタイルを簡単に作るためにプラグインを無効にしました。
今回はTinyMCE Advancedを入れていない人用に記事を書きます。
TinyMCE Advancedのプラグインを無効にした経緯は下の記事になります。Cocoonの文字装飾ができない方向け、解決方法紹介!

テキストにリンクを設定

まずは

①リンクを設定したいテキスト部分を選択して下さい
②リンクの挿入ボタン🔗をクリックします。(今回は赤字のテキスト部分を選択にリンクを貼ります)
③□の枠に#〇を入力して下さい。(〇の部分は好きな英数字を大丈夫です。今回は1にしています)
 #は絶対に必要になります。
④↩をクリックして下さい。
#〇の〇の部分はどんな英数字でも大丈夫ですが、複数リンクを作る時は、毎回違う英数字を入力して下さい。
飛んだ先の文字はこの#〇を参考にして飛ぶので同じ文字列では駄目になります。
私の場合半角の#しか反応しなかったので、うまくいかない場合はキーボードで「しゃーぷ」と入力し、半角の#を選んでみてください。
これで第一段階は終了です。
あとは最終段階です。もう少し頑張りましょう。

アンカーを設定します。

次に飛んだ先の設定方法を紹介します。

TinyMCE Advancedを入れている人は、画面上のボタン一つで出来ますが、TinyMCE Advancedを入れていない人は、ボタンが無いのでHTML挿入ボタンを使います。

まずは飛んでほしい文字を入力します。(今回はここに飛ぶようにします。)

飛んできました(笑)

 

 

①まずは飛びたいところを選択して、上の書式が並んでいるところの「<>」(HTML挿入)をクリックして下さい。

②□に「<a id=”a”></a>」を入力して下さい。その時に”a”の部分を先ほどリンクで入力した#〇の〇の部分を入力して下さい。

もし、リンクを#1にした場合、<a id=1></a>と入力してください。
大文字小文字もしっかり同じにしないと駄目なようです。
③OKを押してください。

 

これで完了です。プレビューを開いてみてちゃんと設定されているか試してみてください。

無事に出来たと思います。

テスト
てすと上のてすとの所に飛びたい場合、てすとの「て」のところにアンカーを設定しても、てすとの次の行に飛んでしまうようです。
そのため「てすと」に飛びたいときは、前の行の最後のところにアンカー―を設定してみて下さい。この場合テストの行になります

まとめ

いかがだったでしょうか?

皆さんも一緒にCocoonレベル上げていきましょう!

ご覧いただきありがとうございました。