【WordPress】ページ内の作り方！簡単にページ内で飛ばす方法

ブログを書いていると、ページ内で「ここをクリックしたら、あの文章の所に飛ばせるようにしたいな～」って思うときありますよね。

　

今回紹介するのは、プラグイン【TinyMCE Advanced】を使った方法です。

　

簡単に表やテーブルなども作れるようになるプラグインなので、多くのブロガーさんは使ったことがあるプラグインなのかなと思います。

　

もしまだインストールしていない方がいれば、色々と便利なプラグインなのでインストールしてみてください。

　

の作り方

元を設定する

これが実際にページ内を使用したゲームの記事を書いたブログです。

私の場合は下の文章をクリックすると、上の画像の所に飛ぶように設定しました。

　

今回はこれを例にやってみようと思います。

　

まずは「飛ばしたい文章を選択」します。

青くなる文章のところですね。

　

この場合は

【※見た目は「ストームストリンガー(試作)」と同じです。】

の文章の、ストームストリンガー(試作)を範囲選択します。

　

そうしたら、赤矢印の所のを押します。

　

を選択すると文字を入力する画面が出てきますので、その枠に「#○○○」と入力します。

〇の中身はなんでもOKですが、先頭にはかならず「#」を付けることを忘れずに行ってください。

　

私の場合は、#a,#b,#c,#d…という感じにをつけています。

どの文章にどのを付けたかを忘れずに覚えておいてくださいね。

　

エンターを押してを作ると、範囲指定した文字が青く変わります。

　

これで、#aというが完成しました。

　

もし飛ばしたい所を別のタブで開きたい場合は、下に表示されている「新しいタブで開く」というところのマークをクリックすると、先が別のタブで開かれるようになります。

　

先の作り方

それでは次は、飛ばしたい場所を設定していきましょう！

　

と、その前に先を作る際の注意点を先にお伝えしておきます。

　

画像を説明している文章も一緒に表示させたいので、飛ぶ場所は赤線のところくらいから表示されるように設定したいですね。

気を付けたいのが、を設定したところよりも下のほうしか表示されないので、画像の上の文章にを付けると文字よりも下しか飛んだ時に表示されません。

　

なので、実際にを作るのは表示させたい所よりも少し上の文章に設定することを意識すると綺麗に飛びますよ。

この場合は、もう一つ上の文章、【このクエストでは、…】のところにを作るとOKですね～！

　

それでは先の作り方です。

　

まずは飛ばしたいブロックをクリックして、ブロックをクラシック版に変換してください。

　

アンカーのアイコンをクリックします。

　

アンカーのアイコンが無いという方は、【プラグイン】→【インストール済みプラグイン】から「TinyMCE Advanced」の設定を開いて、アンカーをメニューバーに追加してください。

　

そして、アンカーを押すと入力画面が開かれます。

　

IDの枠の所には、先ほど設定した「#○○○」の【#を抜いたもの】を入力します。

私の場合は、【#a】でしたので入力するのは【a】のみです。

　

そしてOKを押すと、先(アンカー)が設定完了となります！

アンカーが設定された文章の脇には、アンカーのマークが表示されます。

　

　

実際に先に飛ぶか確認してみる

それでは実際にどのように表示されるか見てみましょう！

きちんと設定したに飛ぶのか、自分で思い描いている場所がしっかりと表示されるのかを必ず確認してください。

　

をクリックして飛ぶと～、

　

こんな感じで表示されます。

　

狙い通りの場所に飛ぶことが出来ましたね！！

　

先で設定した文章はこの上になるので、少し上にスクロールしないと表示されません。

　

たまに飛んだ先がちょっとずれているサイトとかよく見かけますよね。

自分のサイトがそうならないように、プレビュー画面でも確認してみましょう！

　

まとめ

プラグインの【TinyMCE Advanced】は表やテーブルだけでなく、を作ったりできる非常に便利なプラグインですね。

　

少しずつブログにも機能が付いてきて読者の方も少し見やすくなってきているのかな？

　

なにより自分のブログが見やすくなると自分が一番うれしいですよね♪

またブログを書いているときに便利だな～と思う機能があれば紹介したいと思います！

　

【TinyMCE Advanced】を使った誰でもできる簡単な表の作り方！

【Word Press】ブログに地図を埋め込むやり方！プラグイン無し