サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年9月23日 22:57
ヘッダーを固定した場合、拡縮に伴いページがチラついて見え目に辛く。
●手順
[Cocoon設定]→[ヘッダー]
ヘッダーレイアウト「センターロゴ（デフォルト）」
ヘッダーの固定「チェック」
高さ「600」
●現象
動作①
画面を下スクロールし600px移動すると、ヘッダーロゴ+ナビメニューが一体となり、header-containerの高さが600px→40pxに縮む。
この為、画面スクロール位置は600pxなので、タイトルでなく、一気に本文中13行目（図参照）あたりまでジャンプしたようになる。
動作②
同様に、上スクロールし0px(ヘッダーメニュー位置)に達した時、ヘッダーロゴ+ナビメニューが解除される。
この時、header-containerの高さが600pxに戻り、一気に画面トップにジャンプする。
●期待動作
tmp/footer-javascript.php
動作①でジャンプせず、そのままタイトルに移動したい。
動作②も同様。
fixed→stickyにしてみましたが、境界のタイミングで切り替わらない場合があり。曖昧な表現で申し訳ない。
●類似
以前フォーラムで以下の投稿があり。
この時は少し質問・希望内容が違いましたが。
https://wp-cocoon.com/community/postid/62770/
わいひら reacted
2022年9月24日 19:28
ご連絡ありがとうございます！
こちらでも不具合を確認いたしました。
ただこれどのようにどうしたらよいものだろう…。
ちょっと考えてみます。
Topic starter
2022年9月24日 19:49
ただこれどのようにどうしたらよいものだろう…。
実際、私は使っておらず。
単にfixed→stickyに変更したら、境界でsticky⇔staticが交互に変化し、動作が変になり。
私も色々試行しましたが、良いアイデアがなく。
実害がないので、思いついたらで結構です。
●余談
以下のように最大値が800pxと記載があるので、threashold=600固定ではなく、ヘッダーコンテナ高さ分スクロールした時かな？$('.header-container-in').height()かなと思え。
ヘッダーの高さをpx数で指定します。モバイル環境ではモバイル用設定のものが利用されます。未入力でデフォルトになります。（最小：0px、最大：800px）
2022年9月25日 18:19
●余談
以下のように最大値が800pxと記載があるので、threashold=600固定ではなく、ヘッダーコンテナ高さ分スクロールした時かな？$('.header-container-in').height()かなと思え。ヘッダーの高さをpx数で指定します。モバイル環境ではモバイル用設定のものが利用されます。未入力でデフォルトになります。（最小：0px、最大：800px）
こちらって、添付画像の「高さ」の部分でよかったでしょうか。
2022年9月25日 18:21
今回の不具合環境で使用されるスクリプトメモ。
(function($){
/*固定ヘッダー化*/
function stickyHeader(){
if (!$("#header-container").hasClass("fixed-header")) {
/*トップメニュータイプに変更する*/
$("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap");
$("#header-container").addClass("fixed-header");
$("#header-container").css({
'position': 'fixed',
'top': '-100px',
'left': '0',
'width': '100%',
});
$("#header-container").animate({'top': '0'}, 500);
}
}
/*固定ヘッダーの解除*/
function staticHeader(){
if ($("#header-container").hasClass("fixed-header")) {
/*センターロゴタイプに戻す*/
$("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo cl-slim");
$("#header-container").removeClass("fixed-header");
$("#header-container").css({
'position': 'static',
'top': 'auto',
'left': 'auto',
'width': 'auto',
});
}
}
var prevScrollTop = -1;
var $window = $(window);
var mobileWidth = 1023;
$window.scroll(function(){
var scrollTop = $window.scrollTop();
var threashold = 600;
var s1 = (prevScrollTop > threashold);
var s2 = (scrollTop > threashold);
var w = $window.width();
// console.log(scrollTop);
/*スクロールエリアの位置調整*/
function adjustScrollArea(selector) {
if ($(selector) && $(selector).offset()) {
offset = $(selector).offset().top;
// console.log(offset);
h = $("#header-container").height();
// console.log(h);
pt = $(selector).css('padding-top');
// console.log(pt);
if (pt) {
pt = pt.replace('px', '');
} else {
pt = 0;
}
if ((scrollTop >= offset - h) && (w > mobileWidth)) {
if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) {
$(selector).css({
'padding-top': h + 'px',
});
}
} else {
if (pt > 0) {
$(selector).css({
'padding-top': 0,
});
}
}
}
}
/*スクロール追従エリアの調整*/
function adjustScrollAreas() {
adjustScrollArea('#sidebar-scroll');
adjustScrollArea('#main-scroll');
}
/*固定ヘッダーのスタイル決め*/
function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) {
if (s1 ^ s2) {
if (s2 && (w > mobileWidth)) {
stickyHeader();
}
}
if (scrollTop <= 50 || w <= mobileWidth) {
staticHeader();
}
}
adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth);
adjustScrollAreas();
prevScrollTop = scrollTop;
});
/*ウインドウがリサイズされたら発動*/
$window.resize(function() {
/*ウインドウの幅を変数に格納*/
var w = $window.width();
if (w <= mobileWidth) {/*モバイル端末の場合*/
staticHeader();
} else {/*パソコン端末の場合*/
var scrollTop = $window.scrollTop();
console.log(scrollTop);
if (scrollTop >= 50) {
stickyHeader();
}
}
});
})(jQuery);
2022年9月25日 18:23
2022年9月25日 18:25
●余談
以下のように最大値が800pxと記載があるので、threashold=600固定ではなく、ヘッダーコンテナ高さ分スクロールした時かな？$('.header-container-in').height()かなと思え。ヘッダーの高さをpx数で指定します。モバイル環境ではモバイル用設定のものが利用されます。未入力でデフォルトになります。（最小：0px、最大：800px）
上記の「threashold=600」はJavaScriptコードの添付画像の部分のことですね。
確かに。
2022年9月26日 18:49
おそらくヘッダーの高さ設定とかない時に
トップへ戻るボタンの作成
https://github.com/xserver-inc/cocoon/blob/3215023ba304c78add1bc1f6bcab443b321fbf28/javascript.js#L20
↓
トップへ戻るボタンのソースコードをコピー＆改変して固定機能のコードを書いた
上記のような経緯で600がそのまま流用されてしまったっぽいです。ソースコードから推測するに。
とはいえ、ヘッダーの高さを考慮したソースコードを書いたとしても、スクロールした時にガクンとなるのは変わらない。
ということで、ちょっと何か良い方法がないか調べてみます。
Topic starter
2022年9月30日 16:21
$(function() {
/*固定ヘッダー化*/
function stickyHeader() {
if (!$("#header-container").hasClass("fixed-header")) {
/*トップメニュータイプに変更する*/
$("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap");
$("#header-container").addClass("fixed-header");
$("#header-container").css({
'position': 'fixed',
'top': '-100px',
'left': '0',
'width': '100%',
});
$("#header-container").animate({
'top': '0'
}, 500);
/* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる★ */
$("#content").css({
'padding-top': `${threashold}px`,
});
}
}
/*固定ヘッダーの解除*/
function staticHeader() {
if ($("#header-container").hasClass("fixed-header")) {
/*センターロゴタイプに戻す*/
$("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo cl-slim");
$("#header-container").removeClass("fixed-header");
$("#header-container").css({
'position': 'static',
'top': 'auto',
'left': 'auto',
'width': 'auto',
});
/* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる★ */
$("#content").css({
'padding-top': '0',
});
}
}
/* 境界値をヘッダーコンテナに設定★ */
var threashold = $('#header-container').height();
var prevScrollTop = -1;
var $window = $(window);
var mobileWidth = 1023;
$window.scroll(function() {
var scrollTop = $window.scrollTop();
console.log(scrollTop);
var s1 = (prevScrollTop > threashold);
var s2 = (scrollTop > threashold);
var w = $window.width();
// console.log(scrollTop);
/*スクロールエリアの位置調整*/
function adjustScrollArea(selector) {
if ($(selector) && $(selector).offset()) {
offset = $(selector).offset().top;
// console.log(offset);
h = $("#header-container").height();
// console.log(h);
pt = $(selector).css('padding-top');
// console.log(pt);
if (pt) {
pt = pt.replace('px', '');
} else {
pt = 0;
}
if ((scrollTop >= offset - h) && (w > mobileWidth)) {
if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) {
$(selector).css({
'padding-top': h + 'px',
});
}
} else {
if (pt > 0) {
$(selector).css({
'padding-top': 0,
});
}
}
}
}
/*スクロール追従エリアの調整*/
function adjustScrollAreas() {
adjustScrollArea('#sidebar-scroll');
adjustScrollArea('#main-scroll');
}
/*固定ヘッダーのスタイル決め*/
function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) {
if (s1 ^ s2) {
if (s2 && (w > mobileWidth)) {
stickyHeader();
}
}
/* 境界値に達したら固定化★ */
if (scrollTop <= threashold || w <= mobileWidth) {
staticHeader();
}
}
adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth);
adjustScrollAreas();
prevScrollTop = scrollTop;
});
/*ウインドウがリサイズされたら発動*/
$window.resize(function () {
/*ウインドウの幅を変数に格納*/
var w = $window.width();
if (w <= mobileWidth) { /*モバイル端末の場合*/
staticHeader();
} else { /*パソコン端末の場合*/
var scrollTop = $window.scrollTop();
console.log(scrollTop);
if (scrollTop >= 50) {
stickyHeader();
}
}
});
});
わいひら reacted
Topic starter
2022年9月30日 16:33
●説明
動作を十分確認していないので、保証はできません。
ヘッダーの高さが変化分を、コンテナに余白を設け、調整するように変更してみました。（★の部分）
・下スクロールし境界に達したら、ヘッダーが縮む為、コンテナに元のヘッダーの高さ分の余白を設け、縮んだように見せない。
・上スクロールし境界に達したら、コンテナに設けた余白を無くし、ヘッダーが元の高さ分、あったかのように見せる。
●懸念点
子テーマCSSなどでコンテナの余白を調整してある場合、影響があるかもしれません。
わいひら reacted
2022年9月30日 20:22
コードありがとうございます！
動作を確認してみました。
#contentに対して#header-containerの高さに合わせたpadding-topを設定するんですね。なるほど！
ただ、アピールエリアやカルーセルを表示していると、パディングで押し上げられてその部分が空白になって見えるようです（添付画像）。
コンテンツなのには変わりないのでアピールエリアやカルーセルを#contentに含めてしまっても良いのかもしれませんね。
もしくは以下の部分のコードにアピールエリアやカルーセルの高さも含めても良いのかも。
var threashold = $('#header-container').height();
#contentに含める線で問題ないかちょっと動作確認してみようと思います。
Topic starter
2022年9月30日 20:49
ただ、アピールエリアやカルーセルを表示していると、パディングで押し上げられてその部分が空白になって見えるようです（添付画像）。
すみません、全く考慮していませんでした苦笑
コンテンツ前に以下がありますね...
・通知
・アピール
・お勧めカード
・カルセール
・ウィジェットコンテンツ上部
別の方法として考えたのが、ダミーの要素をヘッダーコンテナ直後に追加し
そのcssにpaddingを持たせれば良いのでは？
わいひら reacted
2022年10月1日 18:12
別の方法として考えたのが、ダミーの要素をヘッダーコンテナ直後に追加し
そのcssにpaddingを持たせれば良いのでは？
良いアイディアありがとうございます！
早速、tmp/body-top.phpの添付画像の部分にdiv#header-fixedを暫定的に作って試してみました。
修正箇所はこんな感じです。
https://github.com/xserver-inc/cocoon/commit/88dfbf43799ae9e5f91362da2420f9ce9e14cb3a
結果から言うと、これで動作はうまくいきました。
ただ、切り替えるポジションを越えたあたりで画面に少しチラつきが出てしまいます。
その他に試しで#contentにアピールエリア諸々を配下にして動作確認もしてみました。
これだとチラつきがないように感じます。
ただその代わり、#content・#main・#sidebar等々のスタイルを調整する必要があり、スキンに影響がある可能性があるかも。
まずはチラつきの出ない方法を探ってみます。
Topic starter
2022年10月1日 18:30
早速、tmp/body-top.phpの添付画像の部分にdiv#header-fixedを暫定的に作って試してみました。
固定ヘッダーの時、動的にCSS追加してると同じく、ダミー要素追加と思っていました。
固定であっても、CSSで必要に応じ、表示/非表示にするだけですが。
2022年10月2日 18:20
固定ヘッダーの時、動的にCSS追加してると同じく、ダミー要素追加と思っていました。
固定であっても、CSSで必要に応じ、表示/非表示にするだけですが。
僕が違う意味に捉えているのかもしれません。
ここで言うダミー要素とはどういったものを指すのでしょうか。
Topic starter
2022年10月2日 18:32
ここで言うダミー要素とはどういったものを指すのでしょうか。
わいひらさんの書いたコード中の、div#header-fixedです。
書いたコードphpはヘッダー固定に関わらず、常時出力するのですよね？
2022年10月2日 19:44
やり方としては合ってたんですね。
ブランチへのテスト実装だったので、常時出力をするつもりではないです。うまくいったら動的にしようかと思っていました。ただ、静的HTMLでの実装時点で、チラつきが出たのでどうしたもんかなと思っておりました。
div#header-fixedを動的に出力／削除したからといって改善されるもんなのか。
明日、時間があれば試してみます。
2022年10月3日 19:58
div#header-fixedを動的に出力／削除させてみましたがチラつくのには変わりないみたいですね。
https://github.com/xserver-inc/cocoon/commit/8b58f7abe61f4b13000fd6448a9c5fbd192cd6f2
https://github.com/xserver-inc/cocoon/tree/FixHeader
クロールが閾値を超えるとまずは#contentが表示されてから、急にdiv#header-fixedが現れるので、ちらついたように見えるようです。
アニメーションを使ってみたり、色々試してみましたが今のところうまくいっておらず…。
他に良い方法がないか探ってみます。
2022年10月6日 20:29
とりあえず今回ちらつきはあるものの、多少のちらつきはあってもガクンとならない方がユーザーさんにとっても良いと思いとりあえず修正版を適用しておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
Topic starter
2022年10月6日 21:30
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.0
カテゴリ数：19
タグ数：146
ユーザー数：1
----------------------------------------------
zipダウンロードして確認しました。
tmp/body-top.phpに肝心な <div id="header-fixed"></div>がありません。
Topic starter
2022年10月7日 21:44
●お願い事項
以下のconsole.logを削除願います。
https://github.com/xserver-inc/cocoon/blob/60c3e67514acbb29f48344cc4175f8f8d932bd96/tmp/footer-javascript.php#L146
●確認結果
github見間違えていました。
tmp/footer-javascript.phpに<div id="header-fixed"></div>の追加するようになっていました。
ただ場所が悪く、ヘッダー+ナビメニューとなった後に追加する為、既にヘッダー高さ分、縮んでしまい。
↓↓変化する前だと思います。(---の位置に移動)
function stickyHeader() {
if (!$("#header-container").hasClass("fixed-header")) {
/*トップメニュータイプに変更する*/
---------
$('#header-container').after('<div id="header-fixed"></div>');
/* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる★ */
$("#header-fixed").css({
'padding-top': `${threashold}px`,
});
--------
$("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap");
$("#header-container").addClass("fixed-header");
$("#header-container").css({
'position': 'fixed',
'top': '-100px',
'left': '0',
'width': '100%',
});
わいひら reacted
2022年10月7日 23:34
修正しておきました。
僕の環境ではこの修正でちらつきもなくなりました。
https://github.com/xserver-inc/cocoon
これが原因だったのか。ありがとうございます。
Topic starter
2022年10月8日 00:01
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.0.3
カテゴリ数：19
タグ数：146
ユーザー数：1
----------------------------------------------
対策・改善されている事を確認しました。
本件をクローズします。
わいひら reacted
2022年10月8日 00:05
ご確認・修正案等ご助力いただきありがとうございます！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。