瀬戸内ことり
フォーラムへの返信
-
投稿
-
すみません。動画を添付すると、ダウンロード視聴が必要になるんですね。
ダウンロードしなくてもご確認いただけるよう、gif に変換して添付します。うなこさんがお示しくださっているもののうち「Hover時に矢印が動く」の１つ目を少し触ってみました。
こんな感じでしょうか。
(以下のコードを投稿画面に貼り付けてみてください)<!-- wp:paragraph {"vkbCustomCss":"/* Hover時に矢印が動く */\nselector a {\n position: relative;\n display: inline-block;\n padding-right: 50px;\n text-decoration: none;\n color: currentColor;\n transition: transform 0.2s ease, color 0.2s ease; /* ふわっと移動のアニメーション */\n}\n\nselector a::before {\n width: 100px;\n bottom: 2%;\n right: 3px !important;\n border-bottom: solid 2px currentColor;\n}\n\nselector a::after {\n width: 30px;\n background: currentColor;\n bottom: calc(50% - 3px);\n transform: rotate(45deg);\n}\n\n/* 共通 */\nselector a::before,\nselector a::after {\n content: '';\n position: absolute;\n display: block;\n height: 1.5px;\n right: 0;\n transition: all 0.2s linear;\n}\n\n/* hover時：矢印が右に動く */\nselector a:hover::before {\n right: -10px !important;\n}\nselector a:hover::after {\n right: -14px !important;\n}\n\n/* hover時：テキストがふわっと上に移動 */\nselector a:hover {\n transform: translateY(-3px); /* 3px上に移動 */\n}","className":"vk_custom_css","style":{"typography":{"fontSize":"1.25rem"}},"textColor":"black"} --> <p class="vk_custom_css has-black-color has-text-color" style="font-size:1.25rem"><a href="#">View More</a></p> <!-- /wp:paragraph -->※ 私の環境で作業しました故、お使いの環境や既に施されているカスタマイズ等によって修正が必要になる可能性がございます。
そうでしたか！
解決してよかったです^^「EX UNIT」⇛「CSSカスタマイズ」もしくは「外観」⇛「カスタマイズ」⇛「追加CSS」に以下のようなコードを書かれた覚えはありませんか？
.grecaptcha-badge { visibility: hidden; }reCAPTCHAバッジを非表示にするためのコードです。
書かれていれば、バッジ (ロゴとお呼びになっている右下のアイコン) は表示されていないのが正解です。
※ ただし、その場合、以下のレギュレーションに従う必要があります。
reCAPTCHA Enterprise バッジを非表示にしたいのですが、どうすればよいですか？該当する動画をダウンロードしてみると、容量が12.8MB、サイズが640×480でした。
間違いなければ、パソコン表示がぼやけるのはそもそもの動画が小さいためではないかと。
パソコン表示で最大幅に制限をかけるには、コードを以下のように修正できると思います。
<figure class="wp-block-video" style="max-width: 640px; width: 100%; margin: auto;"> <video controlslist="nodownload" oncontextmenu="return false;" controls src="https://minamiyama-seitai.com/wp-content/uploads/2024/11/005.mp4" style="width: 100%; height: auto;"> </video> </figure>この他に、お伝えしたいことが３点あります。
一部、ご質問の内容とは違った角度からのご進言となりますが、目を通してみていただけるとうれしいです。
【１】どのようにして動画をお作りになっているのかは存じ上げませんが、幅を1280以上に設定されると画質はよくなると思います。画質については既に以下のトピックで回答を得られていますね＾＾
mp4の動画を挿入する場合のサイズ等※ ただし容量も大きくなるため、サーバーにアップロードするのはおすすめしません。
【２】動画は直接サーバーにアップロードするのでなく、YouTubeやVimeoにアップロードし、埋め込みブロックをお使いになるのがよろしいかと存じます。サーバー容量を圧迫することと、表示速度に影響を与えるおそれがあることが理由です。※ 直接アップロードするなら、容量をぐっと抑える（圧縮をかける）必要があります。現状では重すぎるかなと。
【３】おまけです。
パソコン表示を気にされていますが、suisei98様の業種であれば、おそらく「お客様になってほしい対象」の方々は少なく見積もっても７割、多ければ９割以上がスマホでウェブサイトをご覧になっていると思います。パソコンでの見た目よりスマホでの見た目を重視されるのがおすすめです。アナリティクス（アクセス解析）で見るとわかります。ぜひ一度、確認してみられてください。
