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. WordPress

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

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

  2. WordPress

    画像サイズを把握するには

    フッター画像がどうしても揃わず、どうにも不格好。アップロー…

  3. Blog運営

    自分の「メディア」を持つということ

    このサイトを立ち上げ、こうして更新するにるに至るまで、実はサーバー…

  4. web

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

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

  5. web

    サイドバーにツイッターのタイムラインを埋め込んでみた

    twitterせっかくはじめたからには、やっぱり連携しないとな~、…

  6. WordPress

    ~インデックスされているか、確認する方法~ アナリティクスの連携とSearchConsoleの設定・…

    まだ立ち上げたばっかりだし、アクセス数とかあまり考えずに、更新する…

最近の記事

アーカイブ

  1. Photoshop

    Photoshopでアイキャッチ画像を作ってみた
  2. WordPress

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

    Surface 3の通信料を見直し!!
  4. web

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

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