対馬 俊彦
フォーラムへの返信
-
投稿
-
たしかに、アップデートするとそうなりますね。
回避策等があればご教授くださいませ。
トップページの該当部分の作りを拝見して、principal は投稿を1件だけ中央揃えで表示したい、とお考えと判断しましたので、その前提で回答いたします。
グリッドカラムを使わずに、principal を以下のようにするのがよいです。
1. Outer ＞ 投稿リスト の構成にする。
2. 投稿リストの 追加 CSS クラスに justify-content-center と入力する。
添付画像をご参照ください。
以下の CSS を追加すればご希望のことができると思います。
.single-post .page-header { background: url(********************) no-repeat 50% center; } @media (max-width: 575.98px) { .single-post .page-header { background: url(xxxxxxxxxxxxxxxxxxxx) no-repeat 50% center; } }******************** は背景画像(PC)の URL、
xxxxxxxxxxxxxxxxxxxx は背景画像(モバイル)の URL です。【参考】
ご希望には合わないかもしれませんが、CSS を書かずに
カスタマイズ → Lightning ページヘッダー設定 → 投稿 で、
表示要素 [投稿] を 投稿タイプ名 にする方法もあります。
添付画像をご参照ください。FTP ではかんたんにはできないと思います。
以下のページの
最大アップロードファイルサイズを増やす方法
→ All-in-One WP Migration File Extension を使う方法のやり方を使えばできるのではないかと思います。
實藤有聡 様、
初めてこのフォーラムをご利用のようで、お困りの状況はお察ししますが、フォーラムのルールを守ってご利用ください。
Lightning G3 Pro Packのインストールで…
…この場合復帰する方法がありましたら、教えてください。よろしくお願いします。このトピック「VK Filter Search Proの使用方法について」と関係ない内容なので、新たにトピックを立てて質問していただくようお願いします。
分類するとすれば、Lightning に関するご質問なので、以下の URL から質問するのがよさそうです。
上記のページを開いて、いちばん下にある
[ はい ]
[ 了解しました ]
にチェックをつければ質問を書くことができます。どのメニューを選んで移動してきたかが分かり易い作りにしたいと考えております。
以下のような 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 を提示していただければ的確な回答が得られるかもしれません。
- 操作に失敗すると、最悪の場合サイトが表示されなくなります。
