うなこ
フォーラムへの返信
-
投稿
-
>現在は事情があってPale（非推奨）のまま使用していますが、PaleⅡ(Boot strap4)にしたところで、変わりませんでした。
もしデザインスキンのところで不具合がでているようでしたら、PaleⅡ(Boot strap4)に変更してデザインの崩れを直していくことも検討します。【デザインスキンにつきまして】
→デザインスキンのPale(非推奨)は、非推奨になりますので、特に変えても問題がないようでしたら、PaleⅡ(Boot strap4)のほうを使用してください。事情があってPale(非推奨)を使用しているとのことですので、調整が必要になってくると思いますが、今後のことを考えますと、PaleⅡ(Boot strap4)を使用されることをおすすめしております。
ーーーーーーー
【セクションベースにつきまして（*Bootstrap4 のスキンのみ対応）】
一つ確認していただきたいのですが、デザインスキンをPaleⅡ(Boot strap4)のスキンに変更後、セクションベース設定を「セクションベース無し」に設定すると、正常の全幅の幅に広がりますか？▼セクションベースの変更の仕方
- サイト全体のセクションベース設定の場合：
管理画面【外観】>【カスタマイズ】>【Lightning デザイン設定】 - 個別ページの編集画面の場合：
管理画面の固定ページ内の【Lightning デザイン設定】>【セクションベース設定】
▼セクションベース設定について
セクションベース設定がセクションベースありになっていると思われます。
管理画面【外観】>【カスタマイズ】>【Lightning デザイン設定】から「セクションベース設定」をセクションベースなし にして「公開」ボタンを押してください。withさま
非表示設定は、オンにしたサイズがその画面サイズで非表示になります。
▼xs～xxl各サイズの範囲は以下のように設定されています
xs：～576px
sm：576px ～768px
md：768px～992px
lg：992px～1200px
xl：1200px～1400px
xxl：1400px～Lightningのサイト「Lightningなら下記のようなサイトが簡単に作成できます」の箇所に設置しているスライダーブロックは
以下の手順で配置しています。【01】スライダーブロックをPCサイズ用とスマホサイズ用に２つ設置します
【02】PCサイズ用は「複数の表示設定」の「一度に表示する画像の枚数」を４、「一度の動作で動かす枚数」を1、
「非表示設定」は、非表示 ( 画面サイズ : xs )／非表示 ( 画面サイズ : sm )をオンにします。【03】スマホサイズ用は「複数の表示設定」の「一度に表示する画像の枚数」を2、「一度の動作で動かす枚数」を1、
「非表示設定」は、非表示 ( 画面サイズ : xxl )／非表示 ( 画面サイズ : xl )／非表示 ( 画面サイズ : lg )／非表示 ( 画面サイズ : md ) をオンにします。————————–
以前、対馬さまからも「VK Block Pro のカルーセルのレスポンシブ強化」のご要望をいただきまして、VK Blocks Proのissueにもたてさせていただいております。
https://github.com/vektor-inc/vk-blocks-pro/issues/469
現状は他の作業も立て込んでおりまして実装までは時間がかかりますので、
今回のようにスライダーブロックをPCとモバイル用に２つ設置して、非表示設定で出しわけをお願いいたします。よろしくお願いいたします。
▼非表示設定の説明ページ「画面サイズによる非表示設定」部分
【追記】
VK Blocks Proは限定公開のPrivateリポジトリのため、issueが見えなくなっておりますが、ちゃんとissueには追加されておりますのでご安心ください。モバイルではモバイル固定ナビを固定表示することができるので、こちらを使用するのがお勧めですが、もし電話番号とお問合せボタンの同じレイアウトを表示させたいということでしたら、別途、ウィジェットで設置する形になります。
【やり方】
その１：ハンバーガーメニューを展開した時に、モバイルナビ上部orモバイルナビ下部に表示する方法
カスタマイズ→ウィジェット の「モバイルナビ上部」もしくは「モバイルナビ下部」の＋ボタンを押して、検索窓に「従来のウィジェット」と入れてください。選択項目が出てきますので、「VK お問合せセクション」を入れて、「更新」ボタンをおしてください。
モバイルで確認すると、メニューの中のナビの上か下に、お問合せセクションが表示されます。その２:常に画面下部に固定で表示したい場合
カスタマイズ→ウィジェット の「モバイル固定ナビ ウィジェットエリア」の＋ボタンを押して、検索窓に「従来のウィジェット」と入れてください。選択項目が出てきますので、「VK お問合せセクション」を入れて、「更新」ボタンをおしてください。
モバイルで確認すると、画面の下部に、お問合せセクションが表示されます。
この方法ですと、結構幅をとるので、モバイルでは邪魔になりますので、お問合せボタンなどを設置するくらいにして、電話などはモバイル固定ナビに設置するのがいいのかなと思います。おそらく以下の設定でしょうか。
カスタマイズ→Lightningページヘッダー設定 の 投稿 の「表示要素 [ 投稿 ]」を「投稿タイプ名」を選択するといかがでしょうか？もし、ご質問の意図と違っておりましたら教えてください。
参考サイトを確認いたしました。
このサイトは、background で波の背景画像を横方向にリピートさせて左と下付けで表示させれおりました。border-imageを使ってみましたが、期待した通りにはなりませんでした。
border-imageは要素の周りに画像を描く指定backgroundは要素の背景を指定
一番簡単なのは、参考サイトのように背景を指定する方法かなと思います
下のようなCSSのイメージです。/* ヘッダー背景設定 */ .site-header { background: url(画像のURL) repeat-x left bottom; padding-bottom: 30px; }ヘッダー上部エリアを表示させれいる場合は、
カスタマイズのLightningヘッダー上部設定 から背景色と文字色を変更できます。もしお急ぎの場合は、決め打ちになりますが、CSSのafter要素で文字を表示する方法もあります。
content: "サブテキスト";の「サブテキスト」の部分はお好きな文字に変更してみてください。/* 投稿一覧ページのページヘッダーサブテキストを追加 */ .blog .page-header-title::after{ content: "サブテキスト"; display:block; line-height: 1.5; font-size: 1rem; letter-spacing: 2px; margin-top:var(--vk-margin-meta); font-weight:normal; }VKボタンブロックのブロックからではなく「HTMLとして編集」をして、iタグにクラス名を追加すると大きさが変更できますが、HTMLに変換されてしまいますので少々使いずらいのではないかと思いました。
(添付いただいた参考ページは、まだブロックではない頃の記事になりますので、現在は「HTMLとして編集」に変換して使用するイメージになります)提案なのですが、VKボタンにクラス名を付与して、cssで大きさを変更する方法はいかがでしょうか。
自分でクラス名とCSSを追記しなくてはいけなくなりますが、ブロックのままなので扱いやすいのではないかと思います。やり方は次の手順です。
【01】VKボタンブロックを選択して右側にあるブロックの設定画面の「高度な設定」の「追加 CSS クラス」に、クラス名を追加する。
例えばvk_button_iconsize_fa-3xにするとします。【02】子テーマのcssか、もしくはカスタマイズの追加CSSなどに以下を追加する。
.vk_button_iconsize_fa-3x i{ font-size: 3em; }クラス名やfont-size は好きなものに変更して試してみてください。
いかがでしょうか？ - サイト全体のセクションベース設定の場合：
