お問合せ先 無料見積もり

APRICOT DESIGN BLOG

ホームページのちょっとした装飾|吹き出し編

UPDATE : 2016.10.06

アプリコットデザインのブログ

こんにちは!
アプリコットデザインの松澤です。

今回はホームページの中にいるアイコンにちょっとした装飾を施したいと思います!

まずはアイコンに登場して頂きます。

  • twitter
  • facebook


じゃーん!
今では知れ渡っているtwitterとfacebookのアイコンです。
今では有名になっているのでいいですが、知らない人から見たら「なにこのアイコン」ってなりますよね!

今回はそんなアイコンに吹き出しを作っちゃいます!

まずは骨組みを作っていきます。


<ul class="snsBtns">
<li><a href="#"><img src="https://apricot-design.com/2019/wp-content/uploads/twitter-1.png" alt="twitter" /><span>twitter</span></a></li>
<li><a href="#"><img src="https://apricot-design.com/2019/wp-content/uploads/facebook-1.png" alt="facebook" /><span>facebook
</span></a></li>
</ul>

こんな感じでhtmlを書いていきます!

この中のspanで囲んであるところが吹き出しで出てきます!

ちなみに今の状態だとこんな感じで表示されます。

  • twittertwitter
  • facebookfacebook


文字がそのまま出てしまっていますね(・ω・)

では、ここから一気に装飾していきます!!


ul.snsBtns {
	clear:both;
	padding:5%;
}
ul.snsBtns li {
	float:left;
	margin-right: 15px;
}
ul.snsBtns li a{
	display:block;
	position:relative;
}
ul.snsBtns li a span{
	color: #fff;
    display: block;
    position: absolute;
    opacity: 0;
    width: 80px;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    top: -70px;
    left: -27px;
	border-radius: 5px;
    background: #55acee;
    text-align: center;
    transition: .3s;
    pointer-events: none;
    z-index: 10;
}
ul.snsBtns li a:hover span{
  opacity: 1;
  top: -40px;
}
ul.snsBtns li a span:after{
	position: absolute;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    top: 100%;
    left: 35px;
    height: 0;
    width: 0;
    border: 6px solid transparent;
    border-top: 6px solid #55acee;
    content: "";
}


こんな感じでCSS(装飾用のコード)を書いていきます!

すると・・・!



アイコンの吹き出しの完成です!!
マウスをアイコンに当ててみてください!
吹き出しが降って来ます!

ul.snsBtns li a spanのtop、leftの部分の数値を変更すれば下から登場したり左右から登場したりと色々なパターンが作れるのでぜひ使ってみてください!!

こんな感じでホームページのちょっとした部分にも装飾し、閲覧している人にわかりやすくなるような工夫を盛り込むと、ボタンなどのクリックが増えること間違いなしです!

    営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

    [長野オフィス-本社-]
    〒381-2246
    長野県長野市丹波島1-805

    [東京ブランチ]
    〒100-0004
    東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

    [松本ブランチ]
    〒390-0851
    長野県松本市大字島内4619-3 QuintetDoor 1階南室

    [金沢ベース]
    〒920-0831
    石川県金沢市東山1丁目10-1 103

    記事が気に入ったら「いいね」してね。(SNSとは連動してません)

    0

    無料見積

    まずは無料でお見積もりを作成いたします。
    お気軽にお問い合わせください。

    無料見積もり

    お問合せ先

    クリックで
    事務所一覧が
    開きます

    tel.0120-622835

    営業時間/9:00〜18:00 
    定休日/土日祝日

    Copyright © 2020 APRICOT DESIGN All Rights Reserved.