うなこ
フォーラムへの返信
-
投稿
-
全く同じではないのですが、、似たようなレイアウトにするには
表示タイプを「メディア」にしてカラムを全て「1」に設定すれば一番近いかもしれません。LTG Media Postsと比べるとサムネイル画像とタイトルがやや大きくなりますので、
以下のcssで必要に応じて調整してみて下さい。
数値などはお好みの大きさに調整してください、いかがでしょうか？.mainSection .vk_post.media { padding: 1rem 0; } @media (min-width: 768px){ .mainSection .vk_post.media .media-img { width: 24%; } } .mainSection .vk_post.media .vk_post_title { font-size: 1em; } .mainSection .vk_post.media.vk_post-col-lg-12.media { padding: 1rem 0; }わたしのiphone8ではOuterブロック内に VKボタンでリンク設置したボタンは問題なく押せました。
ちょっと見てみないと詳しくわからないのですが、
もしかしたらなにか他の要素が邪魔しているのかもしれません。
差し支えなければ該当のサイトのリンクなど貼れますか？過去の記事で、こちらに詳細が記載してありました。
・スライドナビゲーションの廃止
・メニュー展開ボタンの位置指定の廃止
https://lightning.nagoya/ja/archives/lightning-6-0モバイルのメニュー展開ボタンの位置指定はcssで解決できます。
子テーマのstyle.cssや 外観 > カスタマイズ の 追加CSS などに下記を追加してみてください。.vk-mobile-nav-menu-btn { right:5px; left:inherit; }「PR Content」は現状は写真にキャプションは入らないので、代替案としては２つあります。
【代替案01】カラムブロックを利用する
「PR Content」ではなく「カラムブロック」を使用して「画像」「見出し」「段落テキスト」を入れて似たようなレイアウトを作る。【代替案02】cssの::after要素でimageタグの後に文字を入れる
●「PR Content」の右側の設定画面で一番下にある「高度な設定」を開き、追加CSSクラスにお好きなクラス名（添付画像参照）を入れて更新ボタンを押す。
●追加 CSSなどに以下のCSSを追加する。
※「キャプションです」の部分にお好みのテキストを入れてください。
※「PR Content」が複数ある場合は「高度な設定」の追加CSSクラスに別のクラス名を付けて
該当箇所（下のCSSで言えばpr01の箇所）を変更して文字などを変えてみて下さい。.pr01 .vk_prContent_colImg::after{ content:'キャプションです'; font-size: .75rem; display:block; text-align:center; margin-top:10px; }少し手間がかかりますが、お試しください。
なにか他にいい方法があればいいのですが、、、VK Blocks Proの投稿リストブロックをご利用の場合は以下のCSSを追加すれば
画像の全てが枠内で表示できるようになります。
ただし、全ページの投稿リストブロックとカードブロックに影響が出ますので、
他のページに影響が出ないようにしたい場合は該当の固定ページの下の方に出ている
VK All in one Expansion UnitのカスタムCSS 内にcssを記述して更新していただければ
その固定ページだけで適応できると思います。いかがでしょうか？.card-post:not(.card-horizontal) .vk_post_imgOuter { background-size: contain; background-repeat: no-repeat; }もしくは、追加CSSなどに記載する場合は
bodyタグについている投稿IDで区別することもできます。もし違うブロックをご使用の場合はまた教えてください
失礼しました、カスタム投稿タイプもカード表示できることが確認できました。
Lightning Pro バージョン4.3.3追記ですが、
特定の投稿タイプのみで表示タイプは「カード」で、カード内の画像を枠内に収まるようにする場合は
以下のCSSで表示できると思います。.vk_posts-postType-○○ .card-post:not(.card-horizontal) .vk_post_imgOuter { background-size: contain; background-repeat: no-repeat; }※vk_posts-postType-○○ の「○○」の部分には投稿タイプID名が入ります。
※:not(.card-horizontal) はカード水平にした場合には適応されないように追記しています。cssでカード内の画像を全部表示することは可能なのですが…
現在不具合で「Lightningアーカイブ設定」でカスタム投稿タイプはカード表示にできないかもしれません。
（通常の投稿は表示できる）念のためCSSを添付いたします。
追加CSSなどに以下を追加するとカード内の画像は枠内に収まるようになります。
特定のページのみで対応する場合は、固定ページの該当のページのカスタムCSSに追加してみてください。
もしうまくいかない場合はご返信ください。.card-post:not(.card-horizontal) .vk_post_imgOuter { background-size: contain; background-repeat: no-repeat; }セクションベース内の「最新の投稿」タイトルの上の余白のことでしょうか？
（質問の意図と違っていましたらまた教えてください。）追加CSSに以下を追加してください。 「1rem」の数字はお好きな数字に変更してみて下さい。
レスポンシブですので、好みによりメディアクエリを追加して調整してみて下さい。.mainSection-base-on { padding-top: 1rem; }見比べてみたところ以下のCSSが原因の用でした。
もしお急ぎでしたら以下のCSSを追加cssなどに追加してください。
いかがでしょうか。.gMenu>li:hover, .gMenu>li[class*=current]{ width:auto; }カスタマイズの「Lightning モバイル固定ナビ」に電話番号を設置すれば、
どこのページでも下に固定で出ますので、よければご利用ください。例えばリンクURLに
tel:000-000-0000
といった感じに設定してみて下さい。
いかがでしょうか。以下の理由により固定にすると画像が拡大する仕様となっております。
画像のサイズによっては、スクロール中に見切れてしまう可能性がありますが
以下のcssを追加cssなどに追加してみるといかがでしょうか？@media screen and (max-width: 480px){ .vk_outer-width-full { background-size: cover !important; } }
