対馬 俊彦
フォーラムへの返信
-
投稿者投稿
-
Lightning G3 の 前の記事・次の記事 の表示タイプは カード(インテキスト)で、画像を非表示にすると高さがなくなってしまうので、ご質問のような結果になってしまいます。
ご質問者以外にも Lightning G3 の 前の記事・次の記事 のレイアウトやデザインを変更したい方がいらっしゃると思いましたので、この部分のカスタマイズのやり方の例を記事にしてみました。
フックで指定できるオプションも一覧にまとめてありますので、ご参考にどうぞ。
たしかに、固定ページや投稿でキャッチフレーズの部分を書き換えできるといいですね。
興味があったので、調べてみました。
■■■ ① キャッチフレーズの書き換えについて ■■■
/wp-content/themes/lightning-pro/inc/header-top/package/class-lightning-header-top.php
の390行目あたりの以下の行をカスタマイズすればキャッチフレーズを別のものにできました。
$header_prepend .= '<p class="headerTop_description' . $text_center . '">' . get_bloginfo( 'description' ) . '</p>';
例えば、この行を以下のように書き換えれば 抜粋 が H1 で囲まれて表示されます。
$header_prepend .= '<h1 class="headerTop_description' . $text_center . '">' . get_the_excerpt() . '</h1>';
ただし、テーマのアップデートで上書きされる可能性があります。
この部分にフィルターフックがあるとうれしいですね。
■■■ ② SEO 対策として ■■■
スマホで表示したときにはキャッチフレーズが表示されませんので、たぶん、Google のようなモバイルファーストインデックスの検索エンジンはキャッチフレーズを認識してくれないと思います。
SEO 対策として行うのであれば、スマホでもキャッチフレーズが表示されるように CSS を追加する必要があるかもしれません。
■■■ ③ 固定ページの見出しのタグについて ■■■
以下のフックで固定ページのページタイトルを囲むタグを <h1> から <div> に置き換えできます。
add_filter( 'lightning_pageTitHtml', 'my_lightning_pageTitHtml' ); function my_lightning_pageTitHtml($pageTitHtml) { if ( is_page() ){ $pageTitHtml = str_replace('<h1', '<div', $pageTitHtml); $pageTitHtml = str_replace('</h1>', '</div>', $pageTitHtml); } return $pageTitHtml; }
■■■ ④ こうやったらよいのでは ■■■
① のキャッチフレーズ書き換えはフックが使えないので、やらない方が無難だと思います。
③ で見出しを囲むタグを <div> に書き換えた上で、本文の先頭に H1 の見出しを置くのがよいのではないかと…
上記の中で間違っている部分があるかもしれません。お気づきの方はご指摘ください。
Lighting G3 であれば以下の CSS でいけると思います。
991
の部分はお好みで調整してください。@media (max-width:991px) { .ltg-slide-text-set { display: none; } }
【念のため】
Lighting G2 であれば以下の CSS です。@media (max-width:991px) { .slide-text-set { display: none; } }
機能追加要望とのことですが、現状こうすればよさそう…というアイディアを書かせていただきます。
以下の CSS を追加すると、線の色を「黒」にしたときに線の色が白になります。
他のところに影響が出ることもないのではないかと思います。:root { --vk-color-border-black: #fff; --vk-color-background-black: #fff; } .vk_borderBox-color-black .vk_borderBox_title_container .vk_borderBox_title { color: #333; } .vk_borderBox-color-black .vk_borderBox_body { color: #fff; }
※テキストカラーのように色々なカラー(カスタムカラー含む)から選べるともっと利便性増しそうな気がします。
以下のトピックをご参考にどうぞ。
参考情報です。
私のサイトはご質問者とほぼ同じ以下の環境ですが、ご質問のような現象が起きていません。
* WordPress 5.8.1
* Lightning Pro 8.11.2
* デザインスキン Origin IIこういう現象はキャッシュ系のプラグインが原因のことがよくありますので、そういうプラグイン(Autoptimizeとか)をお使いでしたら止めてみればなにかわかるかもしれません。
情報、ありがとうございます。
おかげで、WordPress の絵文字のしくみがだいたい理解できました。
Windows 10 の Chrome では出力されるコードに違いがなかったのですが、Android スマホで表示したら、絵文字の 有効 / 無効 による違いを確認できました。
WordPress の絵文字が有効になっている場合、絵文字が SVG 画像に変換されて表示されました。
SVG のデータは http://s.w.org/ から配信されています。WordPress の絵文字を無効にしたら、端末に内蔵(?)されている絵文字が表示されました。
添付画像をご参照ください。
こうやって比べて見ると、どっちでもいいかな…という気がします。
絵文字を使うことがめったにないので、一部の端末で文字化けするかもしれないリスクも気にならないし…。
どっちでもいい、ということは表示が高速になるように無効化するのがよいという結論に達しました。
Attachments:
You must be logged in to view attached files.横からすみません。
* できれば Classic Widgets を使いたくない。(使うプラグインを減らしたい)
AND
* 5.9 まで待てない。という場合は、カスタム HTML の前に 見出しブロック H4 を追加して、追加 CSS クラス に
widget-title sub-section-title
と入力すればご希望の結果になると思います。添付画像をご参照ください。
Attachments:
You must be logged in to view attached files.【追記】
要望ではなく質問だと思って回答しましたが、もし要望として投稿されたのであればご容赦ください。5カラムは設定できないでしょうか
できません。
グリッドカラムは Bootstrap のグリッドシステムというものを使用しています。
このグリッドシステムは画面幅を12等分する構成になっているため、同一幅のカラムを配置するときにカラム数に指定できるのは 12 の約数だけです。
理論上、カラム数に指定できるのは 1,2,3,4,6,12 ですが、たぶん 12 は需要がないという判断により 1,2,3,4,6 が選択肢に設定されています。
ユーザーインターフェース上は 5 も選べるように見えていますが、上記のしくみで動いていますので、5 は設定できません。
ちなみに…
WordPress に標準で入っているカラムブロックは5カラムができます。
その代わり、グリッドカラムに比べて使い勝手がかなり落ちます。(個人的意見です)プラグインを増やさなくても、
スムーススクロール機能は VK All in One Expansion Unit にありますよ。 😊添付画像をご参照ください。
offset については、先日のレスポンシブスペーサーのトピックのやり方でクリアできると思いますし…
Attachments:
You must be logged in to view attached files.参考情報です。
WordPress 5.8.1
Lightning Pro 8.11.2
Lightning Skin Fort 9.1.1上記の最新版にしてある私の環境では左右にスライドできています。
もしかしたら、プラグインのどれかが原因かもしれませんし、カスタマイズが影響しているのかもしれません。
-
投稿者投稿