どうも、メメント・オレ です。
今日は一日だけの休みだったのでずっと家に引きこもり、ブログの細かいレイアウトを変更したり追加したりしてました。
そんな時に、気になったのがプロフィール画像をマウスオーバー時、画像がはみ出してしまう、どうやったら直るんだと試行錯誤した結果の模様を今回はお送りします。
問題のアニメーション動作。
炎の妖精（修造）「これはいらつく……ぞう！」
オレ「でも、解決方法は意外と簡単。
CSSで解決しよう！
.my-profile{
overflow:hidden!important;
}
.my-profile-thumb img:hover{
opacity: 0.9;
transform: scale(1.2) rotate(9deg)!important;
}.my-profileがimgの枠組み。
overflow:hiddenは、はみ出したのを収めるcss
それにプラスして優先順位を一番上にする !importantを追加。
.my-profile-thumb imgが元のアイコン。
:hoverはマウスオーバーしたらアニメーションをさせるもの。
opacity: 0.9;は画像をどのぐらい透明にするかするもの。
transform: scale(1.2)は画像の拡大縮小。
rotate(9deg)は回転。
アニメーション速度（transition）は、既にwordpressテーマ【JIN】の場合は下記のようになっているので特に変更はなし。
color 0.4s ease,
background 0.4s ease,
transform 0.4s ease,
opacity 0.4s ease,
border 0.4s ease,
padding 0.4s ease,
left 0.4s ease,
box-shadow 0.4s easeまとめ
あとは、WordPressダッシュボード▷外観カスタマイズ追加CSS設定に先程のコードをコピペすればOK!!!
JINのお問い合わせフォーラムにしようかと悩みましたが、とりあえずは自力で解決してみました。
まだまだレイアウトで未完成なところや色々とダメな部分はあります。
でも、以前より投稿を完成させるのが早くなって少し嬉しい。
目標とする動きのあるイカしたブログを目指して、頑張るぞい。
ちなみにサムネの「はみだしてるハンバーガー」は腹が減ってたので採用しました。
ハトさん「 ブログの差別化は難しいっぽ。」
