うなこ
フォーラムへの返信
-
投稿者投稿
-
うなこモデレーターキャプチャありがとうございます。
PRコンテンツは、画像とタイトル+テキストのレイアウトですので、画像が無いと空白ができてしまいます。
以下のCSSで幅を100%にして画像分の空白を消しています。
追加CSSなどに追加してください。いかがでしょうか。↓ウィジェットから設置したPRコンテンツすべてに、以下のcssがかかります。
「widget PRコンテンツタイトル中央揃え」と「widget PRコンテンツテキスト中央揃え」は、必要ない場合は削除してください。/* widget PRコンテンツ幅 */ .widget_vk_widget_pr_content .pr-content-col-text{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } /* widget PRコンテンツタイトル中央揃え */ .widget_vk_widget_pr_content .pr-content-title{ text-align:center; } /* widget PRコンテンツテキスト中央揃え */ .widget_vk_widget_pr_content .pr-content-col-text{ text-align:center; }
あとは代替案としては、ウィジェットではなくブロックで設置する方法があります。
Outerブロックを全幅で背景画像を設置して、その中に見出しブロック+段落ブロック+ボタンブロックで似たようなレイアウトが可能です。
うなこモデレーター※”画像”は使用せず、”背景”でのみ画像を設定しているのですが、”画像”の”レイアウトの:”画像を左に配置する/右に配置するの設定に影響されてしまっているようです。
文字だけですと、今の状況がすこし想像しずらいので…
もし差し支えなければサイトのURLか、もしくは該当場所の画像のキャプチャを添付していただくとわかりやすいかもしれません。- この返信は4年、 7ヶ月前にうなこが編集しました。
うなこモデレーター追加cssか、子テーマでしたら子テーマのcssに以下のcssを追加するといかがでしょうか。
.vk_post:not(.card-horizontal) .vk_post_imgOuter:before { content: ""; display: block; padding-top: 100%; }
※:not指定で、表示タイプが「Card Horizontal」には適応されないようになっております。
うなこモデレーター画像ブロックに左寄せ・右寄せをつけますと、回り込み(float指定)されますので、それが原因だと思います。
対処法としては、カラムブロックなどの中に画像ブロックを配置してください。いかがでしょうか。
うなこモデレーターおはようございます、
VK Blocks Proを最新バージョン(バージョン 0.32.2)に更新すると直ると思いますが、いかがでしょうか?
うなこモデレーターこんにちは、ちょっとうまく解釈できていないかもしれないのですが、、、
メニューのサブメニューを赤色の透過にしたいということでしょうか。
もしそうでしたら以下のcssでいかがでしょうか。.gMenu>li>ul.sub-menu { background-color: transparent; } .gMenu>li>ul.sub-menu li{ background:rgba(211,48,48,0.8)!important; } .gMenu>li>ul.sub-menu ul.sub-menu li{ background-color: transparent !important; }
うなこモデレーターおそらくですが…
iOSではbackground-attachment:fixed;が効かないようで、これが問題ではないかなと思っております。こちらに詳細が書いてありました。
background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょう解決策ではないのですが…汗
タブレットサイズ以下では「固定」にせず、標準のスクロールにする方法はいかがでしょうか?
こちらですと固定ではなくなってしまいますが… 背景画像は見えるようになります。追加cssか子テーマでしたら子テーマのcssに以下のcssを追加してみて下さい。
@media screen and (max-width: 768px){ .wp-block-vk-blocks-outer.vk_outer-bgPosition-fixed { background-attachment: scroll !important; } }
※@media screen and (max-width: 768px) の数字はお好みのサイズに変えていただいてかまいません。
うなこモデレーターOuterブロックの「背景設定」項目から画像を変更できるかと思います。
以下のリンクをご参照ください。
Outer(Pro版のみ)
うなこモデレーター取り急ぎご報告いたします。
わたしは Google Chrome で確認しておりました。
↓以下の環境で確認したところ、症状を確認できました。
- Edge → 画像がはみ出す現象が確認できましたが、最新版を入れましたところ改善
Edge最新 - Firefox(74.0) → 画像がはみ出す現象が確認できました
のちほどあらためて確認します。
うなこモデレーター1)VK BLOCKS の PR Content ですが、左右が等幅だと思うのですが、左右の幅を自由に調整できないでしょうか。
追加CSSや子テーマのcssに以下を追加するといかがでしょうか。
全部のPRコンテンツに反映されますので、もし個別で指定したい場合は高度な設定項目に追加 CSS クラスを追加して調整してみて下さい。@media (min-width: 576px){ .vk_prContent .vk_prContent_colImg{ width: 30%; max-width: 30%; flex:auto; } .vk_prContent .vk_prContent_colTxt{ width:70%; max-width: 70%; flex:auto; } }
2)画像を設置した際、そのままのサイズで表示されるようで、PR Contensの画像が上のコンテンツと重なって、結構使いづらいです。
こちらの現象はわたしの環境では見られませんでした。
VK Blocks Proは最新バージョンですか?
そのままページを表示するとはみ出しますか?Attachments:
You must be logged in to view attached files.
うなこモデレーター
うなこモデレーター
うなこモデレーターご連絡ありがとうございます。
なるほど、なんとなくわかった気がします。
カスタマイズ → Lightning デザイン設定 → 見出しデザイン に設定した見出しデザインが
固定ページに反映されていないということでいいでしょうか。
(管理画面上ではなく、実際の表側のページをみると見出しデザインが変わっていませんか)
カスタマイズのLightning デザイン設定から設定する見出しデザインはページ全体の見出しデザインとなります。添付していただいた写真の、固定ページから「見出しブロック」で見出しのスタイルを変更すると、そちらが優先して上書きされますので… 例えば「装飾無し」にすると装飾が無くなるはずです。
もし、カスタマイズ → Lightning デザイン設定 の見出しデザインにしたい場合は、
固定ページの「見出しブロック」の見出しスタイルは何もしなくても反映されるはずです。
もし、見出しスタイルを選択してしまった場合は一度、添付画像の「ブロックスタイル変更」から「段落」ブロックに変更し、そのあと「見出し」ブロックに戻してください。いかがでしょうか。
(質問の意図が違っていましたら教えください。)Attachments:
You must be logged in to view attached files.
うなこモデレーターこんにちは。 少し確認したいことがあります。
固定ページの方で、見出しを「標準」「装飾無し」双方で試してみたのですが、反映されません。
とありますが、固定ページで使用している見出しブロックはサブテキスト付きの「VK Blocks」の見出しをご利用でしょうか?
それとも通常のGutenbergの見出しブロックでしょうか?あと、追加CSSや子テーマでカスタマイズなどされていますか?
うなこモデレーター添付画像拝見しました。
グローバルメニューを左寄せにするより、ロゴとメニューを中央寄せにする方がバランスが良い気がします。
下のcssはロゴとグローバルナビを中央寄せにするcssとなります。
いかがでしょうか
もし左寄せが良い場合はまた教えてください。※1200px以上のサイズで適応されます。
@media (min-width: 1200px){ .navbar-header { float: none; text-align: center; } .navbar-brand { text-align: center; float: none; } .gMenu_outer { float: none; width: 100%; } ul.gMenu { float: none; position: relative; left: 50%; display: inline-block; text-align: center; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } }
-
投稿者投稿