対馬 俊彦
フォーラムへの返信
-
投稿
-
私のところにも 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を固定ページのコンテナと、ウィジェットに入れても
アンダーラインの表示方法は違うこれは、もう仕方ないんですかね・・・
はい、仕方ないです。
テーマ制作者がそのように意図して作ったものなので。menu-footer-navigation-container
このクラスを発見できずにおります・・・私が先ほど「リンク文字のマウスホバーの下線」のトピックに投稿した図解を見て、
こちらもがんばってやってみてください。【追記】以下の操作も役に立つと思います。
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 を動作保証対象外としていますので、
他のブラウザをお使いいただくのがよいです。カテゴリーのページをレイアウトする方法があれば…
カテゴリーのアーカイブページでいろいろと凝ったことをやろうとすると、
すごく苦労しますので、やめた方がいいです。画像の構成を組む為に最適な方法
カスタム投稿タイプのカテゴリーごとに固定ページを作成して、
VK Blocks Pro の 投稿リスト ブロックを使って、
該当カテゴリーの投稿を固定ページに表示するようにすればスッキリすると思います。最後の add_filter の行のクオーテーションが全角になっています。
4つとも半角のシングルクォーテーションに置き換えればエラーが出なくなると思います。ただ標準のカスタム投稿ではページ属性が編集できず
「標準のカスタム投稿」が ExUnit のカスタム投稿タイプ設定 のことだとすると、
この文脈が理解できます。カスタム分類で [ブロックエディタ対応（REST APIに出力 / 任意）] に
チェックをつけていなかったために、ブロックエディター画面で分類を選べなかったのだと思います。
添付画像 custom-category.png をご参照ください。また、カスタム分類の説明欄に記入した内容が
アーカイブページの description に出力されるようになっています。
添付画像 category-description.png をご参照ください。CTP UI プラグインを入れなくても、PHP のカスタマイズなしで、
石川さんが提示されたやり方＋上記のやり方でご希望のことが実現できたような気がします。表示する投稿タイプが選ばれていないことが原因のような気がします。
たぶん、[新商品] にチェックをつければうまくいくと思います。【追記】すみません、添付画像がダブってしまいました。
