うなこ
フォーラムへの返信
-
投稿
-
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 は好きなものに変更して試してみてください。
いかがでしょうか？一度、以下をお試しいただいてもいいでしょうか。
【01】管理画面の外観→テーマ から「Katawara」テーマが最新バージョンでなければ更新する
【02】Katawara紹介ページの子テーマのところから「Katawara 子テーマサンプル」をダウンロードする。
(もしくはわたしが添付したkatawara-child.zipを使用していただいても大丈夫です)【03】管理画面の外観→テーマ から「新規追加」→「テーマのアップロード」をクリックして、先ほどダウンロードしたkatawara-child.zip ファイルを選択し、「今すぐインストール」をクリックする。
【04】このテーマはインストール済みです と表示が出たら「アップロードしたもので現在のものを置き換える」をクリックする。
【05】「パッケージを展開しています… 、、、、テーマの更新に成功しました」のような表示がでたら「有効化」をクリックすると有効化されると思います。
うまくいかない場合は教えてください。
———————–
あと、石川さんのおっしゃる通り、Katawaraの子テーマについてはあくまでサンプルで特別な内容を記載しているわけではありませんので、下記の冒頭部分も併せてご確認ください。VKボタンブロックを配置して、カスタムカラーのカラーピッカーから色を選んでから、再度カラーピッカーを開くと
#0071a1と表示されるのを確認できました。
調査いたしますのでしばらくお待ちください。
▼vk blocks pro の issue
https://github.com/vektor-inc/vk-blocks-pro/issues/865もしお急ぎでしたら、カラーパレットから選択した色は、カラーピッカーでも正常にカラーコードが表示されましたので、よく使用するカラーは、カラーパレットに追加してみてください。
カスタマイズ→色→Color Palette Setting から5色まで設定できます。
ExUnitの設定の「IEアラートの表示」にチェックが入っていませんか？
IEブラウザで閲覧時に表示されるアラートになります。
（添付いただいたページを見ました。わたしのCromeの環境ではアラート文章は見えませんでした）記事で見た情報なので、試していただきたいことがあるのですが、
必ず元に戻せるようにバックアップをとってから実行してください。php_value post_max_sizeを128Mに変更すると、いかがでしょうか。ーーーーーー
別の方法としましては、有料版になってしまいますが、
All-in-One WP Migration の Unlimited Extension ($69～) を購入すれば、100MB を超えるデータをインポートできるようになります。ちょっと気になりましたのが、VK Blocks Pro バージョン 1.3.9と古いバージョンですので、（現時点の最新バージョン 1.17.0 ）
vwsサイトのマイアカウントにログインして、マイアカウントページのダウンロードから、改めてVK Blocks Proをダウンロードして、そのzipファイルをプラグインの新規追加からアップロードしてみてください。
