Lum'Co's Diary

興味の赴くままに生きています ウフ♡

【はてなブログ】画像毎に拡大機能を解除する方法 【html】

  本ページはプロモーションが含まれています

 

 

 

hello!

ᏞUꮇ'Ꮳꭴ. デース! 

 

心機一転、新しい Blogを作成して数日経過。

Blogの デザイン自体は、「とりあえず~・・」で、

他の Blogに使用してきたモノ(自分でカスタマイズしてます)をそのまま流用していたのだけれど。

中の人の感性が以前とは変化してるので、色々と変更したくなってる。

 

目下の気になる部分は・・

 

 

マウスカーソルを乗せると、画像に影が付いて浮き上がってるように見えるようになり・・

クリックすると拡大表示されてしまうコト。(該当画像が小さめなため等倍表示されています)

 

ぃゃ、他の画像は良いのだけれど。

記事の頭に貼り付けてる この子は、アイキャッチ画像の役目が メインなので・・

むしろ、なんの挙動も起こさず背景と同化して装飾化していて欲しい・・ 

 

 

そんな私の『誰得』な我が侭を叶えてあげるべく、

Let's ggcks!(ぐぐっちゃうかす)

 

 

www.mikanusagi.com

 

女神発見!!!  ( ✧Д✧) カッ!!

 

 

HTML編集で、「hatena-fotolife」の表記を適当にかえる。

何でもいいです。ここを削除でもよいし、一文字追加とかでも大丈夫。

hatena--fotolifeにしてもいいし、hatena-fotolifesにしてもいいし。

これで、拡大表記にしたくない画像への指示を変えてしまえばOK。

 

 

記事編集画面で『HTML編集』に切り替える。

 

 

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/ *画像のAddress* .jpg"

  width="211" height="151" loading="lazy" title="" class="hatena-fotolife"       

  itemprop="image" />

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/ *画像のAddress* .jpg"

  width="211" height="151" loading="lazy" title="" class="hatena-fotolife"       

  itemprop="image" />

 

 

該当する画像に関する コードを確認。

女神が仰っておられるのは 赤字 の部分。

早速、末尾に『s』を付けたした。

 

 

お分り頂けるだろうか?

画像の上に マウスカーソルを当てた場合の変化を。

「拡大できますよ」表示ではなくなった!

もちろん、クリックしてみても反応なし!!

 

 

他にも、CSSに コードコピペで一括処理できる方法も書いてくださってます。

こちらの方法が知りたい方は、女神のところで御確認を。

私は、部分的な対処が知りたかったので御満悦。

 

 

自分の「やりたい!」が叶うと嬉しい!

女神サマ、ありがとうございました 

 

 

【追記】

補足で。

マウスオーバーした際、ふんわりと影が出て浮き上がるようにみえるのは、

元のブログデザイン『SOHO』で設定されている。

 

色々と調べてみたものの・・

『:hover』されている部分を解除する CSS、HTMLの コードを幾つか試したケド撃沈。

何をやっても、マウスオーバーすると影が出現してしまう。

なかなかの困ったちゃん仕様だけど、諦めて付き合うコトにしたよ。

 

 

【更に追記】

2023年10月に デザイン テーマ自体を変えたので、画像に影が付くコトはなくなりました!

喜び!

 

 

 

今回は、この辺でお終いです。

最後までお付き合いくださいまして、ありがとうございました。

情報をシェアしてくださる先人の皆々様に感謝。

 

必要な言葉が

必要な人に

必要な時に届きますように・・ 

愛と祝福を込めて  *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

 

 

゚*。.ღ ⊹⊱ 𝔏𝔬𝔳𝔢 & 𝔅𝔩𝔢𝔰𝔰 𝔶𝔬𝔲 ⊰⊹ ღ.。*゚

𝔱𝔥𝔞𝔫𝔨 𝔶𝔬𝔲.

𝔦 𝔩𝔬𝔳𝔢 𝔶𝔬𝔲.