初心者カラムブロック全体にリンク設定できないの？
カバーブロックやグループブロックでもいいんだけど？
そんなお悩みを解決します。
リンクのエリアを広げてタップしやすいよう設定したいのに、標準の仕様ではリンクが設定できません。カスタムHTMLブロックでリンク付けるの面倒だなーと思いますよね？
本記事ではリンクエリアを拡張する便利な無料プラグインを紹介します。
カラム・カバーブロック全体にリンクを設定可能にするプラグイン
早速プラグインを紹介します。
その名は「EditorsKit」。WordPress公式ディレクトリーに登録されている無料プラグインです。
プラグインのインストール方法
EditorsKitは一般的なプラグイン同様に次のどちらかの方法でサイト上にインストールできます。
EditorsKitプラグインの導入方法
- 公式サイトからダウンロードしてサイトにアップロード
- ダッシュボードのプラグインメニューから新規追加
かんた違いはありません。どちらでもOK。
かんた名前が似ているプラグインがあるのでインストールするさいは注意しましょう。
EditorsKitプラグインをインストール後、ダッシュボード上で忘れず有効化しましょう。
カバーブロック全体にリンクを設置する方法
ステップごとに操作方法を解説します。
エディター上でカバーブロックを挿入します。
特別な作業はありません。普段通りにカバーブロックを任意の箇所に設置してください。
かんた以上の設定でカバーブロック全体がリンク要素になりました。
カバーブロックをクリックしツールバーを表示すると、リンクの設定アイコンが追加表示されています。
リンクのアイコンをクリックし、リンク先のURLを入力しましょう。
URLを入力したら矢印のアイコンをクリックし設定を保存しましょう。
リンクのオプションについてです。リンクを設定するさいに「下向きアイコン」をクリックするとリンク属性などのオプションが表示されます。
オプション
| オプション | 意味 |
|---|---|
| Open in New Tab | 新しいタブで開く。 |
| No Follow | 「rel=”nofollow”」を付ける。 |
| Sponsored | 「rel=”spnsored”」を付ける 。 |
| Hover Animation | オンマウス時にエフェクトを付けるオプション。 有効化するとリンクにマウスを合わせると上部に少し動くようになります。 |
かんた以上で作業終了です。
カバーブロック全体にリンクが設定されているか確認しましょう！
カラムブロック全体にリンクを設置する方法
カラムブロックにリンクを設定する手順を紹介します。
エディター上でカラムブロックを設置しましょう。
特別な作業はありません。好きな場所に好きな数のカラムブロックを挿入してください。
リンクを設定したいカラムブロックの「＋」アイコンをクリックします。
ツールバーが表示されるのでリンクアイコンをクリックしましょう。
URLを入力します。入力後は、矢印アイコンをクリックし設定を保存しましょう。
カラムブロックをクリックし、ツールバーを表示します。
リンクオプションをクリックし、下向きアイコンをクリックします。
任意のオプションを選択し設定を保存しましょう。
オプション
| オプション | 意味 |
|---|---|
| Open in New Tab | 新しいタブで開く。 |
| No Follow | 「rel=”nofollow”」を付ける。 |
| Sponsored | 「rel=”spnsored”」を付ける 。 |
| Hover Animation | オンマウス時にエフェクトを付けるオプション。 有効化するとリンクにマウスを合わせると上部に少し動くようになります。 |
【備考】リンク設置に関するTIPS
カラムブロック、カバーブロックにリンクを設置する場合のTIPSです。
カバー・カラムブロックのリンクからページ内リンクは可能？
ページの上部にリンクを設置し、同じページ内にある指定の場所にリンクの設置ができるのかという点です。
先に結論ですが、可能です。
かんたページ内リンクを設置する場合には次の作業が必要です。
必要な作業
- リンク先にアンカーを設定する
- リンクのURLにアンカーを指定する
①リンク先にアンカーを設定する
まずはリンク先にアンカーを設定します。「リンク先」とはリンクをクリックして移動する目標地点のことです。Webの専門用語だとアンカーといいます。
アンカーの設定方法はテーマごとに微妙に異なりますがアンカーに指定したいブロックを選択し、右側に表示されるブロックオプションから指定できます。
例えば有料テーマSWELLの場合だと、「高度な設定」→「HTMLアンカー」が設定オプションです。
アンカーに適当な名称を設定しましょう。今回はtestというアンカー名を設定しました。
②リンクのURLにアンカーを指定する
次にリンクを設定します。
リンクURLに先程指定したアンカー名を入力しますがアンカー名の先頭に#（シャープ記号）を入れましょう。
かんたアンカー名がtestなら#testと入力します。
設定を保存したら作業完了です。ページ内リンクが動作するか試しましょう！
ページ内リンクは同一ページ内に復数設置できます。内部リンクを復数設定するさいは、アンカー名が重複しないよう注意しましょう。
リンクをクリックした際の挙動
テーマにより異なります。SWELLの場合、なめらかにリンク先まで移動するスムーズスクロール形式です。スムーズスクロールに関する詳細なオプションはありませんので、スクロール速度などは設定できません。
標準機能としてリンク設置が実装されるかもしれない？
カバーブロックやカラムブロックへにリンクが設定できたら便利そうですね。
会社のHPなんか作る時はクリックしてもらいやすくなるし、わざわざカスタムHTMLブロックでコードを書くのは面倒です。
かんた実はWordPressコア機能への要望は以前からWordPressコミュニティーに投稿されています↓
No way to link a cover block?
There appears to be no way of adding a link to a cover block ? this seems like a very basic feature which should exist.Let’s say you want to create a column block with 3 inner columns for 3 pages of your site, each containing a cover block (background image with text overlay) which when clicked takes you to another page.No way to link a cover block?
There is no way of doing this currently in Gutenberg at all, you can link an image block but this has no means of applying a text overlay.
要望に関しては賛同するユーザーも多く、そのうちプラグインなしでもアウターブロックにリンク設定できるオプションが追加されるかもしれません。
まとめ
WordPressのブロックにリンクを設定できるプラグイン「EditorsKit」を紹介しました。 EditorsKitプラグインを有効化すると標準仕様ではリンクを設定できない以下のブロックにリンクを設定できるようになります。
- カバーブロック
- カラムブロック
- グループブロック
ブログでは使わない機能ですが、企業サイトを作るさいに結構便利です。
特にスマホユーザー向けのコンテンツなんかだと、どうしもテキストリンクよりカラムブロックなどのアウター全体にリンクを設置したほうがタップしやすい場面があります。
カラムブロックやカバーブロックにリンクを設定したい場合にEditorsKitプラグインはおすすめです。