F-lightは初期状態で画像に影が入ります。オシャレです。
ですが、自分は別ブログでレシピ画像を縦に２枚つなげて表示していたため……
ちょっと用途に合いませんでした。
画像と画像の間に隙間ができてしまうし、影は不要……ということで、変更しました。
本記事ではこの「画像の影をなくす方法」と「画像同士の隙間（余白）をなくす方法」を解説します。
画像の影をなくす方法
左のメインメニュー【テーマ】を選択し、【カスタマイズ】をクリックします。
カスタマイズ画面が開いたら、【詳細設定】から【背景の色】を選択します。
背景の色の中から【ダークモードの影】【ライトモードの影】の二項目で透過をONにします。
これで影が消えます。
消えない場合の対処方法はこの後で解説しています。
画像同士の隙間（余白）をなくす方法
画像同士の隙間をなくすにはHTMLを編集します。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
画像同士の隙間（余白）変更方法
HTML編集で.separator {を検索します。
その直ぐ下のmarginの値を0に変更します。
margin: 2em 0;
text-align: center;
}
↓↓↓
margin: 0;
text-align: center;
}
2emの値を上げれば余白が広くなり、下げれば余白が狭くなります。
これを0にすることで余白がなくなり、画像同士をピッタリとくっ付けることができます。
ダークモードの影が消えない不具合について
バージョンによるかもしれませんが、カスタマイズからダークモードの影を変更しても反映されない不具合があります。
自分で直せるので、サクッと直してしまいましょう。
HTML編集でダークモード用配色を検索します。
その数行下の影の一文にカラーコードが入ってしまっているため、カスタマイズが反映されません。
なのでカラーコードの部分を以下のように変更してください。
これでカスタマイズからの変更が反映されるようになります。
F-lightでも画像同士をくっ付けられる！
実は以前に画像同士の隙間（余白）を解決する方法は解説しています。
F-light以外はコチラ ➡ 画像と画像の間に隙間（余白）ができてしまう問題解決方法
でもこの方法はF-lightだとできないんです。
自分もテーマを変更した時は慌ててしまいました。
本記事で解説したとおりにやればF-lightでも画像同士をピッタリくっ付けられるので、悩んでいたら試してみてくださいね。
