リットリンク（lit.link）で透過PNG画像を設定したのに、画像の周囲に白い外枠や背景が表示されてしまい、思ったようなデザインにならないことがあります。この記事では、リットリンクで画像だけを表示したい場合の設定方法や、白い枠が表示される原因、きれいに透過画像を見せるためのポイントについて解説します。
リットリンクで透過画像の周囲に白い枠が出る原因
リットリンクでは、画像自体が透過されていても、画像を配置するリンクブロックやカード部分に背景色が設定されている場合があります。
そのため、PNG画像の背景を透明にしてアップロードしても、画像の後ろにあるブロックの背景が白く表示され、「画像だけが浮かんでいる状態」にならないことがあります。
例えば、ロゴやアイコンだけを透過PNGで作成しても、リンクボタンや画像リンクの枠設定が残っていると、白い四角形のように見える場合があります。
画像リンクの背景色を透明に変更する方法
リットリンクで白い枠を消したい場合は、編集画面から該当するリンクや画像パーツのデザイン設定を確認します。
まずリットリンクの編集ページを開き、白い枠が表示される画像またはリンク部分を選択します。その後、背景カラーやボタンカラーの設定項目を確認してください。
背景色を変更できる場合は、カラー設定で透明（透過）を選択することで、ページ全体の背景になじませることができます。
透過PNG画像をきれいに表示するためのポイント
画像そのものを透明にする場合は、ファイル形式にも注意が必要です。JPEG画像は背景透過に対応していないため、必ずPNG形式で保存した画像を使用します。
例えば、ロゴだけを表示したい場合は、背景を削除したPNG画像を作成してアップロードすると、余白や白背景が残りにくくなります。
また、画像サイズが大きすぎる場合は余白部分まで含めて表示されることがあるため、画像編集ソフトなどで不要な透明部分をトリミングしておくと自然な見た目になります。
リットリンク側で完全に枠を消せない場合の対処法
設定を変更しても白い枠が消えない場合、利用しているリットリンクのパーツ種類によっては背景や余白を完全になくせないことがあります。
特に通常のリンクボタンやカード形式のパーツでは、デザイン上の余白や背景が固定されている場合があります。
その場合は、画像専用のパーツを利用する、または画像自体にページ背景と同じ色を設定して違和感を減らすなどの方法があります。
透過画像を使ったリットリンクのデザイン例
ブランドロゴやイラストを配置したい場合は、背景を透明にした画像をページ上部に配置すると、シンプルで見やすいプロフィールページを作成できます。
例えば、白い背景のページではなくカラー背景を設定している場合、透明PNGのロゴを使うことで背景色を活かしたデザインにできます。
ただし、画像の透明部分とリットリンク側のブロック背景は別々に管理されているため、画像加工だけでは解決しないケースもあります。
まとめ｜リットリンクの白い枠は画像ではなくパーツ設定を確認する
リットリンクで透過画像を設定しても白い枠が表示される場合、原因は画像ではなく配置しているリンクや画像パーツ側の背景設定であることが多いです。
PNG画像の透過状態を確認したうえで、背景カラーやブロック設定を見直すことで、画像だけを自然に表示できる可能性があります。
思い通りのデザインにならない場合は、画像編集とリットリンク側の設定の両方を確認することが、きれいなページ作成への近道です。
コメント