編集

Blogger-Flight画像の影を消す

2024/10/30

『四国の山なみ』を編集してて、、、

画像の影を消したいな、、、

って事で個別で画像の影を消せるようにしました

『四国の山なみ』にかんしては
↓をご覧ください

四国の山なみ～古典山岳文献／土佐の近代登山史 | Trekking from Kochi

画像装飾の影

これ

記事内の区切りの装飾として画像を使っていたんですよ

こういう場合、影があると変でしょ？

影を消すと、、、

これだと装飾として使えるわけです

今時、こんなの使う事はないでしょうが『四国の山なみ』は今時ではない古いホームページの作りなんで、こういうの使ってました
ホームページビルダーとかで作ってたのかな？？？
自分も使ってたけど、ホームページ作る時こういう装飾あった気がする。。。

今までは影を消すなんてどうやるか解らないし放置してましたが、少し成長したので影を消してみました

まだ修正してない『四国の山なみ』の装飾があるんで、ボチボチやっていきます

個別で影を消す方法

F-lightは標準で画像に影が付くようになってます

この機能は残しつつ、個別で画像の影を消すように指定します

CSS

img.no-shadow {
  box-shadow: none;
}

これをCSSに追加してください

自分は『ユーザーカスタム CSS』に追加しました
画像のCSSに追加しても良いでしょう

画像のHTMLに追加するのがコレ

class="no-shadow"

この画像のHTMLは、、、

 <a
    href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxfoM50i4i1CGg_um-z-GS8GFKePUBFnvNaH8pCfDuGe7Vchffd7jz4NAsg-caMrxKMugAWzDu7w2IyN8UmRHwHem-uNXAuLrWGfA931YRULbVUL26vdbrh4Us_sBLhjLMwoOTQyN-iafbRx0sFlaFmm-GMX7um1AZ2rh4B2tqyWOQkKcFrvfVcx197tk/s1200/image.jpg"
    style="margin-left: 1em; margin-right: 1em;"
    ><img
      border="0"
      data-original-height="801"
      data-original-width="1200"
      height="268"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxfoM50i4i1CGg_um-z-GS8GFKePUBFnvNaH8pCfDuGe7Vchffd7jz4NAsg-caMrxKMugAWzDu7w2IyN8UmRHwHem-uNXAuLrWGfA931YRULbVUL26vdbrh4Us_sBLhjLMwoOTQyN-iafbRx0sFlaFmm-GMX7um1AZ2rh4B2tqyWOQkKcFrvfVcx197tk/w400-h268/image.jpg"
      width="400"
  /></a>

imgの後に『class="no-shadow"』を追加してください

 <a
    href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxfoM50i4i1CGg_um-z-GS8GFKePUBFnvNaH8pCfDuGe7Vchffd7jz4NAsg-caMrxKMugAWzDu7w2IyN8UmRHwHem-uNXAuLrWGfA931YRULbVUL26vdbrh4Us_sBLhjLMwoOTQyN-iafbRx0sFlaFmm-GMX7um1AZ2rh4B2tqyWOQkKcFrvfVcx197tk/s1200/image.jpg"
    style="margin-left: 1em; margin-right: 1em;"
    ><img
      class="no-shadow"
      border="0"
      data-original-height="801"
      data-original-width="1200"
      height="268"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxfoM50i4i1CGg_um-z-GS8GFKePUBFnvNaH8pCfDuGe7Vchffd7jz4NAsg-caMrxKMugAWzDu7w2IyN8UmRHwHem-uNXAuLrWGfA931YRULbVUL26vdbrh4Us_sBLhjLMwoOTQyN-iafbRx0sFlaFmm-GMX7um1AZ2rh4B2tqyWOQkKcFrvfVcx197tk/w400-h268/image.jpg"
      width="400"
  /></a>

影が消えます

以上です

これこそ全く需要がない気がしますが、、、

もしF-lightで個別で指定して画像の影を消したい人はやってみてください

その他F-lightのカスタマイズはコチラ