[ 解決済 ] VKブロックのステップの番号の位置

[SUGI]

■ WordPress のバージョン
7.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.41.6

■ 期待する動作
VKブロックのステップの番号の位置をもう少し下にしたい

■ 自分で試した事
Google Chromeのデベロッパーツールを見たのですが、調整が出来そうなCSSが見つかりませんでした。

■ 症状が発生するブラウザ
Microsoft Edge

■ 実際の症状
PCのブラウザでは丁度良く綺麗に表示されるのですが、スマホ（iphone）で見ると、番号がかなり上の位置に配置され、キャプションのすぐ真下になっていて違和感のある表示になります。

[Y.INABA]

SUGI 様

実際にどのような表示になっているかスクリーンショット等で確認しないと分からないのですが、「ステップ」箇所の一番上に「レスポンシブスペーサー」を挟み込んでいただくのは一つの手かと思います。
上下の余白も含めてある程度調整されてみて、固まったらステップごとパターンにご登録いただくことをおすすめします。

Attachments:

You must be logged in to view attached files.

[SUGI]

Y.INABA 様

ご回答ありがとうございます。
私の説明が足りず、お手間を取らせて申し訳ありません。

本文の方ではなく、円形の中の”STEP”と”番号”になります。
私の方でもスクリーンショットをアップしますが、文字の位置だけではなく、
文字の大きさも何とかならいかな～と思っております。

Attachments:

You must be logged in to view attached files.

[Y.INABA]

詳細ご教示ありがとうございます。
こちらこそ勝手に判断してしまって申し訳ございません。

ご教示の件ですが、「ステップ」ブロックに以下のようにカスタムCSSを追記いただくのはいかがでしょうか？

※値についてはデフォルト値を入れています。適宜マージンやフォントの大きさなど設定いただけますと幸いです。
※PC等にも適用したいということでしたら、 @media () {}の指定を外していただくか、この指定のないものを別途設定いただければと思います。

@media (max-width: 767.98px) {
  /* 「STEP」等の表示箇所 */
  selector .vk_step_item .vk_step_item_dot_caption {
    font-size: .5rem;
    line-height: .875rem;
  }
  /* 数値の表示箇所 */
  selector .vk_step_item  .vk_step_item_dot_num {
    line-height: var(--vk-step-item-dot-num-line-height);
  }
}

ちなみに該当箇所（CAPTION）は添付スクリーンショットの通りです。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

スマホでお好みの表示にならないのは、ステップブロックの以下の仕様によるものだと思います。

• ステップマーク（円形）のスタイルが単位 px で設定されていて、画面幅によってサイズが変わらない。
• テキストのスタイルが単位 rem で設定されていて、画面幅によってサイズが変わる。（スマホでフォントサイズや行の高さがが小さくなる）

単位を px か rem に統一すれば画面幅に関係なく同じ見え方になりますが、rem に統一する方が楽そうです。

以下の CSS を試してみてください。

body .vk_step .vk_step_item .vk_step_item_dot {
    width: 3.25em;
    height: 3.25rem;
    padding-top: 0.6rem;
}

[SUGI]

Y.INABA 様

ご返答とともにブロックへのCSS追記内容をご教授いただきありがとうございます。
困ったことにブロックにCSSを追加しても、また、そのremの値を変えても、PCのMicrosoft Edgeやスマホのsafariの表示には全く変化がありません。
念の為、外観のエディタのスタイルのCSSに追記してみたのですが、この場合もPC・スマホの両方とも表示に変化が見られないです。何か私の操作でいけないところがあるのでしょうか？

[SUGI]

対馬 俊彦　様
ご返答ありがとうございます。
円形の大きさの変え方を教えていただき、今後、活用させていただきます。ただ、今回の質問である文字の位置と文字の大きさは、PCのMicrosoft Edgeやスマホのsafariの表示には変化がありませんでした、円の大きさが変化したのみです。この他に何か情報があれば、ご教授下されば有難いです。

[SUGI]

対馬 俊彦　様
先の投稿で足りない部分がありましたので大変失礼致しました。
確かに全体の（STEPと番号を合わせた文字では）paddingにより、上下の位置は変わりましたので、そこは訂正させていただきます、大変申し訳ありませんでした。私の方で申し上げたかったのが、上の文字だけ上下移動・下の文字だけ上下移動したいという意味です。説明不足でお詫び申し上げます。

[対馬 俊彦]

以下の CSS で font-size と padding-top で調整してみてください。

/* 円 */
body .vk_step .vk_step_item .vk_step_item_dot {
    width: 3.25em;
    height: 3.25rem;
    padding-top: 0;
}

/* STEP */
body .vk_step .vk_step_item .vk_step_item_dot_caption {
    font-size: 0.6rem;
    padding-top: 0.75rem;
    line-height: 1;
}

/* 番号 */
body .vk_step .vk_step_item .vk_step_item_dot_num {
    font-size: 1.2rem;
    padding-top: 0.2rem;
    line-height: 1;
}

line-height は 1 に固定しておいた方が調整しやすいと思います。

[SUGI]

対馬 俊彦　様

ご解答ありがとうございます。３つのCSSによって今までの質問事項だったものが全て思い通りに出来るようになりました。尊敬の念を抱くとともに、心より感謝申し上げます。

なお、WindowsとIOSでは円形の横幅が変わってしまうので、同じものを２つ作り、一つは大きな画面で表示、もう一つは小さな画面で表示させるようにし、PCとスマホの両方で真円で見えるようにしました。ステップブロックの中の記事はパターンで作成して挿入しましたので、記事の修正はパターンを１回修正するのみなので手間は掛からないようしましたが、それでも少し残念でした。

ただ、今回のCSSは素晴らしく、他の方の参考になれば良いと思っております。

[投稿者]

投稿