サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年5月15日 21:01
一般ブロックに画像を指定し、その画像の上にテキストを表示させようと試行錯誤しています。
https://sugishimadentaloffice.jp/test/
HTMLで画像を指定し、<P>要素として表示させたいテキストを記載しました。その後、外観のテーマエディターにて、コピーアンドペーストでCSSを追記（/*top画像のテキスト*/）しました。
貼り付けた直後はCSSが反映され、画像の上にテキストが表示されるのですが、表示位置を調整しようとCSSをちょっとでも直すと、現在のページのようにテキストが画像の上ではなく、画像に回り込むように表示されてしまいます。
どこが問題なのか、何か解決法があれば教えていただけると助かります
2020年5月16日 00:47
- 最初、そのtipsを見つけてやってみたのですが、画像が全体的に暗くなってしまうのです。
まるで、画像の上にテキストのレイヤーがあり、そのレイヤーの背景色が淡いグレー色のような感じなのです。
2020年5月16日 19:30
チャンピア様へ
カバーというブロックのテキストの下にはbackground-colorが指定してあり、これをbackground-color:noneとすることができるのでしょうか？
もし、可能であればcssを教えていただけませんでしょうか？
2020年5月16日 20:33
CSSを見るためにも、こちらのページにカバーブロックを出力させておいていただけますでしょうか。
https://sugishimadentaloffice.jp/test/
2020年5月16日 21:35
明日にでもできるだけ早急に作りたいと思います
しばらくお待ちください
2020年5月17日 10:14
まるで、画像の上にテキストのレイヤーがあり、そのレイヤーの背景色が淡いグレー色のような感じなのです。
以下でカバーの背景画像に使われている背景色は消えました。
.wp-block-cover, .wp-block-cover-image {
background-color: transparent;
}
レイヤーのような処置が使われているのは、画像に表示する文字列を読みやすくするためだと思います。背景色を打ち消すことによって画像によっては文字が読みづらくなると思います。
わいひら reacted
2020年5月17日 10:58
Akira様へ
CotEditorというコードエディター（当方の環境はMacOS 10.15.4です）で修正し、貼り付けたところ、CSSの内容が反映されるようになりました。
ありがとうございました。
2020年5月17日 11:05
チャンビア様へ
カバーで作り、
.wp-block-cover, .wp-block-cover-image {
background-color: transparent;
}
をテーマエディターで追記してみたのですが、こちらでは反映されないのです。
https://sugishimadentaloffice.jp/test/
（現在はCSSは適用させていません）
クラス名が違うのでしょうか？
ちなみにテキストの位置などを調整する場合、クラス名は
.wp-block-text
で良いのでしょうか？
2020年5月17日 12:06
テストサイトを見たところ、クラス名が多少違うみたいですね。
.wp-block-cover.has-background-dim
開発コンソールを使うと、ご自身で場所を特定できるかと思います。開発コンソールは主要なブラウザのほとんどに備わっています。使いやすいのはChromeやFirefoxなど。
開発コンソール上で試験的にCSSを追加できるので、そこで動作確認した上でワードプレスを操作するとよいかと思います。
わいひら reacted
2020年5月17日 19:55
チャンビアさんが既に書かれていることですが、このコードだといかがでしょうか？
.wp-block-cover.has-background-dim {
background-color: transparent;
}
チャンビア? reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。