特典機能について

ヘッダーのロゴ画像が透過しても枠が付いた状態で表示されます | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

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

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


morino
(@morino)
New Member
結合: 8か月前
投稿: 3
Topic starter  

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

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

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

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

(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)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

morinoさん

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

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

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


わいひらmorino 件のいいね!
morino
 morino
(@morino)
ゲスト
結合: 8か月前
投稿: 1
 

@mk2_mk2さま

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

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

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

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


わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

morinoさん

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

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

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

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

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


morino
(@morino)
New Member
結合: 8か月前
投稿: 3
Topic starter  

@mk2_mk2さま

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

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

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

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

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

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


mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

morinoさん

投稿者:: @morino

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

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

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

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

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


morino 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

morinoさん

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

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


morino 件のいいね!
morino
(@morino)
New Member
結合: 8か月前
投稿: 3
Topic starter  

@mk2_mk2さま

 

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

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

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

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

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

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

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

 

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

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

This post was modified 8か月前 by morino

mk2 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

morinoさん

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

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

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

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

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


morino 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:3年

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

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:3年

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

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

サービス運営期間:18年

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

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

サービス運営期間:5年

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

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

サービス運営期間:5年

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