[対馬 俊彦]

横からすみません。

ココチーノデータの数値を強調するために、以下のスタイルを追加して、
2列のままで大きく見せるやり方も選択肢になるかと思います。

.wp-block-gallery.columns-5 .blocks-gallery-item {
    flex-grow: 0;
}

添付画像のようになります。

ご参考まで。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

JavaScript でやってみました。以下のようにすると実現できます。

※バナー画像にクラス menu-btn を割り当てる。

※WordPress によりグローバルメニューの [設定ガイド] に割り当てられた ID が menu-item-*** になっている。

*** は実際のサイトで確認してください。

【JavaScript】

$(".menu-btn").hover(function(){
  $("li#menu-item-***").addClass("sub-menu-open");
}, function(){
  $("li#menu-item-***").removeClass("sub-menu-open");
});

【CSS】

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
opacity: 1;
max-height: 1000px;
}

.device-pc .gMenu>li.sub-menu-open::after {
opacity: 1;
bottom: 0;
}

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
transition: all 1.0s;
}

バナー画像にマウスを合わせた後、サブメニューの項目をクリックしやすいように、transition の数値を 1.0s に増やしてあります。

【このやり方で作ったページ】

本文のバナーをクリックしたらサブメニューを開く

実用になるかどうか微妙なところです。

[対馬 俊彦]

すみません、昨日 11:05 AM のコメントを訂正(撤回)します。

参考ページ：https://techacademy.jp/magazine/19418

このやり方は2つの要素が隣接する場合しか役に立たないので、
今回のHANAさんの質問の回答としては不適切でした。

[対馬 俊彦]

サブメニューが表示されるけどクリックしようとするとメニューが消えちゃう

けっこう大きい問題ですね。
これは私が最初にコメントした CSS を使うやり方ではクリアできません。

[対馬 俊彦]

HANAさん、

ひとつ気になったので、コメントさせていただきます。

スマホでの閲覧は想定しなくてよいのでしょうか？

スマホではマウスオンの検出はできませんし、
タップを検出してもサブメニューを開くことには無理があります。

パソコン限定のサイトであればアリかもしれませんが・・・。

デザインを要望した方にこのことを伝えれば、理解を得られるかもしれません。

[対馬 俊彦]

横からすみません。

JavaScript を使えばできますが、CSS だけでもできそうです。

このページを参考にやってみてください。

参考ページ：https://techacademy.jp/magazine/19418

[対馬 俊彦]

拝見したところ、サイトは https:// になっていますが、
スライド画像が http:// で読み込まれています。

おそらく、最近SSL化をされたことが原因なのではないかと推測します。

カスタマイズ画面でスライドを設定し直せば解決すると思います。

[対馬 俊彦]

いつもお世話になっています。

Lightning Pro 8.5.5 にアップデートして、
トップページとトップページ以外でサイトのタイトルの見え方が同じになったことを
Windows 10 のブラウザで確認しました。

どうもありがとうございました。

[対馬 俊彦]

すでに 解決済 になっていますが、参考になると思いますので書かせていただきます。

リストブロックのフォントサイズを変更する方法として、
[高度な設定] の [追加 CSS クラス] に h5 と入力すると
フォントサイズが少し大きくなります。

添付画像をご参照ください。

ここに h1 と入力するとフォントサイズがかなり大きくなります。

h5 ⇒ h4 ⇒ h3 ⇒ h2 ⇒ h1 とだんだんフォントサイズが大きくなっていきます。

small と入力するとフォントサイズが小さくなります。

フォントサイズをおおざっぱに変更するだけでよいのであれば、このようなやり方もあります。

～～～以下、補足情報です。～～～

Lightning には Bootstrap 4 というしくみが組み込まれていて、
上記の h5 や small は Bootstrap 4 のクラス名です。

「Bootstrap 4 クラス」でググるとたくさんのクラス名が見つかりますので、
眺めていると役に立つのがあるかもしれません。

私がよく使う、おすすめのクラス名は mb-0 です。

段落のフォントサイズを大きくすると、段落間が空き過ぎることがあります。

そのようなときに mb-0 を使うと次のブロックとの隙間を小さくすることができます。

mb-0 は CSS の margin-bottom: 0; の指定に相当します。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

今回の現象の原因が書かれている情報を見つけました。

https://www.itmedia.co.jp/news/articles/2101/07/news092.html

今後数カ月かけてすべての Facebook ページからいいねボタンが削除されるとのことです。

FBの管理画面に最近’新しいページにようこそ！’とか’ニュースフィールド’とか
見慣れない表示がされています。

komori0321 さんの Facebook ページは運悪く(?)今回変更が実施された一部に該当するのでしょう。

Facebook は大小さまざまの仕様変更が明確なアナウンスなしに行われて、戸惑うことがあります。

今回の komori0321 さんの質問の現象はおそらくこれが原因でしょう。

Facebook 自身が提供しているプラグインで Facebook ページが表示できないなんて、
「かんべんしてよ！！」って言いたくなりますね。

[対馬 俊彦]

もう原因に辿りついているかもしれませんが・・・

JPNSTYLE を使っている私の作業サイト

トップページ

で試しましたので、ご覧ください。

フッターウィジェットエリア3 に VK FB Page Plagin で
ハーベスト出版さんの Facebook ページを表示できていますので、
Facebook の仕様の問題である可能性は低いと思います。

[対馬 俊彦]

いや、Facebookページなのか？

Facebook ページにあるはずの いいね！ ボタンがないですよ。

[対馬 俊彦]

Facebookページじゃなく、個人ページ

たしかにそう見えますね。

今まで表示されていたのはなぜか。

不思議ですね。興味が湧いてきました。

[対馬 俊彦]

https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP

で試した画面をアップします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

原因は WordPress サイトではないです。は断言できないのではないでしょうか？

以下の URL を開いて、ご自分の Facebook ページの URL を入力して試してみてください。

https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP

ツールを使い埋め込みコードを生成して、サイトで試してみましたが
おっしゃるように表示はされません

取得したコードを WordPress に貼り付けるのではなく、上記の URL で確認してください。

komori0321 さんの Facebook ページの URL を入力すると、
その下に Facebook ページが表示されません。

上記の URL は WordPress サイトとはつながっていませんので、
原因は WordPress サイトではないと判断しました。

• この返信は4年、 3ヶ月前に対馬 俊彦が編集しました。

[投稿者]

投稿