次はそのマウスオーバーアクションを変えてみましょう!吹き出しを出すあるある!イメージ的にもちょっとカジュアルになります。各画像の左上で吹き出しが表示されるように、14行目で基準座標の指定を行っています。あと吹き出しが他の画像に被るので、21行目の余白を広くしました。あとは31行目と57行目で、吹き出しのデザインを設定しています。吹き出しは何もしない状態では非表示になるように34行目でdisplayに"none"に設定し、75行目の設定でマウスオーバーで表示されるようにしています。リッチにするせっかくなので、吹き出しに動きを出してそれっぽくしてみます。アニメーションさせるだけですね!上記のスタイルシート内の下記部分の内容を変更します。変更点と、追加点以外は省略しています。CodePen.[/codepen_embed]ぴょこんとバナーを作るモール型ではこれが一番見かけるんじゃないでしょうか。マウスオーバーすると、ぴょこんと画像が少し飛び出るようになる演出です。ちなみに『ぴょこんとバナー』は前の会社の上司が言っていたのですが、非常に分かりやすい名称だと思います。最初にあらかじめ右側を詰めて表示。マウスオーバーで、詰めた右側のマージンをリセット。}}[/css]まず18行目で、最初の表示時に右側のマージンにマイナス値を設定して見えなくしておきます。今回は15px分見えなくしました。35行目で、マウスオーバーしたら見えなくしていた15px分をマージンをリセットして、全て表示する感じです。11行目の『画像の共通設定』に下記スタイルシートを追加する事で、にゅるんとバナーに変える事が可能です。アニメーション設定を追加。ease;}[/css]完成!ぴょこんとします。CodePen.[/codepen_embed]表示する場所を中央にする例えば上から○pxとか下から○pxとかと言った場合なら分かりやすいのですが、中央にドン!みたいなのはちょっと工夫が必要です。言っても、ラップ要素のスタイルシートをちょこっと変更するだけです。translateY(-50%);}[/css]6行目でラップ要素の縦位置を50%の位置に表示し、10~11行目のtranslateYを設定する事でちょうど真ん中になるようになります。translateは色々な場面で結構活躍してくれます。昔はjavascriptで高さ測って疑似的にやってた気もします。おわりPCだと結構普通に使えますが、スマホだと一番下固定で使った方がしっくりくるかも知れません。フローティングバナーをアイコンに変えたりとか、ただでさえ少ない可視領域を圧迫しないデザインが必要ですね。モール型はFTPでくらい、php使わせてくれてもバチは当たらないと思う。シェアするこうじいつもする作業をもっとミス無く楽ちんに出来るような環境が提供できれば幸いです。マジックキーボードは買い?買ってトクする人はこんな人2021.03.17AppleiPadの英字入力で最初が大文字になってしまう方に朗報2020.04.03生活&ダイエット生活Instagramはじめてます。2018.10.11生活&ダイエット2018年、明けましておめでとうございます!2018.01.01生活&ダイエット2017年ありがとうございました。