WordPressのブロックエディタを使えば、記事内に以下のようなレイアウトでコンテンツを配置できます。

ブロックエディタの完成サンプル

直感的に操作できて大変便利なのですが、カバーブロックやカラムブロックにリンクが設置できないのが玉に瑕だったんです。

そんな問題を解決できるのが、今回紹介する「EditorsKit(エディターズキット)」という無料のプラグイン。

このプラグインを使えば、ブロック全体にリンクが設置できます。

上手く活用すれば、ワンランク上のサイトを簡単に構築できるようになるでしょう。

本記事では、EditorsKitを使ってカバーやカラムブロック全体にリンクを設置する方法を紹介します。

カバーやカラムブロック全体にリンクを設置できるプラグイン

早速、EditorsKitのインストールから、実際にリンクを設置する方法を見ていきましょう。

  • EditorsKitのインストール方法
  • カバーブロックにリンクを設置する
  • カラムブロックにリンクを設置する

EditorsKitのインストール方法

WordPress管理画面から「プラグイン」→「新規追加」の順で進んでください。

プラグインの新規追加

検索欄に「EditorsKit」と入力すると、自動で検索されます。

EditorsKitの「今すぐインストール」をクリックしましょう。

EditorsKitと検索してインストール

インストールが完了したら「有効化」をクリックしてください。

EditorsKitを有効化

これでEditorsKitのインストールは完了です。

特別な初期設定は不要なので、リンクの設置にトライしていきましょう。

カバーブロックにリンクを設置する

ここでは、カバーブロックにリンクを設置する方法を解説します。

はじめにWordPressのブロックエディタで編集画面を表示してください。

ブロックの追加ボタンをクリックしたら「カバー」を選択します。
※カバーが表示されない方は、検索欄で「カバー」と検索すれば表示されます。

カバーを選択

オプションが表示されます。

  • アップロード
    画像をアップロードして使う
  • メディアライブラリ
    事前にアップロードした画像を使う
  • アイキャッチ画像を使用
    記事に設定したアイキャッチ画像を使う
  • カラーボタン
    オーバーレイのみ使う

上記から好みのものを選択しましょう。

今回は事前にアップロードしておいた画像を使うので「メディアライブラリ」を選択しました。

メディアを追加

メディアライブラリから任意の画像を選択します。

カバーブロックに画像が設定されました。

EditorsKitをインストールすると、リンクボタンが追加されているはずです。
こちらをクリックして、リンクを挿入しましょう。

EditorsKitでリンクを追加

ちなみにリンクの詳細設定ボタンをクリックすると、以下4つのメニューが表示されます。

Open in New Tab 新しいタブで開く
No Follow nofollowの設置
Sponsored sponsoredの設置
Hover Animation マウスカーソルを合わせるとブロックが動く演出が設定できる

リンクを設置したら、任意でテキストやオーバーレイなどを設定しましょう。

テキストのカラーやサイズを変更する際は、変更したいテキストを選択して右側のメニューをクリックします。

オプションが表示されるので、好みのカラーとサイズに設定してください。

テキストサイズを変更

オーバーレイの設定を行う際は、カバーブロックをクリックしてから、右側のメニューで編集できます。(画像②)

EditorsKitをインストールすると「スタイル」の項目から、カバーブロックの形や影の追加などができるようになります。(画像①)

オーバーレイの設定

これで、カバーブロック全体にリンクを設置することができました。

カラムブロックにリンクを設置する

続いてカラムブロックにリンクを設置していきましょう

はじめにブロックの追加ボタンをクリックして「カラム」を選択します。

カラムの追加

カラムの分割パターンを選択してください。

今回は例として、3分割の「33 / 33 / 33」を使います。

カラムの選択

3分割のカラムが設置されました。

この時点で、各カラムにリンクを設置することも可能です。

カラムの設置完了

今回は各カラムにカバーブロックを設置していきます。

1つ目のカラムの「+」をクリックして「カバー」を選択しましょう。

カラムにカバーを追加

カバーブロックに挿入する画像のメニューが表示されます。

例として「メディアライブラリ」を選択し、画像を挿入しました。

カラムの設定画面

画像が挿入されました。

しかし、このままでは縦幅が大きすぎるため、右側のメニューから「カバーがぞうの最小の高さ」を設定します。

カバー画像の最小の高さを設定

好みの大きさに調整してみてください。

カバー画像の最小の高さを195pxに設定

レイアウトを揃えたかったので、リンクを設置する前に全てのカバーブロックを設定しました。

カラムの設置完了

次に各カラムにリンクを設置していきます。

EditorsKitのリンクボタンをクリックして、設定してください。

EditorsKitでリンクを設置

オーバーレイのカラーを緑に変更しましたが、若干明るすぎる印象がありますよね。

こういった時はカラーパネルをクリックすると、カスタマイズが可能です。

オーバーレイのカラーをカスタマイズ

トーンを少し落として暗めに設定しました。

全てのカラムを設定

同様の設定を各カラムで行いました。

最後に各カラムの下に補足テキストを挿入していきます。

これにはちょっとしたコツが必要で、ポイントは「カラムの少し下をクリックする」ことです。
下画像にある通り、青枠が表示されている範囲をクリックすると、ブロックの追加ボタンが表示されます。

カラムに段落を挿入

テキストを追加する際は「段落」をクリックしてください。

段落を追加

同様の作業を各カラムで行ったら、全ての設定が完了です。

全てのカラムに段落を追加完了

カバーブロックもカラムブロックもWordPressのデフォルト機能なので、レスポンシブに標準対応しています。

スマホで表示するとレイアウトが変わるので、画像の大きさなどをチェックしながら、最適なサイズに変更してみてください。

レスポンシブの確認

EditorsKitの便利な使い方

EditorsKitの便利な使い方を紹介します。

  • カバーブロックの形を変更する
  • カバーやカラムブロックにアンカーリンクを設置する

カバーブロックの形を変更する

EditorsKitではカバーブロックの形をワンクリックで変更可能です。

カバーブロックを選択すると、右側のメニューに「スタイル」が表示されます。

スタイルの設定

スタイルの違いは以下の通りです。

  • デフォルト:ノーマル
  • Circular:楕円形
  • Rounded Corners:角丸
  • Diagonal:対角線
  • Inverted Diagonal:逆対角線
  • Shadow:影

下の画像はサンプルです。

スタイルのサンプル

こちらのカスタマイズを使いこなせば、固定ページの完成度がグッと高まるでしょう。

さらにリンク挿入時にオプションから選べる「Hover Animation」を設定すれば、動きのあるリンクが作れます。

ホバー機能のサンプル

プログラミングスキルなしで動きのあるサイトを作れるのが魅力です。

適材適所でカスタマイズしてみてください。

カバーやカラムブロックにアンカーリンクを設置する

EditorsKitを活用すれば、カバーブロックやカラムブロックにアンカーリンクを設置することも可能です。

アンカーリンクとはページ内リンクとも呼ばれるもので、目次と同じ機能を持っています。同一ページ内の特定の箇所にジャンプさせたい時に便利です。

アンカーリンクを設置するには、ブロックを選択して「リンクボタン」を選択した後「#」をつけて任意の文字を入力してください。

アンカーリンクの設定

次にジャンプさせたいゴール地点にリンクを入れていきます。

  1. ジャンプ先を選択
  2. 設定を選択
  3. 「高度な設定」をクリック
  4. 「HTMLアンカー」に「#」抜きで文字列を入力

上記の手順で設定してください。

ジャンプ先の文字列は必ず「#」を削除して入力しましょう。

ジャンプ先にアンカーを設置

正常に設定が完了すると、下のサンプルのように指定した場所へジャンプできるようになります。

アンカーリンクのサンプル

長めのLPを作って、購入ボタンへジャンプさせたい時などに重宝しますね。

カバーブロックやカラムブロックから、特定の箇所へジャンプさせたい時はEditorsKitとアンカーリンクを活用しましょう。

EditorsKitを無効化するとリンクは削除される

注意点としては、EditorsKitを無効化すると設定したリンクも削除されてしまうことです。

試しにリンクを設定した後、EditorsKitを無効化してみたところ、やはりリンク自体も削除されてしまいました。

EditorsKitを有効化するとリンクも復活する

万が一、EditorsKitを無効化してしまった際は、再度有効化することでリンクが復活します。

誤操作してしまった際は、焦らずにプラグインを有効化すればOKです。

全てのリンクを使わなくなった場合は、EditorsKitを無効化してリンク機能も無効化しておきましょう。

まとめ

EditorsKitを上手に活用すれば、デザイン性の高いサイトが簡単に構築できます。

カバーブロックやカラムブロックを使って、レイアウトを試行錯誤してみてください。特に企業サイトのトップページで活用できるかなと思います。

  • イメージに合った画像を使う
  • オーバーレイでテキストの視認性を上げる
  • ホバー機能で目立たせる
  • アンカーリンクで指定の場所へジャンプさせる

上記の機能を組み合わせることで、操作性の高いサイトを構築できます。

ただし、EditorsKitを無効化するとリンクも削除される点に注意してください。

ブロック全体にリンクを設置できるEditorsKitを使って、イメージ通りのサイトを作成していきましょう。