web

WordPressのヘッダーロゴ画像の背景が透過されない問題

ずっと懸案だったヘッダーロゴ画像の背景が透過されない問題が
ついに解消たので、その対処法についてログにしました。

PNG形式でロゴ画像をアップロードしたのに

Photoshopで作った画像は、背景を透過するためにping形式でアップロードしたのに
くっきり白い背景の画像のまま。

ぼやけるのもさることながら、いかにも画像をロゴにしました感が漂って
どうにも不格好。

お世話になってるTCDさんの「TCD MUSEAM」のサイトにいって、
同じMAGのよそ様のサイトを見ても、きれいに透過されてる。


どうされてるのかと思って、拡張機能 View Image Info (properties) を使って覗かせていただいたところ、
PNG形式です。

かたや私はというと
あれ?
なんでJPEG?!
PNG形式のロゴ画像をアップロードしたのに?!
いつのまにJPEGになっちゃたんだろう?

これじゃあ、ロゴ背景が白くなっちゃうわけだ・・・

原因はプラグイン

いろいろ調べた結果・・・

原因はプラグイン「Imsanity」でした。

普段お世話になってるImsanityだけど、どうもロゴ画像のアップロードは
相性が悪いようです。
ロゴのアップロードのときだけお休みいただいて、
PNGでアップロードし直したら、
透過されました!

解像度を上げるために、今回ロゴ画像を作り直したので、
表示をすこーし編集してみました。

ロゴ画像を幅960px高さ130pxで作成したので、
表示は半分の幅480px高さ65pxでおさめてね♪という記述です。

まとめ

ヘッダーにロゴ画像を挿入しても、背景が透過されない場合は、
プラグインのImsanityを一旦停止して、アップロードし直す、でした^^

関連記事

  1. web

    インスタグラムの画像をTwitterへ表示させる

    twitter初心者マークの私、Instagramで投稿した写真を…

  2. WordPress

    初めましてエラー500♪すてきな洗礼いただきました。

    サイトを開設してまずは「更新すること」を優先してましたが、健全なサ…

  3. Photoshop

    Photoshop CC 多角形選択ツールが、いない?!

    勤務先ではPhotoshop Elementをサクサク使ってので、…

  4. web

    Windows10で画面をキャプチャする方法

    昨日の記事で、アイキャッチ画像にあげたキャプチャ画像がぼやけていて…

  5. Column

    情報弱者と自己責任

    twitterなかなかなじめないでいるけど、やたらRTされてるから…

  6. WordPress

    ブログに外部リンクをカード型で表示する方法

    記事の途中で、自分のサイトの別記事なら、「関連記事カードリンク」ボタン…

最近の記事

アーカイブ

  1. WordPress

    ~インデックスされているか、確認する方法~ アナリティクスの連携とSearchC…
  2. life

    理想のキッチン考
  3. Blog運営

    Googleアドセンスに審査通過して
  4. web

    拡張機能Awesome Screenshotを使ってみる
  5. Photoshop

    Photoshopでアイキャッチ画像を作ってみた
PAGE TOP