対馬 俊彦
フォーラムへの返信
-
投稿
-
どのメニューを選んで移動してきたかが分かり易い作りにしたいと考えております。
以下のような CSS でパンくずリストを目立つように設定する方法も検討されるとよいかもしれません。
.p-breadcrumbs li { margin-right: 1.2em; } .p-breadcrumbs li { padding: 0 0 0 7px; margin-top: 5px; height: 30px; line-height: 30px; background: #dd9933; /* 背景色 */ font-size: 1.2em; } .p-breadcrumbs li+li:before { display: none; } .p-breadcrumbs li:after { content: ""; position: absolute; top: 0; left: 100%; border-style: solid; border-color: transparent; border-left-color: #dd9933; /* 背景色 */ border-width: 15px 12px; width: 0; height: 0; } .p-breadcrumbs li>a, .p-breadcrumbs li>span { color: #fff; /* 文字色 */ }添付画像のような見た目になります。
サイドメニューをいじるとパソコンで見たときの使い勝手を改善できますが、パンくずリストはモバイル端末にも効果があります。
この CSS を設定したページです ↓
トップページからブログをクリックしましたが「投稿」で作成した記事は反映されませんでした。
以下の2つの固定ページがあるのが原因です。
https://f-design.shop/blog/ (上部メニューのリンクはこっちになっています)
https://f-design.shop/ブログ/ (こっちがブログのページになっています)
今度はトップページとブログの両方に「投稿」で作成した記事が表示されてしまいました。
ブログとして表示する固定ページだけでなく、トップページとして表示する固定ページも作ってそれをホームページに指定してください。
添付画像をご参照ください。
CSS に以下の行を追加すると、PC で表示したときのサイドメニューの階層構造における子ページが表示されているときに、子ページが含まれるサブメニューを開いたままにすることができます。
@media (min-width:1200px) { /* サブメニューを開く */ .vk-menu-acc .current_page_ancestor ul.acc-child-close { max-height: 1000px; opacity: 1; } /* × ボタンを非表示に */ .vk-menu-acc .current_page_ancestor .acc-btn { background: none; } }この場合、開いているサブメニューを閉じる必要はないでしょうから、× ボタンを非表示にして手抜きをしています。
この CSS は 親→子 の階層構造しか考えていません。
親→子→孫 の階層構造の場合、やりたいことによってはもっと複雑な処理が必要かもしれませんので、この CSS をベースに考えてみてください。(そうなったら大変そう…)
参考ページ ↓
Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？
おすすめできるようなものではありませんが、どうしてもやりたい!! という場合の方法を紹介します。
この方法には以下の注意点があります。(やるなら自己責任で)
- 操作に失敗すると、最悪の場合サイトが表示されなくなります。
必ず変更するファイルのバックアップをとってから作業を行ってください。 - テーマがアップデートされるたびに書き換えた部分が上書きされてしまう(たぶん)。
- 違うサイズ(縦横比)のスライド画像に差し替えるときに、また作業を行う必要があります。
■ ■ ■ 作業手順 ■ ■ ■
/wp-content/themes/lightning/_g3/inc/ltg-g3-slider/package/class-ltg-g3-slider.php
の 742行目 あたりを以下のように書き換えます。【変更前】
$slide_html .= '<picture>'; // If Mobile Image exist. if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) { $slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '">'; } $slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img">'; $slide_html .= '</picture>';【変更後】
$slide_html .= '<picture>'; // If Mobile Image exist. if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) { $slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '" width="△" height="△">'; } $slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img" width="○" height="○">'; $slide_html .= '</picture>';○ がスライド画像のサイズ、△ がモバイル用スライド画像のサイズの指定です。
たしかに、SEO会社が言う Core Web Vitals のスコア改善は期待できますが、手間とリスクを考えるとあまりおすすめできるやり方ではありません。その労力を他の部分でサイト改善に回した方がよいと私は思います。
それなら回答しなくていいのに…というご意見もあるかもしれませんが、「この方法しかなさそう」という参考情報として書かせていただきました。ご容赦ください。
5枚に増やすやり方がありましたら教えてください。
子テーマを作って、functions.php に以下の行を追加すれば5枚になります。
function my_lightning_top_slide_count_max() { return 5; } add_filter( 'lightning_top_slide_count_max', 'my_lightning_top_slide_count_max' );【参考 1.】
フィルターフックの名前 lightning_top_slide_count_max が G2 と同じですので、G2 でもこれと同じコードでスライド枚数を設定することができます。【参考 2.】
Lightning でフックを使うやり方について以下のページに書かれていて、カスタマイズにとても役に立ちます。興味があればどうぞ。ご質問者様へ
このフォーラムには以下のルールがあります。
一つの投稿内に複数の質問をしない
どこまで解決済みかわからなくなったり、他の人が検索するときにも探しにくいです。質問の内容毎に別途投稿してください。②また、SEO会社からCore Web Vitals の改善施策として…
を別トピックで投稿していただくのがよいと思います。Outer ブロックに入っている以下のブロックも下余白 margin-bottom を持っています。
- カラム
- 画像
- 段落
それぞれのブロックを margin-bottom :0; にすれば、おそらくご希望のレイアウトに近づくとと思いますが、それだけだとスマホで見たときに残念な結果になってしまう気がしますので、メディアクエリを使う必要がありそうです。
段落はいじらなくてよさそうなので、以下の CSS をベースにやってみてください。
.wp-block-columns { margin-bottom: 0; } .wp-block-image { margin-bottom: 0; }参考ページ ↓
メディアクエリについて書かれている部分は上記ページの「3.7. 画面サイズ毎での指定」です。
添付画像から推測すると、その部分は Outer ブロック内の余白ではなく、段落ブロックの margin-bottom が原因のような気がします。
これがご期待通りの回答でないとすると、可能であれば実際の URL を提示していただければ的確な回答が得られるかもしれません。
.vk_borderBox .vk_borderBox_body { } .vk_borderBox_title_container{ }私もこの方法をやってみましたが、枠線ボックスのすべてのスタイルでOKなようにするのは手間がかかりますね。
代わりに、確実でかんたんなやり方を見つけましたので、紹介します。
プラグイン側でこの5色の設定は以下のように CSS 変数で定義されています。
:root { --vk-color-border-red: #dc3545; --vk-color-background-red: #dc3545; --vk-color-border-orange: #ffa536; --vk-color-background-orange: #ffa536; --vk-color-border-blue: #4267b2; --vk-color-background-blue: #4267b2; --vk-color-border-green: #28a745; --vk-color-background-green: #28a745; --vk-color-border-black: #222; --vk-color-background-black: #222; }名前でわかる通り、ひとつの色について設定が2行あります。
上記の行を自分の CSS に追加して、カラーコードを書き換えるだけなので、かんたんでした。
紫色や茶色など、5色以外の色を使いたいときは、違和感がありますが、便宜的に以下のように運用するのが楽だと思います。
- 赤 を 紫 として使う
- 緑 を 茶 として使う
ベクトルさんのテーマやプラグインって、勉強すればするほど「カスタマイズしやすいなぁ…」とありがたく思います。
ちょっと気になったのが…
Q. この5色って、枠線ボックス以外のブロックとかでも使っているの？
CSS 変数の名前からすると、そうかもしれません。確認していません。
もしかしたら、これから追加されるブロックで使われるかもしれません。
もし他の VK ブロックでこの5色の設定を使っていたとしても、サイト全体として色が統一されるので、いいことはあっても困ることはないと思います。
横からすみません。
当初の通り Outer ブロックに背景画像を設定する前提で、この問題の対策の一例として、画面幅が一定以上になったら Outer ブロックをコンテナの幅に合わせる(全幅→標準にする)やり方が有効かもしれません。
具体的手順としては該当ページの カスタム CSS に以下の行を追加します。
@media (min-width: 1800px) { .vk_outer-width-full { margin-left: 0; margin-right: 0; } .vk_outer-width-full.vk_outer-paddingLR-none { padding-left: 0; padding-right: 0; } }※ 1800px の部分は現物合わせで調整
上記の例では画面幅が 1800px 以上になったら全幅の Outer ブロックを標準幅に切り替えています。
ベクトルさんが修正してくれると思いますが、
いますぐこの問題を回避したい場合は、以下の CSS を追加しておけばよいです。.vk_faq .vk_faq_content-accordion-close { overflow: hidden; }アップデートによる修正後は不要になるので、削除しておいてください。
CSS 追加に関する参考ページ ↓
とりあえず、PC の方だけ参考情報をお知らせします。
いま該当 URL を拝見しました。
私の Windows 10 パソコンではフェード動作しています。以前に同じような現象があり、Windows 10 の設定で
簡単操作 → Windows にアニメーションを表示する
がオフになっているとスライドショーの効果が反映されないことがありました。そのときは DRILL LANCER さんがこの原因を見つけてくれたんですけど…
今回もそれと同じかもしれませんので、パソコンの設定を確認してみてください。
1158まで狭めたところうまく表示されました
攻めますねぇ～。
いま試してみたところ、1158 にすると画面幅 992px ではくずれてしまいます。
原則的には 992 が上限ですが、自己責任でやる場合でも 1100 くらいにしておいた方がよさそうです。全幅でスムーズで理想的だと思って、広げたく思いました
そうなんですか… 意外な動機でしたが、そんなふうに言われるとうれしいです (^^♪
私の G3 勉強用サイトではコンテナサイズを指定していません。(デフォルトのままです)
たぶん https://lightning-g3.hp1.work/ のことですよね。設定値をご教示願えればうれしいです
以下のように設定して使っています。
【トップページ・固定ページ】
Lighting レイアウト設定 → カラム設定 で 1カラム にしてあります。
サイドバーを表示していません。【投稿】
Lighting レイアウト設定 → カラム設定 を 2カラム にして、
個々の投稿で全幅にしたいときに 1カラム (サイドバー要素あり) を指定しています。とりあえず回答としてはこれだけなんですが、他にご質問があればどうぞ。
コンテナ設定はコンテナの最大幅 (max-width) を設定していますが、
lg は画面幅 992px～1199px のことですので、
表示くずれの対策としては、1199px992px を超えない数値を指定するとよいです。【追記・訂正】
DRILL LANCER さんが書かれている通りですので、上記の通り訂正いたします。それぞれの画面幅は以下の通りです。()内はデフォルトのコンテナ設定です。
xs : ～575px (なし)
sm : 576px～767px (540px)
md : 768px～991px (720px)
lg : 992px～1199px (960px)
xl : 1200px～ (1140px) - 操作に失敗すると、最悪の場合サイトが表示されなくなります。
