[対馬 俊彦]

以下のトピックが参考になります。

投稿ページのタイトルの表示方法について

近日正式リリース予定(現在はベータ版)の次期バージョン G3 はご希望のことができそうです。

Home

[対馬 俊彦]

誤解されているようなので、補足させていただきます。

FirefoxもG3のままで問題なく表示されました
ブラウザーfirefoxもちょくちょくupデートがあるので
firefox側で対応できたのでしょうね

私が提示した CSS を適用しなくても Firefox が小森さんの期待通りに表示していたのは、Firefox の仕様が古いからです。

※今回の件についてわかりやすくするため、上記のような表現にしました。Firefox が好きな方、すみません。

【G3 の高速化設定が有効な状態のオーバーレイ表示】
Chrome / Edge：× 表示がおかしくなる
Firefox：○ 期待通りに表示される ⇒ Firefox がアップデートされると ○ ではなく × になると思います。

【G3 の高速化設定を無効にした状態のオーバーレイ表示】
Chrome / Edge：○ 期待通りに表示される
Firefox：○ 期待通りに表示される

もうひとつお伝えさせていただくと、
小森さんは G3 の新しい高速化を捨てて、オーバーレイ表示を選んだ、ということになります。
ご理解されての判断でしたらすみません。

[対馬 俊彦]

私の Katawara 1.5.3 サイトでも同じ症状が起きましたので、
とりあえず、VK Blocks Pro 1.0.16 に戻しておきました。

たぶん次のアップデートで修正されるのではないかと思いますが、
それまでこの状態で運用します。

[対馬 俊彦]

この件について調べてみて、原因を見つけました。

小森さんにとってはやや期待外れな結果です。

今まで通りのオーバーレイ表示をするためには以下の CSS を追加するだけでいけるはずです。

.sub-section {
content-visibility: visible;
}

content-visibility でググると情報が見つかりますが、表示速度の飛躍的向上を期待できる最新の CSS です。

この CSS に Chrome / Edge は対応していますが、Firefox はまだ対応していません。

CSS に上記の行を追加して、この高速化を解除すればオーバーレイ表示が期待通りの動作をします。

こういうことなので、G3 はいまの高速化仕様のまま正式公開となりますね。

親要素の content-visibility が設定されていると子要素の position: fixed; が正しく動作しない、という CSS とブラウザの仕様の問題なので、テーマ(G3)の側では対応ができないと思います。

・検索結果のオーバーレイ表示
・表示速度の向上

のどちらをとるか、小森さんの判断ということになります。

[対馬 俊彦]

最近、なにか設定変更しませんでしたか？

「Non-existent changeset UUID.」でググってみたところ、
サイトのアドレスを変更するとこうなってしまうみたいです。

[対馬 俊彦]

プラグイン Lightning Advanced Slider が原因ですので、
このプラグインを無効化すれば解決すると思いますし、
VK Blocks Pro 1.1.0 にアップデートしてもエラーが起きなくなります。

現在の Lightning は Lightning Advanced Slider が不要ですので、
Lightning Advanced Slider を削除しても問題ありません。

[対馬 俊彦]

古いプラグイン Lightning Advanced Slider が残っていることが原因のようです。

https://osoujibuddy.com/wp-admin からダッシュボードにログインして、
このプラグインを無効化すれば解決すると思います。

【追記】すみません、回答がダブってしまいました。

[対馬 俊彦]

AU3638 さん、

ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。

ヘッダー上部エリアに検索窓を置くのは私には荷が重いのですが、
ヘッダー上部エリアを表示しないやり方ならわりと楽にできました。

こんなかんじになります。

トップページ

このようにする手順は以下の通りです。

【手順1.】
前回の手順で子テーマの function.php に追加した行を以下のものに差し替えます。

function my_lightning_header_logo_after(){
  get_search_form();
  $append_html  = '<div class="header_link"><a href="#">お問い合わせ</a><a href="#">サイトマップ</a></div>';
  echo $append_html;
}
add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );

【手順2.】
前回の手順で子テーマの style.css に追加した行を以下のものに差し替えます。

.navbar-header form {
  float: right;
  width: 280px;
}
.navbar-header form div input#s {
  float: left;
  width: 64%;
}
.navbar-header form div input#searchsubmit {
  float: right;
  width: 33%;
}
.navbar-header .header_link {
  float: right;
  margin-top: 7px;
}
.navbar-header .header_link a {
  margin-right: 10px;
  font-size: 14px;
}

@media (max-width: 991px) {
.navbar-header form,
.navbar-header .header_link {
  display: none;
}
}

ちょこちょこっと作ったものなので、HTML/CSS の調整をした方がいいですが、
これなら実用になるのではないかと…

[対馬 俊彦]

ご回答、ありがとうございます。
エスケープ処理されているとのこと、承知いたしました。
今後必要であればフックで対応します。

[対馬 俊彦]

AU3638 さん、

ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。

その場所にはアクションフックが用意されていないので、
テンプレートファイルを直接いじればできるかもしれませんが、
アップデートのたびに同じカスタマイズ作業をしなければならないし、
私は怖くて手を出せません。

すみませんが、ここから先は「お遊び」としてお楽しみいただければうれしいです。

CSS で強引にヘッダー上部の右側に表示しようと思ったら、
子テーマの style.css にさらに以下の行を追加すればそれっぽくなります。

.navbar-header form {
  position: fixed;
  top: 0;
  right: calc( (100vw - 1110px) / 2 );
}

.admin-bar .navbar-header form {
  top: 32px;
}

.headerTop nav {
  right: 325px;
}

上記のコードだけでは
レスポンシブ対応にはなっていませんし、
スクロールしたときの見え方が怪しげですし、
他にも問題が起きる予感がします。

それともうひとつ、
このやり方で実装するなら、アクションフックでなくてもできます。

[対馬 俊彦]

G3 Pro Unit にヘッダーウィジェットが配置できない不具合を修正した 0.1.3 をアップしました。

石川さん、

G3 Pro Unit 0.1.3 にアップデートして、
ヘッダー右側エリアのウィジェットが使えるようになったことを確認いたしました。
ありがとうございます。

昨日このトピックの回答を書きながら、ウィジェットの場所を見つけられなかったので、
「できます」と書きづらくて、「できる仕様になっています」と書きました。

G3 の検索ウィジェットのデザイン、いいですね。

ベータ版なので、これから細かいところを仕上げていくのだと思いますが、
デザインについてひとつ要望させてください。

添付画像をご参照ください。

検索入力欄をフォーカスしたときのデザインで、
赤丸の部分をピン角にしていただいた方がかっこいいです。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

検索窓を設置するには、どのようなHTMLコードをどこに入れれば宜しいのでしょうか。

【手順1.】
子テーマの function.php に以下の行を追加してください。

function my_lightning_header_logo_after(){
  get_search_form();
}
add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );

【手順2.】
子テーマの style.css に以下の行を追加してください。

.navbar-header form {
  float: right;
}
.navbar-header form div input#s {
  float: left;
  width: 64%;
}
.navbar-header form div input#searchsubmit {
  float: right;
  width: 33%;
}

@media (max-width: 991px) {
.navbar-header form {
  display: none;
}
}

子テーマでのカスタマイズ

【補足】
Variety には「ヘッダーバナーHTML」というカスタマイズ項目があって、
そこに HTML コードを書けばいけると思って昨日は回答しましたが、
実際にやってみたら、その方法だとうまくいかないことが判明したので、
上記の方法を回答いたします。

[対馬 俊彦]

「Variety（非推奨）」と「VarietyⅡ」の違いはなんでしょうか。

第1世代：Origin / Variety
第2世代：Origin II / Variety II
です。

おそらく今までは Origin II をお使いだったと思いますので、Variety II を選んでください。

近々発売の第3世代が案2.の Lightning G3 です。

[対馬 俊彦]

komori0321 さんのサイトを確認させていただきましたが、
PC用画像とモバイル用画像の縦横比は同一で 3.17 です。
これでは G3 のサイトをモバイル端末で表示すると文字が隠れてしまいます。

私の G3 のテストサイトは https://lightning-g3.hp1.work/ ですが、
縦横比を以下のようにしてあります。
PC用画像：3.17
モバイル用画像：2.00

添付画像をご参照ください。

【以下、追記です】

スマホでの見やすさを考慮して、私はスライドの文字数を抑えていますので、
現状の G3 のフォントサイズのままでよいと思います、と書きましたが…

Lightning の制作事例(Showcase)を見ると、長い文章を使っているものがありますね。
Lightning(G2) でも文字やボタンが隠れているものがあります。

この状況を踏まえると、デフォルトのフォントサイズを小さめ(G2並み)にする方がよい、
という考えもありなのかと思います。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

添付画像をご参照ください。

調整をお願いします

というご希望を出されていますが、
G3 はモバイル用スライド画像を用意する前提で
フォントサイズの設定を見直しています(と私は理解しています)。

縦横比を変えたモバイル用画像を用意すれば隠れることはないですし、
その方がスマホで見る人にとって見やすいです。

G2 はスマホで見たときにフォントが小さすぎて見づらいので、
私はカスタマイズして大きくしていました。
私は現状の G3 のフォントサイズのままでよいと思います。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿