黄色いのちょっとよくわからないです。phpフレームワークコピペで使える!サイドに設置できるフローティングバナーを作ろう2016.09.122018.11.30csshtmlコピペで使えるシリーズどうもこんばんは!HYPのこうじです。先日は、サイドの縦バナーについてご紹介しましたが、今回は『フローティングバナー』のご紹介を使用と思います!まぁ前回のもフローティングだけどさ。コピペで使える!サイドに伸びる縦バナーを作ろうこちらも比較的楽天市場やYahooショッピング等の『モール型』で比較的需要があるみたいですね。使い過ぎてデザイン破綻しているところもちらほら見えますが...。ご利用は計画的にですね(笑)今回は、前回のサイド縦バナーよりかは汎用性があり、スマホでもサイズや場所によりますが比較的活用しやすいです。『新作出たよ!』とか『イベント始まったよ!』といったワンポイントの告知としても十分重宝できます。メリットページを閲覧中常に目に入るので、情報を訴求しやすい。比較的邪魔にならずに、ワンポイントとして表現できる。場所やサイズによってはレスポンシブでも使い勝手が良い。デメリット使い方によってはごちゃごちゃしてうるさくなる。フローティングバナーを作ろうまずはタグ作成!出来るだけ更新を楽にするために『タグはシンプルにして、バックグラウンドを複雑にする』様に心がけます。構造の基本的な部分は、前回の記事と一緒です。合わせてご参考下さい。全体の画像をリンク画像を含めたボックス要素を右上に固定。/>を使わなくても同じように表示させることが出来るようにするためです。/>を囲う用にします。あとは32行目で、リンクタグには『これはリンクしてますよ~』というのが分かるようにマウスオーバー時のアクションを指定。39行目で、セパレートタイプのページ用にコンテンツが被る前にフローティングバナーが非表示になるようにしています。CodePen.[/codepen_embed]マウスオーバーアクションを変えてみよう!マウスオーバー時に使える表現で最もスタンダードなのは『背景の色を変える』だったり、『半透明にする』あたりではないでしょうか。