対馬 俊彦
フォーラムへの返信
-
投稿
-
Lightning Pro には Font Awesome 5 Free というアイコンフォントが組み込まれています。
これを使って、以下のようなコードを [カスタム HTML] に入れればアイコンだけの表示にできます。
<a href="#"><i class="fab fa-twitter" style="font-size:2.0em;color:#aaa;"></i></a>Twitter 以外のアイコンのコード (上記の fab fa-twitter の部分) は Font Awesome のサイトで調べることができます。
ExUnitや VK Blocks Pro など他プラグインの影響で
そうだったんですか。
先ほど私が試した環境は以下の通りでした。
Lightning G3 Pro Unit 0.1.0
VK All in One Expansion Unit 9.52.1.0
VK Block Patterns 1.0.3
VK Blocks Pro 1.0.16いまアップデートを確認したところ、上記のバージョンは最新のようです。
最新版にアップデートした状態でも症状が解消しなかったのですが、
古いバージョンがサーバー側のキャッシュに残っていたんですね。サーバー側のキャッシュを削除したら解消したので、それが原因と判断してしまいました。
ご指摘・アップデート、ありがとうございます。
私のところにも Google Search Console から
同じ指摘のメールが届くことがあります。最初の頃はいろいろと調べて対処しようと試みましたが、
Search Console 側の誤検出と思われることがほとんどで、
放っておけばそのうち Search Console 管理画面で問題が解消していたので、
最近はこのメールが来ても基本的になにもしていません。もし心配であれば、
Google のモバイルフレンドリーテストでチェックしてみるといいです。私の G3 サイトでも momo さんとまったく同じ症状が起きて、いまは解決しています。
原因はブラウザではなく、サーバー側のキャッシュでした。
そのサイトは、ロリポップのハイスピードプランを使っています。
ロリポップ！アクセラレータのキャッシュを削除したら正常に表示されるようになっています。.p a:hover{ text-decoration: underline; }は間違いで、正解は
p a:hover{ text-decoration: underline; }です。
段落の p はクラス名でないので . をつけません。
<p class="******">の ****** がクラス名です。ただし、上記の正解 CSS を追加してもたぶん反映されないと思います。
理由は以下のページの「3.4. CSSの指定の強さ」を読んでください。指定が強い CSS がすでに存在するときは、それ以上の指定の強さが必要です。
アンダーラインが出る場所と、出ない場所があるのを統一したいな・・・
たぶん、以下の CSS を追加すれば、グローバルメニューも含めて
すべてのテキストリンクにホバー時の下線をつけることができます。a:hover { text-decoration: underline !important; }今回の poohdai515 さんの場合、
上記の CSS に加えてグローバルメニューのテキストリンクに
クラス指定をつけてtext-decoration: none !important;を指定するやり方もありますが、
!importantを!importantで上書きするのは変なかんじです。!importantは他にやり方がない場合の最終手段ですので。該当箇所のクラス指定を調べて、個々に CSS を上書きしてやるのが
正統な、破綻が起きないやり方だと思います。同じhtmlを固定ページのコンテナと、ウィジェットに入れても
アンダーラインの表示方法は違うこれは、もう仕方ないんですかね・・・
はい、仕方ないです。
テーマ制作者がそのように意図して作ったものなので。Pale のデモページ https://demo.dev3.biz/pale/guidance/dental/ を例に
図解しますので、添付画像を見て①～⑦の手順通りにやってみてください。該当ページの追加CSSに!importantをつけても反映されないんでしょうかね・・・
!important はできるだけ使わない方がよいです。
上記の図解の通りやっても下線がつかない場合は、underline の後ろに半角スペースを空けて
!important を追加してもよいと思います。以下の CSS で、マウスホバーすると下線がつくようになります。
.****** a:hover{ text-decoration: underline; }****** はクラス名です。
該当箇所のクラス名はデベロッパーツールで確認してください。場所によってはクラス名を複数指定しないと CSS が効かないことがあるかもしれません。
[解決済] となりましたが、参考になると思いますので投稿させていただきます。
勉強ついでにお読みいただければと思います。考え方を順を追って書きますが、添付画像もあわせてご参照ください。
まず、非表示にするときの CSS は
display: none;です。デベロッパーツールで探すと、フッターナビゲーションの部分が赤矢印で示した通り
クラス名menu-footer-navigation-container
になっていますので、以下の CSS で非表示にすることができます。.menu-footer-navigation-container { display: none; }この CSS だと PC でも非表示になってしまいますので、
モバイル端末のときだけ非表示にするためには以下のようにします。.device-mobile .menu-footer-navigation-container { display: none; }性格悪いなぁ…
最初からこの CSS を回答してくれればいいのに…
と思われたらごめんなさい。もらったコードをコピペして済ませるのは楽かもしれませんが、
それだけだとあまり進歩がないと思います。poohdai515 さんは時間をかけて試行錯誤して
解決法に辿りついておられるようなので、
おせっかいでまた投稿させていただきました。上から目線で気に入らない…
と思われたらごめんなさい。ご回答ありがとうございます。
万が一のときには「なにが起きたんだ!!」と慌てるかもしれませんが、
そのリスクが低いことがわかりましたので、このまま作業を続けることにします。今後ともよろしくお願いいたします。
Chromeの検証でモバイルのソースの取得方法がいまいちわからずで・・・
すいません、こちらについての回答も必要でしたね。
以下のサイトに手順が載っています。https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html
Chrome の検証で、先頭の
bodyタグの部分に着目してください。PC で表示したときにはクラス
device-pcがつきますが、
モバイル端末のときはdevice-mobileとなります。このクラス名で PC・モバイル の区別ができます。
あいわ会のサイトにアクセスしてみましたが、メニューは正常に表示されています。
お使いのブラウザが Internet Explorer なのかもしれません。
もしそうだとすると、
Lightning は Internet Explorer を動作保証対象外としていますので、
他のブラウザをお使いいただくのがよいです。最後の add_filter の行のクオーテーションが全角になっています。
4つとも半角のシングルクォーテーションに置き換えればエラーが出なくなると思います。
