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

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

ヘッダーのロゴ画像が透過しても枠が付い...
 
共有:
通知
すべてクリア

[解決済] ヘッダーのロゴ画像が透過しても枠が付いた状態で表示されます

9 投稿
3 ユーザー
7 Reactions
4,184 表示
(@morino)
New Member Registered
結合: 4年前
投稿: 3
トピックスターター  

はじめまして、こんにちは。

ワードプレス初心者故、初歩的な質問で大変お恥ずかしいのですが

ヘッダーにブログタイトルロゴを画像で作成し、透過処理をしたものをアップロードしたのですが

ブログを確認すると、画像のように白い枠が出てしまいます。

(PCでもスマホでも同じ白い枠が出てしまいます)

ちなみにタイトルロゴはペイントで作成後、webで透過してくれるサービスを使って

透過処理をしております。

ご助言いただけますと幸いです。よろしくお願い致します。

 

【サイトURL】

https://copy-fx.com/

 

【環境情報】

----------------------------------------------
サイト名:モリノ記
サイトURL: https://copy-fx.com/wp
ホームURL: https://copy-fx.com
コンテンツURL:/wp/wp-content
インクルードURL:/wp/wp-includes/
テンプレートURL:/wp/wp-content/themes/cocoon-master
スタイルシートURL:/wp/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp/wp-content/themes/cocoon-child-master/style.css
スキン:/wp/wp-content/themes/cocoon-master/skins/skin-mixgreen/style.css
WordPressバージョン:5.7.1
PHPバージョン:7.3.13
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.8.7
カテゴリ数:3
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1347バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp/wp-content/uploads/2019/07/mori.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.9
Category Order and Taxonomy Terms Order 1.5.7.5
Contact Form 7 5.4
Edit Author Slug 1.8.1
EWWW Image Optimizer 6.1.1
Jetpack by WordPress.com 9.6.1
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.5.2
WebSub/PubSubHubbub 3.0.3
Wordfence Security 7.5.2
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
----------------------------------------------


   
トピックタグ
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

morinoさん

ご自身で子テーマにお書きになった、以下が原因かと思います。

img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

時間がありませんので、これにて席を外します。


   
わいひら and morino reacted
(@morino)
New Member
結合: 4年前
投稿: 1
 

@mk2_mk2さま

お返事が大変遅くなり申し訳ございません。(作業中にcocoonの更新作業に手間取ってしまって、ようやく直りました;;)

自分でこの文言を追加した記憶がなかったのですが、これが原因だったのですね。

今確認したらこの文言がなくなってて、無事にタイトルロゴがきちんと表示されていることが確認できました。遅い時間に早急にお返事いただきまして感謝申し上げます。

問題解決しました。貴重なお時間を頂き、本当にありがとうございます。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

morinoさん

先程は時間がなく、淡白なお答えをしていました。

解決したとのことで、良かったです。

あの後、拝見しに伺ったら、真っ白になっていて焦りました。

無事復活なさったようで、良かったです。

今回のコードを消したことで、他のすべての画像の縁取りも消えてしまったかと思いますので、そこもちょっと心配はしていました。


   
(@morino)
New Member Registered
結合: 4年前
投稿: 3
トピックスターター  

@mk2_mk2さま

ご丁寧にお返事を頂き、ありがとうございます。

いえいえ!端的に教えて下さったので本当に助かりました!(CSSいじる場所が分からなかったので調べてcocoon更新したらサイト消えました笑)

他の画像の縁取りもなくなってしまうとのことでしたが、ブログタイトルには縁取りをしないで、記事中の画像のみ縁取りを付ける方法はあるのでしょうか・・・。

調べたところ、cocoon設定→「画像」→「画像の囲み効果」を選択するとたぶんまたブログタイトルの画像にも枠線が付いてしまう気がしてためらっております

初歩的な質問をしてしまい大変申し訳ありません。

もし気が向いたらでかまいませんのでご教示頂けたら幸いです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

morinoさん

投稿者:: @morino

cocoon設定→「画像」→「画像の囲み効果」を選択するとたぶんまたブログタイトルの画像にも枠線が付いてしまう気がしてためらっております

は、私はやったことがないので、何とも言えないトコロです。

試してみるのが1番ではあります。
例え枠線がついても、ヘッダー部分だけを外すというは、おそらくCSSで出来るのではないかと思います。

その部分を見せていただければ、考えてはみます。

そういう意味では、前回ご質問いただいた書き方でも、ヘッダーだけ外すということができたかと思います。
時間がなかったためとはいえ、淡泊だったなと後悔している部分があります。


   
morino reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

morinoさん

ヘッダーロゴ、やってみましたが大丈夫なような気がします。

但し、全てのパターンを試した訳でもないですし、やはりmorinoさんにお試しいただくのが1番かと思います。


   
morino reacted
(@morino)
New Member Registered
結合: 4年前
投稿: 3
トピックスターター  

@mk2_mk2さま

 

お返事ありがとうございます。

まず試してからお返事するべきでしたm(__)m

今ほど「cocoon設定」→「画像」→「薄い太線」を試しに選択して更新してみましたが、ブログタイトル画像には反映されませんでした。(他シャドーなども試してみましたが、ブログタイトル画像には影響なかったです)

全然淡泊でないので、お気になさらないでください。

お知恵をお貸し頂き、感謝申し上げます。

そもそも、なぜ子テーマにあのCSSが追加されていたのか分からなかったので・・・。(かなり前にブログを作成し、その後放置してしまって今また再度頑張ろうとしているところなので、おそらく以前調べたときにどなたかのブログなどに書いてあったものをそのままコピペした可能性があります)

またお力を頂戴するかもしれません、その際はまたぜひよろしくお願い申し上げます。

 

※2個目のお返事を拝見する前に書いた文章でお話が前後してしまってます。申し訳ありません。

試してくださってありがとうございます。お優しい・・・!いろいろなサイトを調べてCSSを追加したりして急にサイトが真っ白→テーマが壊れる→やり直すみたいなことを繰り返しているので、バックアップを取りつつ慎重に作成を進めたいと思います。本当にありがとうございます!

この投稿は4年前ずつmorinoに変更されました

   
mk2 reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

morinoさん

ご希望通りにできたようで、良かったです。

自分が分かっていない時は、自分でも何をやっているか分からない時があります。

私も、WordPressを始めた頃に、2度WordPress自体のインストールをやり直しました。
自分で何を修正したのか、そしてどうすれば戻るのか分からなくなりましたから。

今でも、自分で何をやったか分からなくなる時があります。。。

はい、また何かありましたら。
他の回答者の方もお時間ある時にご回答くださると思います。


   
morino reacted
共有:

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

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

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

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

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

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

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

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