[対馬 俊彦]

以上の気持ちからVektorさんの回答を待ちます。

このトピックを読ませていただき、ダウンロードの手順に関しては
私は、ベクトルさんからの回答はすでに以下のように出ていると理解しました。

以下の理由により既存ユーザーの方のG3へのアップデートはお手数ですがマイアカウントページから最新のzipファイルをダウンロードして手動でよろしくお願いいたします。

石川さんが書かれた理由を読むと、
momo さんの要望に対応するためにはシステム改変が必要で多大な労力がかかると推察します。

これを正式回答として受け取ってもらえないと、石川さんは困ってるだろうと思います。

[対馬 俊彦]

解決法は見つかりませんでしたが、調べてみたことをお知らせします。

Windows 10 の Chrome / Edge で表示したところ、
G3 のサイドバーでは position: fixed; が komori0321 さんの期待通りの動作をしていません。
position: absolute; のような動作になっています。

Firefox だと期待通りの動作をしています。

親要素に transform が指定してあるとこのような動作になるようです。
これが原因かどうかはわかりませんが、CSS でなんとかできるかとやってみました。
その結果、私の力が及ばず断念しました。

どこが原因なのか非常に興味があります。

[対馬 俊彦]

Lightning Pro 8.9.3
VK All in One Expansion Unit 9.52.1.0
VK 最近の投稿 ウィジェットをトップページに設置

同じ環境で試してみましたが、

投稿名をクリックすると投稿したカテゴリー一覧に飛びます。

という現象が起きません。投稿名をクリックすると投稿が表示されます。

どこを設定したら良いのかわかりません

特にそのための設定は必要ないので、
なぜそのような現象が起きているのか不思議ですね。

可能であれば、そのサイトのURLを提示していただけると、
なにかアドバイスが得られるかもしれません。

[対馬 俊彦]

縦横比固定でなく比を変えて変更する際どのようにするのでしょうか？

私はこのやり方を考えられません。

考えるのに手間がかかりそうな気がしますし、
レスポンシブ動作の中で見た目がおかしくなる不安があります。

私なら縦横比を揃えて画像を作りますし、その方が得策だと思います。

もしかしたら、他の方からご期待に合う回答があるかもしれませんが…

隣接間の画像のスペース間隔を設定したいです。

以下のトピックが参考になると思います。

カードブロックでの画像表示乱れの対処法

[対馬 俊彦]

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 のサイトで調べることができます。

https://fontawesome.com/icons?d=gallery&p=2&m=free

[対馬 俊彦]

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 のモバイルフレンドリーテストでチェックしてみるといいです。

https://search.google.com/test/mobile-friendly

[対馬 俊彦]

私の G3 サイトでも momo さんとまったく同じ症状が起きて、いまは解決しています。

原因はブラウザではなく、サーバー側のキャッシュでした。

そのサイトは、ロリポップのハイスピードプランを使っています。
ロリポップ！アクセラレータのキャッシュを削除したら正常に表示されるようになっています。

[対馬 俊彦]

.p a:hover{
text-decoration: underline;
}

は間違いで、正解は

p a:hover{
text-decoration: underline;
}

です。

段落の p はクラス名でないので . をつけません。

<p class="******"> の ****** がクラス名です。

ただし、上記の正解 CSS を追加してもたぶん反映されないと思います。
理由は以下のページの「3.4. CSSの指定の強さ」を読んでください。

できる！WordPressカスタマイズ #01 簡単なデザイン（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 を追加してもよいと思います。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

以下の 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 さんは時間をかけて試行錯誤して
解決法に辿りついておられるようなので、
おせっかいでまた投稿させていただきました。

上から目線で気に入らない…
と思われたらごめんなさい。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

ご回答ありがとうございます。

万が一のときには「なにが起きたんだ!!」と慌てるかもしれませんが、
そのリスクが低いことがわかりましたので、このまま作業を続けることにします。

今後ともよろしくお願いいたします。

[対馬 俊彦]

Chromeの検証でモバイルのソースの取得方法がいまいちわからずで・・・

すいません、こちらについての回答も必要でしたね。
以下のサイトに手順が載っています。

https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html

[投稿者]

投稿