対馬 俊彦
フォーラムへの返信
-
投稿者投稿
-
[表示されている枚数] + [1枚] 以上のスライドが必要、というのは
VK Blocks にバンドルされている JavaScript ライブラリ「Swiper」の仕様ですので、
対策はむずかしいと思います。https://swiperjs.com/swiper-api#param-loop
以前にこのようなケースがあって、そのときは同じ3枚のスライドの組み合わせを複製して、
合計6枚にして対応しました。ページネーションは非表示にしました。うまくいったようで、よかったです。
最初の質問に関してですが…
Evergreen のようなヘッダー透過のデザインだと、
マウスホバーでテキストが入れ替わる動きがいいカンジになりますね。
私のデモサイトでも使ってみました🥰林 有一 様、
このフォーラムは「一つの投稿内に複数の質問をしない」というルールになっています。
質問が複数あると、どこまで解決済みかわからなくなったり、他の人が検索するときに探しにくい、
という理由によるものです。ということで、
「グローバルメニューのメニューの下線を消したい」という質問を新たに投稿していただくのがよいです。【以下、追記です】
新たに投稿していただくのがよい、と書きましたが、
以下のトピックに答えがありますので、質問は不要です。> var(–ujs_menu_height)などが何処に定義してあるのかも判らない状態ですが
先頭の
:root { }
のところで定義してあります。var(–ujs_menu_height) → 62px
var(–ujs_text_height) → 20px
に置き換わって計算(calc)されます。グローバルナビの高さやフォントサイズなどをカスタマイズしてある場合に対応しやすいようにこういうやり方をしていますが、特にいじっていなければ 62px / 20px のままの設定でいけると思います。
このページに書かれている機能が使えそうです。
VK All in One Expansion Unit 9.88.0.0 で特定の固定ページをページリストから除外する機能を追加しました。
興味があったので、CSS でカスタマイズしてみました。
以下の CSS を追加すれば、マウスホバーで文字が英語から日本語に切り替わります。
タブレットなどのモバイル端末はカスタマイズが適用されず、日英併記のままです。Evergreen サイトだとこのままでいけると思います。
Evergreen 以外でも使えるようにしたつもりですが、確認が十分じゃないかもしれません。
ここ、こうするといいよ…ってご意見があればお願いします。@media (min-width: 992px) { :root { --ujs_menu_height: 62px; /* 実際のグローバルナビの高さをここに入れてください */ --ujs_text_height: 20px; } .device-pc .global-nav-list>li>a { position: relative; overflow: hidden; padding-top: calc( var(--ujs_menu_height) / 2 ); padding-bottom: calc( var(--ujs_menu_height) / 2 ); min-width: 100px; /* 必要に応じて書き換えてください(メニューの文字数が多い場合) */ } .device-pc .global-nav-list>li .global-nav-name { height: var(--ujs_text_height); position: absolute; top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) ) / 2 + var(--ujs_text_height)); opacity: 0; left: 0; display: flex; justify-content: center; align-items: center; transition: all .5s; } .device-pc .global-nav-list>li .global-nav-description { font-size: 14px; height: var(--ujs_text_height); padding: 0; opacity: 1; position: absolute; top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) ) / 2 ); opacity: 1; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; font-weight: bold; transition: all .5s; } .device-pc .global-nav-list>li>a:hover .global-nav-name { top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) ) / 2 ); opacity: 1; } .device-pc .global-nav-list>li>a:hover .global-nav-description { top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) ) / 2 - var(--ujs_text_height)); opacity: 0; } }
CSS の追加方法がわからない場合は以下のページが参考になります。
石川 様、
VK Blocks Pro 1.83.0.0 にアップデートして、
タブブロックの先頭の Tab Item の複製で起きていた現象が解消されていることを確認しました。ありがとうございます。
> 念のためURL部分のみをブラウザに貼り付けてみると、
私が昨日これを行ったら「ページが見つかりません」と表示されたので、
URL が違うのかと思ったのですが…ソースコードが表示されるなら合ってますね。
iemiru-cms のサービスを提供している会社に問い合わせれば、
なにかわかるかもしれません。WordPressで外部のURLのJavaScriptコードを読み込ませるには何か特別な設定があるのでしょうか。
特別な設定はないはず…。
該当URL で
<script src=
で指定されている .js ファイルが存在しないみたいです。期待通りリストが表示される(2)と同じ URL になっていますか?
VK Blocks Pro のタブブロックについての質問で、
URL にアンカーを指定してタブを切り替えるのが目的だと理解しました。
違っていたらご指摘ください。タブブロックの Tab Item にはアンカーを設定する入力欄がありません。
もし仮にアンカーを入力できたとしても、
URL にアンカーを指定するだけではタブの切り替えはできません。なんとなく、JavaScript で切り替えを実装すればできそうな気はしますが、
タブブロック以外のやり方を検討するのがよさそうに思います。実際のページを見てみないとわかりませんが…
たぶん、VK Video Block Pro ブロックの
レイアウト設定 → 最小の高さ
を調整するとうまくいくように思います。例えば、1920×1080 の動画を全幅で再生する場合、
最小の高さを 56 VW にすると、
パソコンでもスマホでも動画が欠けずに表示されます。石川 様、
VK All in One Expansion Unit 9.99.3.0 にアップデートして、
有効化設定を開けることを確認しました。ありがとうございます。
たびたび、すみません。
そして、すでにご存じでしたら、すみません。それぞれのカスタムタクソノミーのアーカイブにて、製品の分類に関する説明情報を前段に入れたい、
HTML はほとんど記述できませんが、製品分類のカテゴリー編集画面の説明欄に入力したものが前段に表示されます。
テキスト情報だけでよいなら、このやり方がもっともかんたんです。
-
投稿者投稿