【Elementor】プラグインを使わずにアイコンボックス全体をリンク化させる方法

Elementor使ってるマン

Elementorのアイコンボックスのリンクをボックス全体に適用させたいけどうまくいかない…

プラグインを使えばできるって聞いたけど、重たくなるしあまり入れたくないな。

プラグインを使わずにリンクを全体化させる方法が知りたい。

本記事では、こんな疑問にお答えします。

アイコンボックスのリンクは、デフォルトではアイコンと見出しのみに適用されています。（謎仕様です）

これだとかなり使い勝手が悪いので良い方法がないか探していたところ、解決策を見つけたのでシェアします。

対策としては、追加CSSで疑似要素を追加してあげればOKです。やり方を見ていきましょう。

「追加CSS」はElementor Proのみの機能です。【無料版でも対策あり】

本記事で頻出する「追加CSS」はElementor Proなら簡単に追加することができます。

しかし、無料版ですと「追加CSS」がありませんので、
「外観」⇨「カスタマイズ」⇨「追加CSS」からコードを追加してください。

Elementorで本格的にサイトを制作していく場合には、Elementor Proの導入がおすすめです。

⇨ダウンロードはこちらから

アイコンボックス全体をリンク化させる方法

方法としては、アイコンボックスに下記CSSを追加します。

/*アイコンボックスのaタグに擬似要素を重ねる/*
.elementor-widget-icon-box a:after { 
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

/*ホバー時のスタイリング*/
.elementor-widget-icon-box a:hover:after {
opacity: 0.7;
transition: 0.3s;
background: #333;
}

これで、アイコンボックスのリンクが全体に適用されるようになります。

何をやっているか

/*アイコンボックスのaタグに擬似要素を重ねる/*
.elementor-widget-icon-box a:after { 
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

まずはこの部分から。

アイコンボックスのaタグに対して、幅と高さ100％の疑似要素を重ねており、その疑似要素がaタグの役割をしています。

/*ホバー時のスタイリング*/
.elementor-widget-icon-box a:hover:after {
opacty: 0.7;
transition: 0.3s;
background: #333;
}

こちらはホバー時のスタイリング設定です。

背景色などは自由に変えてください。

デフォルトのスタイリングは無効化される

「スタイル」タブで設定しているホバー時のスタイリングは無効化されます。

これは疑似要素で覆い隠しているためです。

スタイリングを追加する場合は、追加CSSで追記していく必要があります。

画像ボックスの全体リンク化

画像ボックスの場合も基本的にやり方は同じです。

/*画像ボックスのaタグに擬似要素を重ねる/*
.elementor-widget-image-box a:after { 
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
/*ホバー時のスタイリング*/
.elementor-widget-image-box a:hover:after {
opacity: 0.7;
transition: 0.3s;
background: #333;
}

アイコンボックスも画像ボックスも、該当のClass名から疑似要素を指定してかぶせてあげます。