トップページのブログカードにマウスを乗せると、タイトルがふわっと表示される…。
これ、ずっと気になっていました😂
「この表示、いらないんだけど……どこで消すの？」と。
Cocoonの設定を探してみても、それらしい項目が見つからず。
CSSで消せるのかな？と思ったのですが、今回の場合はJavaScriptで対応できました。
同じように「あの表示が気になる！」という方の参考になればと思い、私が実際に行った方法をまとめておきます♡
マウスを乗せると出てくる、このタイトル表示
気になっていたのは、トップページのブログカードにマウスを乗せたときに表示される、このタイトルです👇
ちなみに私は、勝手に「浮遊タイトル」と呼んでいます（笑）
カーソルを合わせるたびに、ふわっと現れる浮遊タイトル…。
どうしても気になったので、今回はJavaScriptを使って非表示にしてみました。
Cocoonのブログカードに出るタイトルをJavaScriptで消す方法
今回は、Cocoon Child（子テーマ）の「javascript.js」にコードを追加して、ブログカードにマウスを乗せたときのタイトル表示を消しました。
私も最初は「CSSで消せるのかな？」と思ったのですが、今回はJavaScriptで対応しています。
コードを貼り付けるだけなので、ひとつずつ進めていきます😊
Cocoon Childの「javascript.js」を開く
WordPressの管理画面から、
**「外観」→「テーマファイルエディター」**を開きます。
右側に表示される「編集するテーマ」が Cocoon Child になっていることを確認します。
「テーマファイル」の一覧から、javascript.js をクリックします。
※編集前に、念のため現在のコードをコピーして保存しておくと安心です。
javascript.jsにコードを追加する
「javascript.js」を開いたら、下のコードを追加します。
すでに何かコードが入っている場合は、いちばん下に追加すればOKです😊
// ブログカードのtitle属性（ホバー時の浮遊タイトル）を削除
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('a.entry-card-wrap[title]').forEach(function (card) {
card.removeAttribute('title');
});
});ファイルを更新する
コードを追加したら、画面を下までスクロールして
**「ファイルを更新」**をクリックします。
「ファイルの編集に成功しました。」と表示されたら保存完了です✨
ブログカードを確認する
保存できたら、トップページを開いてブログカードにマウスを乗せて確認してみます。
今まで表示されていた「浮遊タイトル」が出てこなければ成功です😊✨
私の場合は、これでずっと気になっていたタイトル表示がすっきり消えました♡
ほんの小さな変化ですが、毎回目に入っていたものがなくなると、想像以上にすっきり（笑）
うまく消えないときに確認すること
コードを追加したのに浮遊タイトルが消えない場合は、まず次の点を確認してみてください。
・コードを Cocoon Childのjavascript.js に追加しているか
・コードを貼り付けたあと、**「ファイルを更新」**をクリックしたか
・ページを再読み込みして確認したか
それでも変わらない場合は、ブラウザに古い表示が残っていることもあるので、Ctrl＋F5で再読み込みしてみてください😊
まとめ｜気になっていた「浮遊タイトル」がすっきり♡
Cocoonのブログカードにマウスを乗せたときに表示されるタイトル。
ほんの小さなことなのですが、私はずっと気になっていました😂
今回、Cocoon Childの「javascript.js」にコードを追加したことで、無事に非表示にすることができました✨
同じように「このタイトル、消せないのかな？」と気になっていた方の参考になれば嬉しいです♡
WordPressを使っていると、「ほんのちょっとだけここを変えたい！」ということが結構ありますよね。
これからも、私自身が使っていて気になったことや、実際に試して解決できたことを少しずつ残していこうと思います😊
これで「浮遊タイトル」も無事に成仏しました（笑）👻✨