Aki Hamano

@blopolice さん

こんにちは。
原因は分かりませんが、SSL証明書が正しく認識されていないような気がします。
普通にサイトにアクセスする分には、Chromeでも鍵マークは赤くなっておらずちゃんとhttpsで通信出来ていますので、WordPress管理画面の何かしらの設定が問題かもしれません。

一旦原点に戻って、

• デフォルトテーマ（TwentyTwentyOne）へ変更
• すべてのプラグインの停止

などを再度試してみていただけないでしょうか。
参考：問題解決のためのチェックリスト

@blopolice さん

こんにちは。

chromeで起動して投稿画面を開いた際にも、コマンド、オプション、1キーをしましたが、こちらでは反応はありませんでした。

→申し訳ありません、ちょっと文字が分かりづらかったですが、Macの場合は「Command＋Option＋I」で、「I」というのは数字ではなくアルファベットです。

あとは、ブラウザによってサイトの保護状態（http/https）が変わるのが気になるのですが、管理画面 > 設定メニューの「WordPressアドレス」「サイトアドレス」はhttps～になっていますでしょうか。

@asako08 さん
はじめまして。
ご質問のプラグインは以下で良いでしょうか？

https://ja.wordpress.org/plugins/font-awesome/

検証してみましたが、ウィジェットブロックエディタではアイコンを表示・挿入するためのJavaScript自体が読み込まれていません。

ソースを見た所、JSをenqueueしているフックが原因だと思われますが、それが仕様なのか不具合なのかは分かりません。

こちらのフォーラムでは解決が難しいので、よろしければGitHubの方でissueを投稿されてみてはいかがでしょうか。
https://github.com/FortAwesome/wordpress-fontawesome/issues

@hiroshitsuchiya さん

こんにちは。
細かいレイアウトについては正解がなく、また具体的なコードも書ききれませんので、これ以上のレイアウト調整についてはご自身でお試しいただくか、もしくは専門業者等にご相談いただけないでしょうか。

@hiroshitsuchiya さん

以下のコードではいかがでしょうか。

@media only screen and (max-width: 481px) {
  .menu-button-container #primary-mobile-menu {
    display: none;
  }

  .primary-navigation {
    position: static;
    width: 100%;
  }
  .primary-navigation > .primary-menu-container{
    position: static;
    opacity: 1;
    height: auto!important;
    visibility: visible;
    padding: 0;
    transform: initial;
  }

  .primary-navigation > div > .menu-wrapper {
    padding-bottom: 0;
  }

  .primary-navigation > div > .menu-wrapper .sub-menu-toggle {
    display: flex;
  }

  .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul {
    display: none;
  }
}

@hiroshitsuchiya さん

はじめまして。
CSSの上書きで対応出来ると思います。
例えば、以下のようなCSSをカスタマイザーの「追加CSS」に設定してみて下さい。

@media only screen and (max-width: 481px) {
	.menu-button-container #primary-mobile-menu {
		display: none;
	}

	.primary-navigation {
		position: static;
		width: 100%;
	}
	.primary-navigation > .primary-menu-container{
    position: static;
    opacity: 1;
    height: auto!important;
    visibility: visible;
    padding: 0;
    transform: initial;
	}
	
	.primary-navigation > div > .menu-wrapper {
		padding-bottom: 0;
	}
}

CSSの知識が必要となりますが、適宜希望のレイアウトに合わせて調整してみて下さい。

@charinchiさん

はじめまして。

Gutenbergの動画ブロックは、サイドバーの設定にある通り、videoタグについて以下の属性を設定出来ます。

autoplay
loop
muted
controls
playsinline
poster
preload

上記以外の属性（ controllist や oncontextmenu ）は設定出来ず、無理にHTML編集モードから追記するとブロックが壊れます。

これはGutenbergの仕様で、このブロックに関わらず想定されていないタグ・属性を追記するとブロックが壊れる場合があります。

そのまま保存すればサイト側では編集した通りに表示はされますが、エディタ側ではブロックは壊れたままとなります。

上記の通り動画ブロックでは対応出来ませんが、単純にvideoタグを埋め込むだけなのであればカスタムHTMLブロックを使えば良いと思います。
カスタムHTMLブロックであれば、書いたHTML通りに出力されるので、好きな属性を設定出来ると思います。

新規でカスタムHTMLブロックを追加するか、参考サイトに記載されているように「HTMLに変換」のどちらかを行ってみて下さい。

@rskd さん

はじめまして。

モバイル表示で、右上の「Menu 三」というハンバーガーボタンを押下した時に開くメニュー内の項目の事で良いでしょうか。

それでしたら、以下のようなCSSで対応出来ると思います。

@media only screen and (max-width: 481px) {
	.primary-navigation .menu-wrapper {
		text-align: center;
	}
}