さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなカスタマイズ】カーソルに合わせて画像を浮かせる方法

f:id:sanrisesansan:20201024195558p:plain

「カーソルに合わせて画像をホバー(浮かせる)させたい。」

このカスタマイズをはてなブログで行う方法を見ていきます。

手順は2つです。

・画像URLのクラス名を書き換える

CSSコードを貼り付ける

この方法で簡単に画像にホバーを付けて浮かせるカスタマイズができます。

完成系はこちらになります。 f:id:sanrisesansan:20201024155244g:plain

それでは、詳しい手順を見ていきたいと思います。


スポンサードリンク

【手順①】画像URLのクラス名を書き換える

ますは、画像URLのクラス名を書き換えます。

クラス名の書き換え方は、はてなブログの「見たまま編集」ページで画像を貼り付けて→「HTML編集」にします。

画像URLのクラス名の部分を

「 class=“hatena-fotolife”」→「class=“blockArea”」

このように書き換えます。

f:id:sanrisesansan:20201024193546p:plain

今回はサイドバーに貼り付けるので、クラス名は(“blockArea”)です。

他にも場所によってクラス名が色々あるので下記のサイトを参考にしてみてください。

<参考サイト>

→【CSS】class名とid名に使える名前一覧 - 備忘録

次に管理画面から

カスタマイズ→サイドバーから「モジュールを追加」

でHTMLに先ほどのコードを貼り付けて適用→変更を保存します。

【手順②】 CSSコードを貼りつける

続いて、デザイン→カスタマイズ→CSSデザインに下記を貼り付けます。

img.blockArea:hover {
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
transform: translateY(-0.1875em);
}

これで完成です。 f:id:sanrisesansan:20201024155244g:plain

クラスを変更した部分の画像を浮かせることができました。

参考にさせていただいたサイトをこちらに貼っておきます。

<参考サイト>https://haniwaman.com/hover/

カーソルに合わせて透けさせる方法

今回は「ボタンをカーソルに合わせて透けさせる」こともしてみました。

やり方はCSSコードに1行加えるだけです。

上記のコードの「box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);」の上に

opacity: 0.6;

CSSコードに入れるだけ。( {}内ならどこでもよいかも)

下記に貼り付けた版をのせておきます。

img.blockArea:hover {
opacity: 0.6;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
transform: translateY(-0.1875em);
}

これをCSS内に貼り付けて完成です。  f:id:sanrisesansan:20201024165102g:plain

こんな感じになりました。

まとめ

今回の貼り付ける場所はサイドバーでしたが、CSSのクラス名を変えることで「記事内」の「画像」や「フッタ」などにも同じようにできます。

クラス名を書き換えてホバーや透けさせることができるので活用してみてくださいね。

最後まで読んでいただき、ありがとうございます。

関連記事

www.sunrise033.com


この記事が良いと思ったらポチッ!をしていだだけると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村