ブログ

Cocoonでモバイルフッターのホバー動作を追加する方法

まず、モバイルフッターのホバー動作とはなにか?

について説明します。

実際にみてもらった方が早いと思います。

以下のように動画にしましたので、

ご確認ください。

ホバー動作により、

マウスのカーソルをのせたとき、スマホだとタッチしたとき、に色が変化します。

ブログにオリジナリティーが出てきますので、今回の方法を実践してもらえればと思います。


管理人は、Cocoon 2.1.1.3を導入し、本編で紹介する方法を導入し、

動作確認しています。

前置き

先日、Cocoonフォーラムにて、不具合報告をさせていただきました。

ご対応いただきました、わいひら氏には、この場を借りて御礼申し上げます。

報告内容はこちら

https://wp-cocoon.com/community/bugs/%e3%82%b9%e3%82%ad%e3%83%b3%e3%80%8ccolors%e3%80%8d%e3%81%ae%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%81%a7%e3%83%9b%e3%83%90%e3%83%bc%e6%99%82%e3%81%ab%e8%89%b2/#post-28980

概要としては、マウスのカーソル

モバイルフッターボタンの上にのせた(ホバーさせた)時に、

色が変化しない不具合を報告した案件となります。

  • 正常な動作(サイドバー)
  • 不具合(トップ)




結論から言うと、

マウスのカーソルをのせたときの不具合であるため、

Cocoon 2.1.1.2以降ではホバー動作そのものが廃止されます。


このままだと話が終わってしまうので、ホバー動作を実装する方法を、

次の章で紹介していきます。

Cocoonでモバイルフッターのホバー動作を追加する方法

わいひら氏のご厚意により、内部的には残っているため、

子テーマの編集により、ホバー動作を追加することができます。

つまり、Cocoon 2.1.1.2以降でもホバー動作を追加することができます。

(自動アップデートでの最新版は本記事作成現在、2.1.1.3)


ホバー動作を追加するのは、

子テーマを編集する方法が一番手っ取り早くて、安全です。

子テーマを編集する方法としては、2種類あります。

  • テーマエディターで「style.css」を編集
  • FTPやファイルマネージャーなどで「style.css」を編集

どちらも「style.css」を編集する点では同じです。

今回は、テーマエディター、ConoHaファイルマネージャーでの編集方法を説明します。

どちらかを採用していただければ実装できます。

また、FTPでの方法は割愛します。

ConoHaファイルマネージャーで子テーマを編集する

/​public_html/​(あなたのドメイン名)/​wp-content/​themes/​cocoon-child-master/​style.css

まで階層をたどることで、子テーマのスタイルを編集することが出来ます。

コードは以下のようになります。

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background: #ffffff; /* 背景の色(白) */
	color: #000000; /* 文字の色(黒) */
}
.mobile-menu-buttons .menu-button > a
{
  background: none; /* 背景削除 */
  color: #fff;
}
/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
	background: #ffffff; /* 背景の色(白) */
	color: #000000; /* ここは同じ文字色を */
}

テーマエディターで子テーマを編集する

「外観」 - 「テーマエディター」より、スタイルシートを選択します。

こちらに以下のソースコードを挿入します。

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background: #ffffff; /* 背景の色(白) */
	color: #000000; /* 文字の色(黒) */
}
.mobile-menu-buttons .menu-button > a
{
  background: none; /* 背景削除 */
  color: #fff;
}
/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
	background: #ffffff; /* 背景の色(白) */
	color: #000000; /* ここは同じ文字色を */
}

ホバー動作を追加する方法のまとめ

まとめると、

Cocoonでモバイルフッターのホバー動作を追加するには、

子テーマのCSSファイルを編集して、ホバー動作を実装すればよいです。

それでは〜

WordPressテーマランキング

(ACTION)AFFINGER6

当ブログでもメインで使用しているWordPressテーマですよ。

THE・THOR

他を圧倒するようなおしゃれなサイト制作をしたいならこちら。

STORK19

スマホでの見やすさをかなり重視したい人におすすめ。

-ブログ