対馬 俊彦
フォーラムへの返信
-
投稿
-
右側にチラッとサイドバーらしきものが見えるのが気になります。
昨日私が書いたやり方は以下のことが前提になっています。
- トップページのレイアウト設定が 1カラム になっている。(サイドバーを表示しない)
- トップページコンテンツエリア上部にウィジェットが配置されていない。
増田さんのサイトは上記に該当しないように見えます。
もし可能であれば、サイトの URL を提示していただくと解決が早まると思いますが…
おそらく、増田さんのサイトの場合は以下のやり方でご希望の形になると思います。
- スライドショーの代わりに ウィジェット を表示する
- トップページの先頭に表示したいコンテンツを 固定ページ で作成する (この固定ページに全幅のブロックを入れる)
- スライドウィジェットエリアに VK 固定ページ本文 ウィジェットを追加して、上記の固定ページを指定する
当方OuterProではないため
Outer ブロックは VK Blocks Pro というプラグインに含まれています。
VK Blocks Pro のライセンスは Katawara に付属していますので、このサイトの マイアカウント からダウンロードして使えますよ。
VK Blocks Pro には役に立つブロックがいくつもありますので、インストールすることをおすすめします。
まだダッシュボードから Lightning G3 (14.*) へのアップデートができませんね。
以下のページの最後の方に Lightning G3 (14.0.9) があります。
ここからダウンロードしてアップデートを行ってください。
手順は上記ページに書かれています。横からすみません。
Katawaraスライドウィジェットエリアに仮画像を入れたところ…
添付画像のようなやり方をされているのだと思いますが、
このやり方だと全幅表示はできません。以下のようにすればご希望の形になると思います。
- スライドを非表示にする (ウィジェットも表示しない)
- トップページの先頭に「Outer」や「画像」のような全幅表示できるブロックを追加する
- トップページの編集画面で余白設定の [サイトコンテンツの上下余白を無しにする] にチェックをつける
Katawara 1.6.5 にアップデートして、ブロックエディターの編集領域の幅が狭い件が修正されたことを確認いたしました。
ありがとうございました。
まず原因特定が先ですけど
・プラグインをひとつずつ無効化してみる
・ブラウザのキャッシュを削除する
などが一般的な作業ですが、デベロッパーツールのコンソールからなにか情報が得られるかもしれません。参考ページ：https://kt-life.net/error-g-preview/
参考情報です。
Lightning G3βバージョン: 14.0.9
Lightning G3 Pro Unit バージョン 0.1.4同じ環境ですが、
カードブロックのカードアイテムの画像に WebP 画像を設定できています。カードブロックを作り直す
プラグインを停止する
のようなことをすれば原因が絞り込めるかもしれません。私の Katawara サイトでも同じ現象になっていますが、
[カスタマイズ] ⇒ [Katawara CSS最適化(高速化)設定] で
[Tree shaking 有効化設定] を [何もしない] にすれば、
矢印が白くなり、『・・・』が表示されます。ということで…
ベクトル開発スタッフの方が修正してくれるのを待つか、
上記の設定変更をするかのどちらかになります。アップデートのbreadcrumb.phpの変更も考えると対馬様の方法に変更しておいた方がいいですね・・・
サイト制作を請け負う側からすると、手離れがよいというのはたいへん大事なことで、
テンプレートを書き換えることにはどうしても消極的になってしまいます。もしご自身のサイトであれば、手離れのことは気にしなくてよいので、
テンプレートを書き換える方が
・わかりやすいし
・テーマの動作が理解できるし
・いじくり倒すのが好きな人にはたまらないし
・アップデートでトラブったときには勉強になるし(経験あり)・・・といいこともありますよ。いつもお世話になっています。
FAQ ブロックのように【1】の部分を太字にしていただくのがよいと思います。
また、開いたときに【2】の部分にレスポンシブスペーサーひとつ分くらいのマージンを持たせると見やすくなるように感じます。先日はこのように書きましたが、意見を方向修正させていただきます。
アコーディオンブロックに「背景なし」以外のスタイルを設定すると、
それだけでとても見やすくなります。その後、アコーディオンブロックを使っていて、
「背景なし」以外のどれかをデフォルトにするのがいいと思うようになりました。「背景なし」は見出しの「装飾無し」のような位置付けで、
スタイルをカスタマイズしたい人向けに今のまま残しておけば、
デフォルトのまま使うことが多い初心者にも、
カスタマイズしたい人にもうれしい仕様になると思います。子テーマに .js ファイル (JavaScript) を組み込む必要がありますが、
以下のプログラムで書き換える方法もあります。jQuery(function($){ $("#panHome > a > span").html('<i class="fa fa-home"></i> ホーム'); });よく見ると、一瞬だけ「HOME」と表示されますので、その点においては美しくないですが、
テーマのアップデートの影響を受けにくいのがこのやり方のメリットです。14.0.8 にアップデートして、右端の余白の問題が修正されたことを確認いたしました。
どうもありがとうございました。昔からこうだったのか？
はい、そうだと思います。
私が数年前に Lightning Pro で作ったサイトもこのくらい空いています。もしかしたら、見え方の違いの原因はサイドバーの有無かもしれません。
サイドバーがあれば、「お問い合わせ情報」ブロックの幅が狭くなりますから、
真ん中の空白はかなり小さくなります。Lightning Proバージョン: 8.9.5
Lightning Skin Paleバージョン: 8.1.2上記と同じ環境のサイトで試しましたが、
以下の CSS だけでモバイル端末で段落の下マージンをゼロにできています。p { margin-bottom: 0em; }p タグに対してこの CSS よりも強い指定をしているものが別にあるのではないかと思います。
例えば、プラグインを追加したとか…。
JPNSTYLE 8.1.1 にアップデートして下部の余白が修正されたことを確認いたしました。
パンくずエリアの件について、承知いたしました。
どうもありがとうございました。
以下の CSS を追加すればできると思います。
■孫メニューを右に開く CSS の例
⇒ https://lightning.uonuma-js.com/menu-open-right/@media (min-width: 992px) { .gMenu>li:hover>.sub-menu { overflow: visible; } .vk-menu-acc ul.sub-menu ul.acc-child-open, .vk-menu-acc ul.sub-menu ul.acc-child-close { position: absolute; left: 100%; top: 0px; width: 240px; background-color: #191919; } }■孫メニューを2列で表示する CSS の例
⇒ https://lightning.uonuma-js.com/menu-2-columns/@media (min-width: 992px) { .gMenu>li:hover>.sub-menu { overflow: visible; } .vk-menu-acc ul.sub-menu ul.acc-child-open, .vk-menu-acc ul.sub-menu ul.acc-child-close { position: absolute; left: -50%; width: 480px; } .vk-menu-acc ul.sub-menu ul.acc-child-open li, .vk-menu-acc ul.sub-menu ul.acc-child-close li { width: 240px; float: left; background-color: #333333; } .vk-menu-acc ul.sub-menu ul.acc-child-open li a, .vk-menu-acc ul.sub-menu ul.acc-child-close li a { border-right: 1px solid rgba(255,255,255,.15); } }メニュー項目の数が多い場合は、以下のブロックのどれかを使って固定ページを作った方が見やすくなるかもしれません。
・子ページリスト
・選択投稿リスト
・カード
