2021年8月31日Elementor使ってるマンElementorのアイコンボックスのリンクをボックス全体に適用させたいけどうまくいかない...プラグインを使えばできるって聞いたけど、重たくなるしあまり入れたくないな。プラグインを使わずにリンクを全体化させる方法が知りたい。本記事では、こんな疑問にお答えします。アイコンボックスのリンクは、デフォルトではアイコンと見出しのみに適用されています。(謎仕様です)これだとかなり使い勝手が悪いので良い方法がないか探していたところ、解決策を見つけたのでシェアします。対策としては、追加CSSで疑似要素を追加してあげればOKです。やり方を見ていきましょう。Proのみの機能です。Proなら簡単に追加することができます。「外観」⇨「カスタマイズ」⇨「追加CSS」からコードを追加してください。Proの導入がおすすめです。方法としては、アイコンボックスに下記CSSを追加します。#333;}これで、アイコンボックスのリンクが全体に適用されるようになります。1;}まずはこの部分から。アイコンボックスのaタグに対して、幅と高さ100%の疑似要素を重ねており、その疑似要素がaタグの役割をしています。#333;}こちらはホバー時のスタイリング設定です。背景色などは自由に変えてください。デフォルトのスタイリングは無効化される「スタイル」タブで設定しているホバー時のスタイリングは無効化されます。これは疑似要素で覆い隠しているためです。スタイリングを追加する場合は、追加CSSで追記していく必要があります。画像ボックスの場合も基本的にやり方は同じです。#333;}アイコンボックスも画像ボックスも、該当のClass名から疑似要素を指定してかぶせてあげます。まとめ今回はアイコンボックス全体をリンク化させる方法について解説しました。参考になれば幸いです。その他Elementorに関する記事は下記からどうぞ。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【最新版】Elementorで固定ページを複製する方法【作業の...次の記事Elementorとは?初心者向けに、概要からできることまで優...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。