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

    アイコンフォントが表示されない?

    ここ2.3日で急に。。。なぜ?ホームアイコンとか、アローアイコ…

  3. web

    WordPress フッターにInstagramのギャラリーを表示させてみた

    Twitterのタイムラインを公式サイトで埋め込みコードを作って、…

  4. Photoshop

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

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

  5. WordPress

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

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

  6. web

    外部リンクにアイコンのマークを入れる

    カードリンクで外部リンクを表示するのもいいんだけど、カードリンクほ…

最近の記事

アーカイブ

  1. life

    理想のキッチン考
  2. web

    外部リンクにアイコンのマークを入れる
  3. WordPress

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

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

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