サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年5月29日 10:20
初めまして。cocoonを使わせていただいております。ありがとうございます。
やりたいこと：アピールエリアを自作したいです。
アピールエリアのカスタマイズで、フルワイドで好きな画像を背景にしてアニメーションを入れることが出来たら楽しいだろうなと思って始めましたが、完全に分からなくなってしまいました。
具体的なイメージと、自分でやってみたことを以下のURLに画像入りで記載しました。
投稿名『やりたいこと・やってみたこと』の投稿に詳しく書いています。
実際にコードをいじった投稿は投稿名『テスト』です。
やってみたくて色々試行錯誤して頑張りましたが、できていません。
お教えいただけないでしょうか。どうぞよろしくお願いいたします。
2021年5月29日 11:09
前略、食パンさん
出先からなので、あまり詳しく見ていないのと、アニメーションは必要な機会がなかったのでよくわかりませんが、アピールエリアは使わずに、ウィジェットエリアのコンテンツ上部辺りに、カスタムhtmlウィジェットあたりを使ってやる方がやりやすいような気がします。
わいひら reacted
トピックスターター 2021年5月29日 11:33
リフィトリーさん
外出先からのご返信、ありがとうございます！
実は仰っている方法も試してみて、ｈｔｍｌの挿入自体はできたのですが、やはり画像が２つ別々に表示されてしまい、重ねて表示したり動かしたりするCSSを効かすことができませんでした（CSSのコードの記述に問題がある可能性もありますが）。
また、ウィジットエリアのコンテンツ上にすると、フルワイド（画面の幅いっぱい）にはできなかったです。
CSS,htmlのコードの修正内容も https://trotro.site に記載しているので、また気が向いたら見ていただいてご意見いただければ嬉しいです。
どうぞよろしくお願いいたします。
＠食パン
2021年5月29日 14:49
食パンさん
ウィジェットエリアの「コンテンツ上部」に「カスタムHTML」を入れました。
「カスタムHTML」ウィジェットには以下を記述しました。
<div class="anime-box"> <figure class="sky-and-cloud"><img src="http://demo01.local/wp-content/uploads/2021/05/plain-bread.png" alt=""></figure> </div>
わいひら reacted
2021年5月29日 14:52
食パンさん
子テーマのstyle.cssには、以下を記述しました。
#content-top {/*上方向の隙間を無くす*/
margin: 0;
}
#content-top-in {/*画面幅いっぱいに広げる*/
width: auto;
}
.anime-box {
height: 43vw;
background-image: url( http://demo01.local/wp-content/uploads/2021/05/sky-and-cloud.jpg );
background-position: top center;
background-size: cover;
position: relative;
}
/*画像を背景に重ねて動きをつける*/
.sky-and-cloud {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 20%;
animation: shokupan 4s ease infinite;
}
@media screen and (max-width: 834px){
.sky-and-cloud {
width: 80px;
height: 80px;
}
}
@keyframes shokupan {
0% { transform:translateY(0) }
5% { transform:translateY(-10px) }
10% { transform:translateY(-15px) }
15% { transform:translateY(-20px) }
20% { transform:translateY(-30px) }
25% { transform:translateY(-35px) }
30% { transform:translateY(-40px) }
35% { transform:translateY(-45px) }
40% { transform:translateY(-50px) }
45% { transform:translateY(-45px) }
50% { transform:translateY(-40px) }
60% { transform:translateY(-35px) }
70% { transform:translateY(-30px) }
80% { transform:translateY(-20px) }
90% { transform:translateY(-15px) }
100% { transform:translateY(-0px) }
}
この投稿は4年前ずつリフィトリーに変更されました
わいひら reacted
2021年5月29日 14:56
食パンさん
あ、そうそう、食パンの画像ですが、なぜか背景が透明になっていなくて、Photoshopで、透明にして保存し直しました。
2021年5月29日 16:01
投稿名『やりたいこと・やってみたこと』の投稿に詳しく書いています。
実際にコードをいじった投稿は投稿名『テスト』です。
まだじっくり記事を読めていないのですが、できれば記事に書いた内容をこちらのトピックにも書いていただいたほうが助かります。
今このトピックを読んでいる人は詳細を書いた記事を読めますが、後日検索で来た人は記事が読めない状態になっている可能性があります。
食パンさんと同じことをやりたくて検索からこのトピックにたどり着いても、記事が読めない状態だとこのトピック自体が役に立たなくなってしまうため、記事のコピペで大丈夫ですのでお願いいたします。
わいひら reacted
トピックスターター 2021年5月29日 16:25
リフィトリーさん
すごい！すごい！もう、びっくりしました。本当に感動しました。
何とか同じ事ができました⇒ https://trotro.site
初心者のアイデアを褒めていただけたことも、ものすごく嬉しいです。（頑張って良かった・・・）
ご厚意に甘えて、何点か質問させてもらっていいでしょうか？
①全てのページに画像が表示されてしまうのですが、トップページのみの表示にすることは可能でしょうか？
②"#content-top"というCSSを知らなかったので調べてみましたが、よく分かりませんでした。これは、bodyの一番上にある要素（今回はウイジット）、ということですか？
③同じく”height:43vw"も調べてみました。画面の幅を１００として、その43に当たるサイズのようでした。これを画面の高さを100％としてその43％の高さに指定する（PCでもスマホでも）という理解で合っているでしょうか？
お時間が有るときで構いません。何度も恐縮ですが、どうぞよろしくお願いいたします。
追記：食パンの画像の背景が透明になっていなかったんですね。Photoshopとか持っていなくて、パワポで背景削除をしてpng形式にして図を保存しているので、うまくできていなかったのかもしれません。お手数をおかけして、ごめんなさい。
トピックスターター 2021年5月29日 16:41
さる子さん
こんにちは。
私の文章と画像があまりに多かったので、サイトに色々書いてそのURLを貼っていましたが、そうですよね、そのURLが後日に見られなくなる可能性がありますよね。
うっかりしていました。ごめんなさい。
今回の件については、URLの記事（私がやってみて結局失敗したことや画面のコピーや間違ったコードが延々と書かれていて、見にくいだけなのですが）を見なくても、リフィトリーさんの返信に全ての解答と私がやりたかったこと、その方法が書かれています。
今、リフィトリーさんに追加で質問のお願いをしているので、画面がごちゃごちゃにならないように、最後にURLの記事の内容を貼りますね（すごく長いので・・・）
ご指摘、ありがとうございました。＠食パン
さる子 reacted
2021年5月29日 17:27
食パン さん
①全てのページに画像が表示されてしまうのですが、トップページのみの表示にすることは可能でしょうか？
カスタムHTMLウィジェットの表示設定を「チェック・入力したページのみ表示」に切り替えて、「トップページのみ」にチェックを入れて保存すれば良いような気がします。
②"#content-top"というCSSを知らなかったので調べてみましたが、よく分かりませんでした。これは、bodyの一番上にある要素（今回はウイジット）、ということですか？
これは、ブラウザのデベロッパーツールの使い方に慣れてくると、誰でも簡単に、セレクタにするタグやclass名やID名を探し出すことができるようになります。
私はFirefoxがメインですが、わいひらさんが Chrome での使い方を記事にされていらっしゃいますので、お読みになってみてください。
今回は、ウィジェットが入っている親のコンテナという感じでしょうか。
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック
https://wp-cocoon.com/community/postid/31048/
③同じく”height:43vw"も調べてみました。画面の幅を１００として、その43に当たるサイズのようでした。これを画面の高さを100％としてその43％の高さに指定する（PCでもスマホでも）という理解で合っているでしょうか？
おそらく、その通りなのだろうと思います。
この投稿は4年前ずつリフィトリーに変更されました
トピックスターター 2021年5月29日 18:02
リフィトリーさん
仰っている通りにすると、トップページだけの表示にすることができました。
おかげでイメージしていた形にできました。本当にありがとうございました！
教えていただいたサイトもまだちらっとしか見れていませんが、CSSを使ってカスタマイズする上でとても参考になりそうですね。今回の件でCSSの楽しさに目覚めてしまったので、じっくり読んでデベロッパーツールを勉強したいと思います。
細かい質問にもお答えいただいて、ありがとうございました。
またこのフォーラムで質問することもあるかと思いますが、今後ともどうぞよろしくお願いいたします。
食パン
さる子 reacted
トピックスターター 2021年5月29日 18:17
トピック追記：
(以下、トピックの一番最初のコメントにある、『やりたいこと・やってみたこと』の投稿の内容です）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
やりたいこと：アピールエリアを自作したいです。
自作したいアピールエリアのイメージ
アピールエリアにフルワイドでアニメーションが入った画像を入れたいです。
画像は、無料のイラストを２つ組み合わせたものです。
背景の画像と、食パンの画像をcssで重ねて、食パンの画像がふわふわ動くようにｃｓｓで動きをつけています。
ファイルの状態
デスクトップにあるファイルの状態です。
ｈｔｍｌ、ｃｓｓ、画像の入ったフォルダに分けています。
トピックスターター 2021年5月29日 18:20
ビジュアルエディターで画像を２つ挿入してから、コードエディターにして、自分の作ったｈｔｍｌと同じようなコードになるように（画像が１つのブロックに入っていれば、ｃｓｓで重ねることができるのではないかと考えたため画像のコードの位置が連続になるように）編集してみました。
以下、コードエディターで編集した内容です。
<!– wp:columns –>
<div class=”wp-block-columns”><!– wp:column –>
<div class=”wp-block-column”><!– wp:image {“id”:18,”width”:853,”height”:367,”sizeSlug”:”large”,”linkDestination”:”none”} –>
<figure class=”wp-block-image size-large is-resized”><img src=” 
” alt=”” class=”wp-image-18″ width=”853″ height=”367″/></figure>☆画像を並べたほうがいいかと考えたので、ここに赤マーカーの箇所を移動させましたが、保存すると元の状態にもどります。
<!– /wp:image –></div>
<!– /wp:column –>
<!– wp:column –>
<div class=”wp-block-column”><!– wp:image {“id”:19,”sizeSlug”:”large”,”linkDestination”:”none”,”className”:”shokupan”} –>
<figure class=”wp-block-image size-large shokupan“><img src=” 
” alt=”” class=”wp-image-19″/></figure>
<!– /wp:image –></div>
<!– /wp:column –></div>
<!– /wp:columns –>
☆後でｃｓｓでいじりたい画像に固有の名前を付けたほうがいいかと考え、クラス名に”shokupan”と追記しました。
ビジュアルエディターでは一見、成功したかのように見えましたが、プレビューすると出来ていませんでした。
トピックスターター 2021年5月29日 18:21
その後、『外観』⇒『テーマの編集』から子テーマのｃｓｓの編集を行いました。
食パンの画像に対する記述を入力しました。
以下、追加したｃｓｓのコードですが、そもそも画像のクラスの記述がこれでいいのか？というのも自信がありません。
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*画像を背景に重ねて動きをつける*/
.wp-block-image size-large shokupan
{
width: 30px;
height: 30px;
margin: 50px;
position: absolute;
top: 5%;
left: 20%;
animation: shokupan 4s ease infinite;
}
@keyframes shokupan {
0% { transform:translateY(0) }
5% { transform:translateY(-10px) }
10% { transform:translateY(-15px) }
15% { transform:translateY(-20px) }
20% { transform:translateY(-30px) }
25% { transform:translateY(-35px) }
30% { transform:translateY(-40px) }
35% { transform:translateY(-45px) }
40% { transform:translateY(-50px) }
45% { transform:translateY(-45px) }
50% { transform:translateY(-40px) }
60% { transform:translateY(-35px) }
70% { transform:translateY(-30px) }
80% { transform:translateY(-20px) }
90% { transform:translateY(-15px) }
100% { transform:translateY(-0px) }
}
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。