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カスタマイズ依頼

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

ヘッダー背景画像をスライドショーやフェ...
 
共有:
通知
すべてクリア

[解決済] ヘッダー背景画像をスライドショーやフェードで切り替えたい

30 投稿
3 ユーザー
5 Reactions
11.9 K 表示
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

ヘッダー背景画像をスライドショーやフェードで切り替えたいのですが、
以下のjQueryプラグイン等は使えますでしょうか?

http://fit-jp.com/bgswitcher/


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

しっかりと設置すれば、もちろん使えるかと思います。

ただ確率は低いですが、jQueryプラグインに不具合があったり、相性が悪かったりすると、その限りではありません。

結局のところ、実際に設置してみないと確かなことはわからないです。


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

なんとかちょっと、頑張って設定してみます。

 

 


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

上記の設定は出来ませんでした。

 

また、別の方法で以下を参考にjQuery「Vegas2」を利用しようと思ったのですが思い通りに行かない感じですね。

https://www.webtoolnavi.com/vegas-background-slideshow/

 

 

 

 


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

どちらかというと、bgswitcherの方が設定しやすいのかもと思ってやってみましたが、出来ない感じでした。

 

http://techmemo.biz/javascript/bgswitcher/


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

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
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

あれ? Gist は URL を貼り付けるだけではだめなのか。 script での埋め込みテスト。

https://gist.github.com/FirstLayout/fc8b323e9c34a19ba64ba7740dae0a75.js


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

僕も、一度試したことがあるのですが、このフォーラムは、GistとかのURL enbedには対応していないようです。
スクリプトで貼り付けると、今度はおそらく攻撃対策のためスクリプトが除外されてしまうようです。


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

Akiraさん、ありがとうございます。

試してみます!!


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

設定してみたのですが、表示されないんですよね。。。


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

あらためて、実施したことを記載します。

 

●ステップ1

・bgswitcher.js ファイルを作成

・子テーマフォルダの直下に bgswitcher.js ファイルをアップ

・子テーマの tmp-user/footer-insert.php に下記のコードを追加。

https://gist.github.com/FirstLayout/c9099fb13b68f394b768ae11ed76d515#file-bgswitcher-js


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ1


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ1


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ1


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ1


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ2

HTML をmain-before.phpに記載。

背景が切り替わります。

と記載。


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ 3 : jQuery を追加●

bgswitcher を動かします。子テーマの javascript.js に以下のコードを追加。

https://gist.github.com/FirstLayout/fc8b323e9c34a19ba64ba7740dae0a75


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

●ステップ 4 : CSS を追加●

CSS をCocoon Child: スタイルシート (style.css)に追加。

/*******************************
*bgswitcher
********************************/

.box{
width: 960px;
height: 450px;
position:relative;
}


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

表示としては、白い背景しか出てこないんですよね。

どこかに設定している背景色がスライドショー画像より上に来ているんでしょうか。。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

div の class 名の box って何だろうと思ったら、ご参考にされていたサイトが 2 つあったんですね。申し訳ないです、見逃していました。

私が参考にしたのは、背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】の方です。

なので、私がやったのとステップ 2 と 4 が違います。これが画像が表示されない原因です。

というのも、ステップ 3 で追加するコードの中に、.bg-slider があります。この .bg-slider は、ステップ 2 で追加する HTML の class 名または id を指定します。


   
TanTaa reacted
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

なるほど、やり直してみます!!


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

出来ました!!!(涙)

とても思い通りのものが出来ました!!

 

あと、ひとつわがままな質問を聞いて頂けたらでいいのですが

このスライドショーですが、固定ページごと(ページIDごと?)に表示するスライドを変えることは出来ないでしょうか?


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

できますよ。ただ、その前にいくつかヒアリングをします。

●投稿ページやカテゴリー・タグアーカイブページでは、 bgswitcher を設置されるでしょうか?

●フロントページは、固定ページでしょうか?インディックスリストでしょうか?インデックスリストの場合には、 bgswitcher を設置されるでしょうか?

●画像を変えたい固定ページは、いくつぐらいあるでしょうか?( 1 つの固定ページでのみ画像を変え、その他の固定ページは一緒の画像でいいのか?)


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

色々と我儘を聞いて頂いてありがとうございます。

 

検討している内容を記載させて頂きます。

●使用するページは固定ページで設置となります。

●フロントページは固定ページです。

●ページ数は5ページとなります

   各固定ページで変更出来たらと思っています。

 ・トップ(固定ページ1)(A画像、B画像、C画像)

 ・固定ページ2(D画像、E画像、F画像)

 ・固定ページ3(G画像、H画像、I画像)

・・・・という感じです。

 

構成

----------

・トップ(固定ページ1)
・固定ページ2
・固定ページ3
 ・固定ページ4 ※サブメニュ
 ・固定ページ5 ※サブメニュ

----------

 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

情報ありがとうございます。変更箇所は 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 の変更は必要ありません。


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

すごい!ありがとうございます。

 

早々に対応してみます!!!


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

設定した固定ページでは問題なく出来ました!

ありがとうございます。

しかし、設定していない固定ページにテキスト(「テキストを表示するなら書く」)が表示されてしまいます。

 

 

各固定ページ

構成

----------

・トップ(固定ページ1) ★
・固定ページ2 ★
・固定ページ3 ★
 ・固定ページ4 ※サブメニュ ★
 ・固定ページ5 ※サブメニュ ★

・固定ページ6 ☆

----------

★スライド設定有 

☆スライド設定無

 

このスライド設定無しのページには、設定が反映されないようにするにはどのようにしたら良いでしょうか?

 

 

 

 


   
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

設定していないページに出ている画面としては、画像を設定していないのでテキストのみが表示されています。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

他のページでテキストを表示しないためには、  main-before.php を下記のように変更します。

https://notepad.pw/share/87b8igqq

1 行目に画像を表示したい固定ページの id を入力する条件分岐を追加しています。

 


   
わいひら and TanTaa reacted
 hana
(@hana)
Estimable Member Registered
結合: 7年前
投稿: 140
Topic starter  

akiraさん

色々とアドバイス頂いてありがとうございます!!

とても参考になり、結果思っている通りの内容になりました。

感謝しております、ありがとうございました。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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