現在「イノセンス」スキンを適用中です。

アピールエリアのカスタマイズについて | CSSカスタマイズ相談 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
アピールエリアのカスタマイズについて
 
共有:
通知
すべてクリア

[解決済] アピールエリアのカスタマイズについて


食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

初めまして。cocoonを使わせていただいております。ありがとうございます。

やりたいこと:アピールエリアを自作したいです。

アピールエリアのカスタマイズで、フルワイドで好きな画像を背景にしてアニメーションを入れることが出来たら楽しいだろうなと思って始めましたが、完全に分からなくなってしまいました。

具体的なイメージと、自分でやってみたことを以下のURLに画像入りで記載しました。

投稿名『やりたいこと・やってみたこと』の投稿に詳しく書いています。

実際にコードをいじった投稿は投稿名『テスト』です。

https://trotro.site

やってみたくて色々試行錯誤して頑張りましたが、できていません。

お教えいただけないでしょうか。どうぞよろしくお願いいたします。


未解決
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

前略、食パンさん

出先からなので、あまり詳しく見ていないのと、アニメーションは必要な機会がなかったのでよくわかりませんが、アピールエリアは使わずに、ウィジェットエリアのコンテンツ上部辺りに、カスタムhtmlウィジェットあたりを使ってやる方がやりやすいような気がします。


わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

リフィトリーさん

外出先からのご返信、ありがとうございます!

実は仰っている方法も試してみて、htmlの挿入自体はできたのですが、やはり画像が2つ別々に表示されてしまい、重ねて表示したり動かしたりするCSSを効かすことができませんでした(CSSのコードの記述に問題がある可能性もありますが)。

また、ウィジットエリアのコンテンツ上にすると、フルワイド(画面の幅いっぱい)にはできなかったです。

CSS,htmlのコードの修正内容も https://trotro.site に記載しているので、また気が向いたら見ていただいてご意見いただければ嬉しいです。

どうぞよろしくお願いいたします。

@食パン


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パンさん

なんだか、ほのぼのとして、いいですね。

今のご時世、こういった ほのぼのとしたアイデアは、なかなか出てこないです。

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パンさん

ウィジェットエリアの「コンテンツ上部」に「カスタム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>

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パンさん

子テーマの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) }
}
This post was modified 4週間前 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パンさん

おおらかさが滲み出ていますね。

私のサイトで採用させていただきたいぐらいです。

This post was modified 4週間前 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パンさん

あ、そうそう、食パンの画像ですが、なぜか背景が透明になっていなくて、Photoshopで、透明にして保存し直しました。


さる子
(@saruko)
メンバーサイト Moderator
結合: 1年前
投稿: 246
さる子 - Twitter
 

投稿名『やりたいこと・やってみたこと』の投稿に詳しく書いています。

実際にコードをいじった投稿は投稿名『テスト』です。

まだじっくり記事を読めていないのですが、できれば記事に書いた内容をこちらのトピックにも書いていただいたほうが助かります。

今このトピックを読んでいる人は詳細を書いた記事を読めますが、後日検索で来た人は記事が読めない状態になっている可能性があります。

食パンさんと同じことをやりたくて検索からこのトピックにたどり着いても、記事が読めない状態だとこのトピック自体が役に立たなくなってしまうため、記事のコピペで大丈夫ですのでお願いいたします。


わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

リフィトリーさん

すごい!すごい!もう、びっくりしました。本当に感動しました。

何とか同じ事ができました⇒  https://trotro.site  

初心者のアイデアを褒めていただけたことも、ものすごく嬉しいです。(頑張って良かった・・・)

ご厚意に甘えて、何点か質問させてもらっていいでしょうか?

①全てのページに画像が表示されてしまうのですが、トップページのみの表示にすることは可能でしょうか?

②"#content-top"というCSSを知らなかったので調べてみましたが、よく分かりませんでした。これは、bodyの一番上にある要素(今回はウイジット)、ということですか?

③同じく”height:43vw"も調べてみました。画面の幅を100として、その43に当たるサイズのようでした。これを画面の高さを100%としてその43%の高さに指定する(PCでもスマホでも)という理解で合っているでしょうか?

お時間が有るときで構いません。何度も恐縮ですが、どうぞよろしくお願いいたします。

 

追記:食パンの画像の背景が透明になっていなかったんですね。Photoshopとか持っていなくて、パワポで背景削除をしてpng形式にして図を保存しているので、うまくできていなかったのかもしれません。お手数をおかけして、ごめんなさい。

 


食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

さる子さん

こんにちは。

私の文章と画像があまりに多かったので、サイトに色々書いてそのURLを貼っていましたが、そうですよね、そのURLが後日に見られなくなる可能性がありますよね。

うっかりしていました。ごめんなさい。

今回の件については、URLの記事(私がやってみて結局失敗したことや画面のコピーや間違ったコードが延々と書かれていて、見にくいだけなのですが)を見なくても、リフィトリーさんの返信に全ての解答と私がやりたかったこと、その方法が書かれています。

今、リフィトリーさんに追加で質問のお願いをしているので、画面がごちゃごちゃにならないように、最後にURLの記事の内容を貼りますね(すごく長いので・・・)

ご指摘、ありがとうございました。@食パン


さる子 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パン さん

①全てのページに画像が表示されてしまうのですが、トップページのみの表示にすることは可能でしょうか?

カスタム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"も調べてみました。画面の幅を100として、その43に当たるサイズのようでした。これを画面の高さを100%としてその43%の高さに指定する(PCでもスマホでも)という理解で合っているでしょうか?

おそらく、その通りなのだろうと思います。

This post was modified 3週間前 by リフィトリー

さる子わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

リフィトリーさん

仰っている通りにすると、トップページだけの表示にすることができました。

おかげでイメージしていた形にできました。本当にありがとうございました!

教えていただいたサイトもまだちらっとしか見れていませんが、CSSを使ってカスタマイズする上でとても参考になりそうですね。今回の件でCSSの楽しさに目覚めてしまったので、じっくり読んでデベロッパーツールを勉強したいと思います。

細かい質問にもお答えいただいて、ありがとうございました。

またこのフォーラムで質問することもあるかと思いますが、今後ともどうぞよろしくお願いいたします。

食パン


さる子 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

トピック追記:

(以下、トピックの一番最初のコメントにある、『やりたいこと・やってみたこと』の投稿の内容です)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

やりたいこと:アピールエリアを自作したいです。

自作したいアピールエリアのイメージ

アピールエリアにフルワイドでアニメーションが入った画像を入れたいです。
画像は、無料のイラストを2つ組み合わせたものです。
背景の画像と、食パンの画像をcssで重ねて、食パンの画像がふわふわ動くようにcssで動きをつけています。

ファイルの状態

デスクトップにあるファイルの状態です。
html、css、画像の入ったフォルダに分けています。

 


さる子わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

やってみたこと

①まず、アピールエリアのコードの場所を探しました。
自分のhtmlファイルと同じコードをこの場所に入れて、子テーマのcss編集画面で該当の画像のcss(背景画像に対するポジションとアニメーションの動き)を追加したら、可能なのではないかと思ったのですが、そもそもアピールエリアのコードをどこから編集できるのか分かりませんでした。

アピールエリアのコードの場所が分からなかったので、投稿ページならできるのか試してみました。
(下の図で固定ページと書いていますが、投稿の間違いです。すいません)


さる子わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

ビジュアルエディターで画像を2つ挿入してから、コードエディターにして、自分の作ったhtmlと同じようなコードになるように(画像が1つのブロックに入っていれば、cssで重ねることができるのではないかと考えたため画像のコードの位置が連続になるように)編集してみました。

以下、コードエディターで編集した内容です。

<!– 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 –>

☆後でcssでいじりたい画像に固有の名前を付けたほうがいいかと考え、クラス名に”shokupan”と追記しました。

ビジュアルエディターでは一見、成功したかのように見えましたが、プレビューすると出来ていませんでした。


さる子わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

その後、『外観』⇒『テーマの編集』から子テーマのcssの編集を行いました。
食パンの画像に対する記述を入力しました。

以下、追加したcssのコードですが、そもそも画像のクラスの記述がこれでいいのか?というのも自信がありません。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*画像を背景に重ねて動きをつける*/
.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) }
}


さる子わいひら 件のいいね!
食パン
 食パン
(@食パン)
ゲスト
結合: 4週間前
投稿: 11
Topic starter  

(トピック追記 終了)

見づらくて申し訳ないです。私の書いているコードは間違っているので、私と同じようにトップページに動きのある画像を入れたい方は、リフィトリーさんの書かれている内容を参考にしてください。

今回のカスタマイズ内容:トップページの上部に2つの画像(背景画像・食パンの画像)を重ねて表示し、食パンにふわふわした動きを付ける。

以上です。ありがとうございました。

食パン


さる子, わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
 

食パンさん

フォーラムに転記くださり、ありがとうございます!


さる子わいひら 件のいいね!
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年10ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年8ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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