OceanWPでリンクがアクティブ時に表示されるボーダー枠を消す - Elementor（エレメンター）を使いこなす会

OceanWPは無料でも高機能でお気に入りのテーマの一つですが、サイトの内のリンクをクリックすると枠線で囲みが出る仕様なのです。ちゃんと調べてないですが、メインカラー→リンク色と色が推移するような感じ。

OceanWPはデフォルトでリンクのアクティブ時に囲み線が付く！

これはこれで、おしゃれとも言えるのですが、リンク先までボヤっと推移するようなもたつき感と、リンク付きの画像も一瞬ボーダーが表示されてしまうので、なんとなく要らないな、と思うようになりました。

OceanWPはカスタマイザーで細かな設定ができるので、このリンク推移スタイルについても設定があるものだと思っていて、探してみたのですがなく、OceanWPのサポートでも探してみましたが、見つからず。

調べてみたら、スタイルシートの追加でOFFにできるようです。

カスタマイザーの「カスタムCSS/JS」やテーマのCSSに以下を追加してください。

/*link時の囲み枠を消す*/
a:active, a:focus {
  outline: 0 !important;
  border: none !important;
  -moz-outline-style: none !important;
}

勝手にJSなんかで実装しているのかな？と思っていたのですが、どうやらシンプルなCSSが書かれていたよう。「*/」の場所を「｝」の下に持っていくことにより、ONOFF切り替えれてますよ。

CSSに手を加えれば、本文内のリンクのみ、とか、ヘッダーのみとか、そういったカスタムもできそうですね。

どちらにしてもOceanWPの標準仕様ではOFFにはできませんので、スタイルシートで対応しましょう。