サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年4月24日 10:57
ヘッダー背景画像をスライドショーやフェードで切り替えたいのですが、
以下のjQueryプラグイン等は使えますでしょうか？
2018年4月24日 23:15
しっかりと設置すれば、もちろん使えるかと思います。
ただ確率は低いですが、jQueryプラグインに不具合があったり、相性が悪かったりすると、その限りではありません。
結局のところ、実際に設置してみないと確かなことはわからないです。
トピックスターター 2018年4月25日 18:34
なんとかちょっと、頑張って設定してみます。
トピックスターター 2018年4月26日 15:49
上記の設定は出来ませんでした。
また、別の方法で以下を参考にjQuery「Vegas2」を利用しようと思ったのですが思い通りに行かない感じですね。
https://www.webtoolnavi.com/vegas-background-slideshow/
トピックスターター 2018年4月26日 16:51
2018年4月26日 18:54
jQuery プラグインは興味があるので、 bgswitcher を試してみました。 Cocoon で使えましたよ。一応やり方を記載しておきます。
●ステップ 1 ：プラグインの読み込み●
子テーマフォルダの直下に bgswitcher.js ファイルを新規作成。 bgswitcher.js ファイルに、 bgswitcher.js のコードを追加。
作成した bgswitcher.js ファイルを読み込むために、子テーマの tmp-user/footer-insert.php に下記のコードを追加。
https://gist.github.com/FirstLayout/c9099fb13b68f394b768ae11ed76d515#file-bgswitcher-js
●ステップ 2 ：任意の場所に画像エリアを設置●
main-before.php や body-top.php などの任意のファイルの任意の場所に、 HTML を追加。 HTML は、ご参考にされたサイトに書かれているもので OK 。
●ステップ 3 ： jQuery を追加●
bgswitcher を動かします。子テーマの javascript.js に以下のコードを追加。
https://gist.github.com/FirstLayout/fc8b323e9c34a19ba64ba7740dae0a75
●ステップ 4 ： CSS を追加●
CSS を追加します。これもご参考にされたサイトに書かれているもので OK 。
完成。
わいひら reacted
2018年4月26日 18:58
あれ？ Gist は URL を貼り付けるだけではだめなのか。 script での埋め込みテスト。
https://gist.github.com/FirstLayout/fc8b323e9c34a19ba64ba7740dae0a75.js
2018年4月26日 22:02
僕も、一度試したことがあるのですが、このフォーラムは、GistとかのURL enbedには対応していないようです。
スクリプトで貼り付けると、今度はおそらく攻撃対策のためスクリプトが除外されてしまうようです。
トピックスターター 2018年4月27日 22:29
設定してみたのですが、表示されないんですよね。。。
トピックスターター 2018年4月27日 22:30
あらためて、実施したことを記載します。
●ステップ１
・bgswitcher.js ファイルを作成
・子テーマフォルダの直下に bgswitcher.js ファイルをアップ
・子テーマの tmp-user/footer-insert.php に下記のコードを追加。
https://gist.github.com/FirstLayout/c9099fb13b68f394b768ae11ed76d515#file-bgswitcher-js
トピックスターター 2018年4月27日 22:31
●ステップ１
トピックスターター 2018年4月27日 22:31
●ステップ１
トピックスターター 2018年4月27日 22:32
●ステップ１
トピックスターター 2018年4月27日 22:32
●ステップ１
トピックスターター 2018年4月27日 22:36
●ステップ２
HTML をmain-before.phpに記載。
背景が切り替わります。
と記載。
トピックスターター 2018年4月27日 22:41
●ステップ 3 ： jQuery を追加●
bgswitcher を動かします。子テーマの javascript.js に以下のコードを追加。
https://gist.github.com/FirstLayout/fc8b323e9c34a19ba64ba7740dae0a75
トピックスターター 2018年4月27日 22:44
●ステップ 4 ： CSS を追加●
CSS をCocoon Child: スタイルシート (style.css)に追加。
/*******************************
*bgswitcher
********************************/
.box{
width: 960px;
height: 450px;
position:relative;
}
トピックスターター 2018年4月27日 22:48
表示としては、白い背景しか出てこないんですよね。
どこかに設定している背景色がスライドショー画像より上に来ているんでしょうか。。
2018年4月27日 23:16
div の class 名の box って何だろうと思ったら、ご参考にされていたサイトが 2 つあったんですね。申し訳ないです、見逃していました。
私が参考にしたのは、背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】の方です。
なので、私がやったのとステップ 2 と 4 が違います。これが画像が表示されない原因です。
というのも、ステップ 3 で追加するコードの中に、.bg-slider があります。この .bg-slider は、ステップ 2 で追加する HTML の class 名または id を指定します。
TanTaa reacted
トピックスターター 2018年4月28日 10:15
なるほど、やり直してみます！！
トピックスターター 2018年4月28日 15:34
出来ました！！！（涙）
とても思い通りのものが出来ました！！
あと、ひとつわがままな質問を聞いて頂けたらでいいのですが
このスライドショーですが、固定ページごと（ページIDごと？）に表示するスライドを変えることは出来ないでしょうか？
2018年4月28日 17:58
できますよ。ただ、その前にいくつかヒアリングをします。
●投稿ページやカテゴリー・タグアーカイブページでは、 bgswitcher を設置されるでしょうか？
●フロントページは、固定ページでしょうか？インディックスリストでしょうか？インデックスリストの場合には、 bgswitcher を設置されるでしょうか？
●画像を変えたい固定ページは、いくつぐらいあるでしょうか？（ 1 つの固定ページでのみ画像を変え、その他の固定ページは一緒の画像でいいのか？）
トピックスターター 2018年4月28日 20:09
色々と我儘を聞いて頂いてありがとうございます。
検討している内容を記載させて頂きます。
●使用するページは固定ページで設置となります。
●フロントページは固定ページです。
●ページ数は５ページとなります
各固定ページで変更出来たらと思っています。
・トップ（固定ページ１）（A画像、B画像、C画像）
・固定ページ２（D画像、E画像、F画像）
・固定ページ３（G画像、H画像、I画像）
・・・・という感じです。
構成
----------
・トップ（固定ページ１）
・固定ページ２
・固定ページ３
・固定ページ４ ※サブメニュ
・固定ページ５ ※サブメニュ
----------
2018年4月28日 21:28
情報ありがとうございます。変更箇所は 2 点です。
まず、ステップ 2 で main-before.php に追加したコードを、以下のものに変えます。
https://notepad.pw/share/b2dnce4n
次に、ステップ 3 で javascript.js に追加したコードを、以下のものに変えます。
https://notepad.pw/share/c2ymao30w
やっていることは、各固定ページの bgswitcher のエリアに bg-slider-1 から bg-slider-5 の class 名を付けています。そして、この各 class に対して、 jQuery で画像を個別に指定します。
CSS の変更は必要ありません。
トピックスターター 2018年4月29日 22:37
すごい！ありがとうございます。
早々に対応してみます！！！
トピックスターター 2018年5月3日 09:33
設定した固定ページでは問題なく出来ました！
ありがとうございます。
しかし、設定していない固定ページにテキスト（「テキストを表示するなら書く」）が表示されてしまいます。
各固定ページ
構成
----------
・トップ（固定ページ１） ★
・固定ページ２ ★
・固定ページ３ ★
・固定ページ４ ※サブメニュ ★
・固定ページ５ ※サブメニュ ★
・固定ページ６ ☆
----------
★スライド設定有
☆スライド設定無
このスライド設定無しのページには、設定が反映されないようにするにはどのようにしたら良いでしょうか？
トピックスターター 2018年5月3日 09:34
設定していないページに出ている画面としては、画像を設定していないのでテキストのみが表示されています。
2018年5月3日 12:28
他のページでテキストを表示しないためには、 main-before.php を下記のように変更します。
https://notepad.pw/share/87b8igqq
1 行目に画像を表示したい固定ページの id を入力する条件分岐を追加しています。
トピックスターター 2018年5月3日 20:28
akiraさん
色々とアドバイス頂いてありがとうございます！！
とても参考になり、結果思っている通りの内容になりました。
感謝しております、ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。