うなこ
フォーラムへの返信
-
投稿者投稿
-
うなこモデレーター小林さん
この背景画像を右揃えにしてスマホで見た時も固定にしたい、ということですね。
ちょっと今からですと時間がないので明日みてみますね。
うなこモデレーター小林さん
もしかしたら私のコピペミスかもしれません…
以下のcssでいかがでしょうか?@media (max-width: 767px){ .vk_outer-bgPosition-fixed{ background-attachment: unset !important; } }
> 画像のデザインが右寄りなので画像の右側が残ればある程度見れるようになると思います
背景画像を右寄りにするにはbackground-positionで指定できます。
上記のcssが効かない場合は以下のcssでいかがでしょうか?
(right centerは右寄りの上下に中央ぞろえという意味です。background-positionで検索してみると、
使い方がでてくると思います)@media (max-width: 767px){ .vk_outer-bgPosition-fixed{ background-position: right center !important; } }
うなこモデレーター解決策ではないのですが…
調べてみたらcssの
background-attachment:fixed;とbackground-size: cover;を同時に使うと効かなくなるようです。
background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょうこちらの記事に紹介されているbefore要素で高さを固定のpx指定にすれば、なんとかできそうな気はしますが、
ちょっと高さが固定しなくてはいけなかったりと…スマートではないので…
スマホサイズのみ、背景固定の指定をunsetしてみる方法でいかがでしょうか…?
追加cssなどに以下のcssを貼ってみて下さい。@media (max-width: 767px){ .vk_outer-bgPosition-fixed{ background-attachment:unset !important; } }
確かにスマホサイズの画像が設置できればいいのかもしれませんね
解決策ではなくてすみません…💦- この返信は5年、 1ヶ月前にうなこが編集しました。
うなこモデレーターsa-koiさん
> しかしVK最新情報ウィジェットはこれでよいでしょうか?
はい、それでよいと思います。
あとは表示形式を「サムネイル画像/タイトル/日付」に選択して、表示したい記事タイプを設定して保存すれば、デモサイトのような見え方になると思います。
うなこモデレータースキンがvarietyでしたね…失礼しました…
おそらくこれで消えると思いますが、いかがでしょうか?
.page .mainSection header{display:none;}
あと、タイトルのクラス名など調べる方法は、デベロッパーツール(検証機能)で調べられます。
わたしの場合はブラウザがChromeを使用しているので、調べ方としてはこの記事が参考になります。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
ご利用のブラウザのデベロッパーツールの使い方を調べてみると出てくると思います!
うなこモデレーターデモサイトのデータをダウンロードしたいと言うことですよね?
こちらからダウンロード方法など書いてあります。読んでみてください。
※インポートするときの注意点は、全部デモデータに差し変わりますので、必要に応じて現在のサイトのバックアップなどとって下さい。
うなこモデレーター固定ページのタイトルを非表示 とのことで…
こんな感じのcssでどうでしょうか??違いますか??h1.page-header_pageTitle:first-child{ display: none; }
うなこモデレーター> VK_ボタン ウィジェットで設定したボタンを、Paleのヘッダー部に
> 挿入するにはどのようにすればよいのでしょうか?
→おそらくVK_ボタンウィジェットはヘッダー部には挿入できないと思います。サイドバーのことを言われているのだと思います。あと先ほどcssの回答したものですが、こちらの方がいいかもしれません。(fa-envelopeはメールのアイコンのことなので)
.navbar-header .contact_btn .fa-envelope {display:none;}
うなこモデレーターこんにちは!
とりあえず非表示にしたいだけなら追加cssやExUnitのcssカスタマイズに以下のcssを追加してください。
.navbar-header .contact_btn .far {display:none;}
うなこモデレーター最後のliだけに適応するなら以下のcssを追加cssに追加してみてください。
-50pxは一例ですので適当に数字を変更して変えてください。@media (min-width: 992px){ ul.gMenu>li:last-child>ul.sub-menu { left: -50px; } }
全体のliに適応するなら以下のcssを追加cssに追加してみてください。
@media (min-width: 992px){ ul.gMenu>li>ul.sub-menu { left: -50px; } }
うなこモデレーターおはようございます。解決法ではなく報告になるのですが、ちょっと気になって私もOrigin2にしてMacのサファリ、chromeで見てみましたが、ヘッダーのメニューにマウスオーバーしたときにしか展開されませんでした。
メニュー外でも反応してしまうとのことですが現在もそのような状況でしょうか?
LightningProバージョン: 1.9.0.1
うなこモデレーターこんにちは!単純にアイコン下の文字を表示させるだけなら管理画面の追加cssの項目などに以下を追加すれば見えるようになると思います。
@media only screen and (max-width: 480px){ .vk_balloon_icon { margin-bottom: 2rem; } }
吹き出しのしっぽを小さく微調整したものはこちらになります。
お好みでどちらかを張り付けてみてください。@media only screen and (max-width: 480px){ .vk_balloon_icon { margin-bottom: 2rem; } .vk_balloon.vk_balloon-position-left.vk_balloon-type-serif .vk_balloon_content::after { left: 4rem; border: 15px solid transparent; border-bottom-color: inherit; border-top: 0; margin-top: -15px; } .vk_balloon.vk_balloon-position-right.vk_balloon-type-serif .vk_balloon_content::after { right: 4rem; border: 15px solid transparent; border-bottom-color: inherit; border-top: 0; margin-top: -15px; } }
うなこモデレーター先ほどコメントしたものです。ちょっと気になり調べましたところ、コメントの設定が初めは許可しない設定で保存されていたら、新しい投稿にしかコメント欄が表示されないという記事を発見しました。
新しい投稿にはコメント欄が付きますか?
うなこモデレーター一度、別のテーマに変えるとコメントは表示されますか?
-
投稿者投稿