対馬 俊彦
フォーラムへの返信
-
投稿
-
カバーブロックは img タグを出力しているので alt 属性のことを指摘されるのでしょう。
その指摘が気になるようであれば、カバーブロックの代わりに VK Blocks Pro の Outer ブロックを使えばよいと思います。
Outer ブロックは img タグを出力せずに CSS の background で背景画像を指定しますので、指摘されなくなります。
個人的には「気にしない」というのもひとつの選択肢なのかなという気がします。
解決の役に立たないかもしれませんが、参考リンクです。
小森さんと同じ Chrome コンソールエラーが WordPress のどの Facebook プラグインで試しても起きるという、3年前に投稿された質問です。
この質問は12,000回も閲覧されていますので、同じエラーに遭った人はけっこういるみたいですが、はっきりした原因はわかっていないようです。
VK All in One Expansion Unit 有効化設定 で
アイキャッチ画像自動挿入 のチェックをはずせば非表示になると思います。たしかに、アップデートするとそうなりますね。
回避策等があればご教授くださいませ。
トップページの該当部分の作りを拝見して、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 のスコア改善は期待できますが、手間とリスクを考えるとあまりおすすめできるやり方ではありません。その労力を他の部分でサイト改善に回した方がよいと私は思います。
それなら回答しなくていいのに…というご意見もあるかもしれませんが、「この方法しかなさそう」という参考情報として書かせていただきました。ご容赦ください。
- 操作に失敗すると、最悪の場合サイトが表示されなくなります。
