カバーやカラムブロックにリンクを設置できるWordPressプラグイン「EditorsKit」

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

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

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

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

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

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

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

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

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

EditorsKitのインストール方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像が挿入されました。

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

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

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

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

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を使って、イメージ通りのサイトを作成していきましょう。