カラムブロック・カバーブロック全体にリンクを設定可能にするWordPress無料プラグイン

コーポレートサイト向け独自カスタマイズ
初心者

カラムブロック全体にリンク設定できないの?
カバーブロックやグループブロックでもいいんだけど?

そんなお悩みを解決します。

リンクのエリアを広げてタップしやすいよう設定したいのに、標準の仕様ではリンクが設定できません。カスタムHTMLブロックでリンク付けるの面倒だなーと思いますよね?

本記事ではリンクエリアを拡張する便利な無料プラグインを紹介します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

カラム・カバーブロック全体にリンクを設定可能にするプラグイン

カラム・グループ・カバーブロック全体にリンクを設定可能にするプラグイン

早速プラグインを紹介します。

その名は「EditorsKit」。WordPress公式ディレクトリーに登録されている無料プラグインです。

プラグインのインストール方法

EditorsKitは一般的なプラグイン同様に次のどちらかの方法でサイト上にインストールできます。

EditorsKitプラグインの導入方法

  1. 公式サイトからダウンロードしてサイトにアップロード
  2. ダッシュボードのプラグインメニューから新規追加
かんた

違いはありません。どちらでもOK。

EditorsKit」で検索すると見つかります。

EditorsKitプラグインの導入方法
かんた

名前が似ているプラグインがあるのでインストールするさいは注意しましょう。

EditorsKitプラグインをインストール後、ダッシュボード上で忘れず有効化しましょう。

カバーブロック全体にリンクを設置する方法

ステップごとに操作方法を解説します。

STEP
カバーブロックを挿入する

エディター上でカバーブロックを挿入します。

特別な作業はありません。普段通りにカバーブロックを任意の箇所に設置してください。

STEP
リンクを設置する
かんた

以上の設定でカバーブロック全体がリンク要素になりました。

カバーブロックをクリックしツールバーを表示すると、リンクの設定アイコンが追加表示されています。

リンクのアイコンをクリックし、リンク先のURLを入力しましょう。

カバーブロック全体にリンクを設置sする手順
カバーブロックのツールバー

URLを入力したら矢印のアイコンをクリックし設定を保存しましょう。

カバーブロック全体にリンクを設置
STEP
オプションを設定する

このステップは任意です。必須ではありません。

リンクのオプションについてです。リンクを設定するさいに「下向きアイコン」をクリックするとリンク属性などのオプションが表示されます。

オプション設定

オプション

オプション意味
Open in New Tab新しいタブで開く。
No Follow「rel=”nofollow”」を付ける。
Sponsored 「rel=”spnsored”」を付ける 。
Hover Animationオンマウス時にエフェクトを付けるオプション。
有効化するとリンクにマウスを合わせると上部に少し動くようになります。
EditorsKitのオプション
かんた

以上で作業終了です。
カバーブロック全体にリンクが設定されているか確認しましょう!

カラムブロック全体にリンクを設置する方法

カラムブロックにリンクを設定する手順を紹介します。

STEP
カラムブロックを挿入する

エディター上でカラムブロックを設置しましょう。

特別な作業はありません。好きな場所に好きな数のカラムブロックを挿入してください。

カラムブロックを設置
STEP
リンクを設置

リンクを設定したいカラムブロックの「+」アイコンをクリックします。

ツールバーが表示されるのでリンクアイコンをクリックしましょう。

URLを入力します。入力後は、矢印アイコンをクリックし設定を保存しましょう。

STEP
オプションを設定する

この工程は必須ではありません。

カラムブロックをクリックし、ツールバーを表示します。

リンクオプションをクリックし、下向きアイコンをクリックします。

任意のオプションを選択し設定を保存しましょう。

オプション

オプション意味
Open in New Tab新しいタブで開く。
No Follow「rel=”nofollow”」を付ける。
Sponsored 「rel=”spnsored”」を付ける 。
Hover Animationオンマウス時にエフェクトを付けるオプション。
有効化するとリンクにマウスを合わせると上部に少し動くようになります。
EditorsKitのオプション

【備考】リンク設置に関するTIPS

【備考】リンク設置に関するTIPS

カラムブロック、カバーブロックにリンクを設置する場合のTIPSです。

カバー・カラムブロックのリンクからページ内リンクは可能?

EditorsKitプラグイン有効時について

ページの上部にリンクを設置し、同じページ内にある指定の場所にリンクの設置ができるのかという点です。

先に結論ですが、可能です。

かんた

ページ内リンクを設置する場合には次の作業が必要です。

必要な作業

  1. リンク先にアンカーを設定する
  2. リンクのURLにアンカーを指定する

①リンク先にアンカーを設定する

まずはリンク先にアンカーを設定します。「リンク先」とはリンクをクリックして移動する目標地点のことです。Webの専門用語だとアンカーといいます。

アンカー(anchor)は船を停留する時に沈める「いかり」の英単語です。

アンカーの設定方法はテーマごとに微妙に異なりますがアンカーに指定したいブロックを選択し、右側に表示されるブロックオプションから指定できます。

例えば有料テーマ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.


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.

No way to link a cover block?

要望に関しては賛同するユーザーも多く、そのうちプラグインなしでもアウターブロックにリンク設定できるオプションが追加されるかもしれません。

まとめ

WordPressのブロックにリンクを設定できるプラグイン「EditorsKit」を紹介しました。 EditorsKitプラグインを有効化すると標準仕様ではリンクを設定できない以下のブロックにリンクを設定できるようになります。

  • カバーブロック
  • カラムブロック
  • グループブロック

ブログでは使わない機能ですが、企業サイトを作るさいに結構便利です。

特にスマホユーザー向けのコンテンツなんかだと、どうしもテキストリンクよりカラムブロックなどのアウター全体にリンクを設置したほうがタップしやすい場面があります。

カラムブロックやカバーブロックにリンクを設定したい場合にEditorsKitプラグインはおすすめです。

よかったらシェアしてね!
  • URLをコピーしました!
目次