Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

読み込み時のヘッダー ロゴについて
 
共有:
通知
すべてクリア

[解決済] 読み込み時のヘッダー ロゴについて

10 投稿
5 ユーザー
8 Reactions
1,043 表示
(@bright)
Trusted Member Registered
結合: 2年前
投稿: 36
トピックスターター  

質問失礼します。

1枚目の画像のようにヘッダー画像を設定しているのですが、別ページを開いた際や読み込み中 ほんの一瞬(めちゃくちゃ一瞬)だけ、2枚目の画像のようにブログタイトルが表示されてしまいます。

一瞬なので特に気にしていなかったのですが、もし改善できるならしたいなと思っております。

現状では、読み込まれるまでの一瞬の間、四角で囲まれたブログタイトルが表示されていますが、ヘッダー画像が表示されるまでの間、こちらを空白(非表示)にすることは可能でしょうか?

アドバイスお待ちしております

 
このトピックは2年前 3回からbrightに変更されました

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3131
 

調査する上で、テーマ情報が無く、添付願います。
過去ログに記載の以下のURLを見ました。

https://bright-web.jp/new/

●手順

モバイルで[ヘッダーメニュー]→[新規記事一覧]を開く。

●現象
上記の現象が再現し。
一瞬、テキストロゴが表示される。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

おそらくですが、こちらのテンプレートファイルをカスタマイズしてalt属性の値を空にすれば良いのではないかと思います。
https://github.com/xserver-inc/cocoon/blob/e2bc7337ce72e324640eb91bd073ffdfbef7cb77/tmp/mobile-logo-button.php#L23


   
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1090
 

WordPressやCocoonの話でなくWebサイト全般の話ですが、画像が読み込まれていない時はalt属性に指定した文字列が表示されます。
今回の現象もalt属性の文字が表示されているようです。

なぜ画像が読み込まれていないかと言えば、ロゴ画像がlazyload(遅延読み込み)されているようです。

PC表示時のロゴは問題なさそうですが、スマホ表示時のロゴ画像には「lozad」というclassなどが指定されています。

lozadについてはCocoonでは使われていないと思うので、ご自身でプラグインを入れるかカスタマイズをするかされたのではないでしょうか?
文字を表示しないというよりも、ロゴ画像は遅延読み込みをしないようにした方が根本解決のような…?


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3131
 
投稿者:: @haruinoue

alt属性に指定した文字列が表示

なる程、alt属性...気付きませんでした。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

ちなみに、私の環境では、再現できず、別の事象が発生します。
(はみ出しているので、見えない)

GIF動画を添付しようとしましたが、Wordfenceにブロックされてしまうため、jpgにします。

「新着記事一覧」を表示すると以下のような状態です。

 
 
大きく右へとはみ出しているようです。
 
 
そして、一番下までスクロールすると、何かのScriptが動いて、少しフッター近くの広告辺りが動きます。
すると、ヘッダーも綺麗な状態に戻るという動作をします。
 
デベロッパーツールだけでなく、Android実機でもその事象が起きます。

   
bright reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

添付に再度チャレンジ。

 
再度撮り直したら、添付できました。
上記は、デベロッパーツールのものですが、Android実機でも同じ動作です。
 
下のシェアボタンが表示される辺りで、何かが動いて、シェアボタンが見えなくなります。
 
おそらく下に動いている?
シェアボタンが一瞬見えて消え、再度下にいくとまた消えます。
(何かが実行されている途中で、スクロールしたからかもしれないですが、不明です)
 
そして、それが動き終わると、ヘッダーが綺麗な状態になります。
 
何かカスタマイズ等なさっているのかもしれないという気はします。

   
わいひら reacted
(@bright)
Trusted Member Registered
結合: 2年前
投稿: 36
トピックスターター  

皆さまありがとうございます。

@mk2_mk2 様にご指摘いただいた、はみ出しの症状は、私の使用しているスマホ(iPhone)では確認できないのですが、こちらどのようにすれば改善できますでしょうか…

論点がずれてしまい申し訳ありません。。

 

本題の、画像ロゴに関してはご教示いただいた内容で試してみようと思います。

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

brightさん

今、Androidスマホ実機で確認すると、先程の事象は発生していないようです。

モバイルヘッダーの表示のタイミングも先程と違います。

また、最下部までスクロールしないと表示されなかった「トップへ戻る」ボタンも、通常通り表示されています。


話は変わりますが。

先にchu-yaさんは、以下のようにお書きになり、ご提示をご依頼なさっています。

投稿者:: @chu-ya

調査する上で、テーマ情報が無く、添付願います。

そして、Cocoonフォーラムでは、上部の案内にあります通り、「高速化の無効」「環境情報のご提示」等、お願いしております。

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/


  • 既に事象が解消していること
  • 「高速化の無効」「環境情報のご提示」がないこと

 

これらのことから、大変申し訳ございませんが、調査・確認等は行っておりません。

(只今手元にスマホしかないこともあり)


   
わいひら reacted
(@bright)
Trusted Member Registered
結合: 2年前
投稿: 36
トピックスターター  

@mk2_mk2 

失礼しました

そしてありがとうございました。

当初の質問だったロゴに関しては無事解決できたので、ページのはみ出しに関しては別のところで改めて質問しようと思います。

ありがとうございました?


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました