ブロックエディターで記事内リンクを設定する方法

【設定3分】WordPressのブロックエディターでページ内リンクを設定する方法

悩む人のイラスト

ブロックエディタを使い始めました。

記事の中でリンクを設定したいんですが、うまくいきません。

どうして?

そのお悩みを解決します

投稿者のイラスト

WordPressのブロックエディター(Gutenberg)で内部リンク(ページ内リンク)の設定方法を解説しています。

この記事の内容

【クラシックエディターでの設定手順】はコチラ↓

この記事の信頼性

元SEが実際に試した内容を、重要なポイントを含めながら解説しています。

— プロフィール —

当サイトの運営環境

ページ内リンクを設定する手順

設定手順

1.リンク先の設定

2.リンク元の設定

3.プレビューで動作確認

0.動画で解説

投稿者のイラスト

動画でも解説しています。
声が出ますので注意して下さいね^^;

1.リンク先(着地点)の設定

❶リンク先の場所にカーソルを移動し、

【ブロック】→【高度な設定】→【HTMLアンカー】へ文字列を入力します。

内部リンクの設定手順01

2.リンク元の設定

❶リンクさせたい文字を選択します。

内部リンクの設定手順02

❷リンクアイコンをクリックします。

内部リンクの設定手順03

❸着地点で設定した文字列『detail』の先頭に『#(ハッシュ)』を付けて入力します。

内部リンクの設定手順04

❹【送信】をクリックして決定させます。

内部リンクの設定手順05

❺下画面のようにリンク文字が設定されます。

内部リンクの設定手順06

3.プレビューで確認

リンク先に飛ぶかを確認します。

❶【プレビュー】→【新しいタブでプレビュー】をクリックします。

内部リンクの設定手順07

❷プレビュー画面でリンク文字をクリックします。

内部リンクの設定手順08

❸着地点に飛ぶかを確認します。

内部リンクの設定手順09

リンクが飛ばない時の対処法

リンクが飛ばない時は?

・『#』ハッシュの付け方を確認する

・HTMLアンカーの文字列を確認する

リンク先(着地点)の設定確認

【高度な設定】→【HTMLアンカー】の入力文字の確認

  • 『#』ハッシュを付けない
  • リンク元の文字列と同一になっているか?
リンクが飛ばない時の対処法の画像
投稿者のイラスト

コードエディターでも確認して下さいね!
表示の方法は動画で解説しています。

コードエディターで確認

リンクが飛ばない時の対処法の画像

リンク元の設定確認

  • 『#』ハッシュを付けているか?
  • 着地点のHTMLアンカーと文字列が同一になっているか?
リンクが飛ばない時の対処法の画像

コードエディターで確認

リンクが飛ばない時の対処法の画像

クラシックエディターを使った内部リンクの設定手順はコチラで解説しています。

【最後に】

オンラインストレージ
ownCloud
って知っていますか?

あなたはブログの画像や動画などの大切なデータをどこにバックアップしていますか?

外付けハードディスク?

SDカード?

有料のクラウドサービス?

ロリポップのレンタルサーバーを使うと、Webサーバーだけでなく『データの保存や受け渡し』も出来るオンラインストレージが無料で使えるんですよ。

『ownCloud』というオンラインストレージを使って出来ること

  • 社内・外の複数のメンバーと共同作業
  • 学校の友達とレポートの受け渡し
  • 外出先でもスマホで閲覧、受け渡し
  • マルウェアEmotet対策
    感染の確認方法と対策

詳細は【Q.】ownCloudってなにが出来るの?をご覧ください。

レンタルサーバーは『ホームページやブログのWebサーバー』として使用するだけではもったいないんです。

なぜなら、契約したディスク容量のほとんどが余っているから

ロリポップサーバーであれば、その空いたディスク容量を無駄にせず『ownCloud』というオンラインストレージを簡単に構築して無料で使えますよ!

詳細な導入手順は下記で^^

オンラインストレージで
PCのデータを無料で二重化


ロリポップサーバー

ownCloudの導入方法


★よくあるご質問【FAQ】★

【Q.】ownCloudって何なの?

ロリポップサーバーの『ownCloud』は、リモートワークなど多人数でファイルの共有が出来ます。

更に、PC内の大切なデータのバックアップとしても機能しますので、リスク回避としてぜひ導入してみて下さい。

【LOLIPOP!の『ownCloud』をゼロから導入する手順】

【ownCloudの使い方】
『第三者とファイルの受け渡しをする方法』

【ownCloudの使い方】
『スマホアプリ(iPhone)のインストール方法』

ブロックエディターで記事内リンクを設定する方法
最新情報をチェックしよう!

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験はありませんか?

ロリポップのownCloudは無料でデータ二重化が出来ます!
実際に導入し、運用しています。
→ 無料お問い合わせはコチラから

TKR WebWORKS仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト制作・ブログ開設の無料相談はコチラから

CTR IMG