スマホ画面の一番下にふわっとコンテンツを表示させる方法

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方

スマートフォンでホームページを見た際に常に一番下に表示されているふわっとした広告枠の出し方を紹介いたします。

はじめに

検索エンジンがスマホデザインを取り扱う事を発表してから一気に需要が伸びたスマホデザイン。広告を掲載したい人もいらっしゃるでしょうがメールや電話などお問合せしやすいデザインの作り方をご紹介いたします。

注意事項

cssは他に影響を与えないようにしましょう

やりたい事

今回は私こういったのを作りたいなぁって思った物を箇条書きで出すと

  • スマートフォンの一番下にコンテンツを表示させたい
  • ページをスクロールさせると消えるようにしたい
  • ふわっと表示されふわっと消したい

こういった内容になります。

作ってみた

結構理想的なものが出来ました。

fuwa1

サイトにアクセスすると一番したにコンテンツが表示されていて、

fuwa2

画面を動かすと「ふわっと」消えます。

とりあえず実際に作ったものを見て貰うほうがわかりやすいのでこちらをご覧下さい。

ふわっとコンテンツを表示

作りとしては非常に簡単で全てコピペで簡単に作る事が出来ます。分からない場合はソースを見て下さい。

作り方

まずはhtmlを用意します。

ヘッダーにjsを使うので

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

このタグを挿入します。そして、ふわっと表示させたい内容をhtmlの一番最後にjsと一緒に入れます。

<footer class="hover_f">
<ul>
<li class="f_tel"><a href="tel:0000000000">電話</a></li>
<li class="f_mail"><a href="https://www.moco358.com/contact">メール</a></li>
</ul>
</footer>
<script type="text/javascript">
	$(window).on("scroll touchmove", function(){
			$("footer.hover_f").stop();
			$("footer.hover_f").css('display', 'none').delay(500).fadeIn('fast');
	});
</script>

これでhtmlは完成です。後はcssを追加するだけでOKです。

.hover_f {
	position:fixed;
	bottom: 0;
	background:#111111 url(../img/fnav_bk.png) repeat-x;
	height:48px;
	width:100%;
	background-size:auto 48px;
	-moz-background-size:auto 48px;
	-webkit-background-size:auto 48px;
	-o-background-size:auto 48px;
	-ms-background-size:auto 48px;
	font-weight: bold;
	text-shadow: 0 -1px 1px  #000000 ;}

	.hover_f ul li a {
		text-align:center;
		font-size:10px;
		padding-top:30px;
		text-decoration:none;
		color:#fff;
		float:left;
		width:50%;}
	.hover_f ul li a;hover {
		}
		.hover_f ul li.f_tel a {
			background:url(../img/f_icon_tel_off.png) no-repeat 50% 30%;
			background-size:26px 26px;
			-moz-background-size:26px 26px;
			-webkit-background-size:26px 26px;
			-o-background-size:26px 26px;
			-ms-background-size:26px 26px}
		.hover_f ul li.f_tel a:hover {
			background:url(../img/f_icon_tel_on.png) no-repeat 50% 30%;
			background-size:26px 26px;
			-moz-background-size:26px 26px;
			-webkit-background-size:26px 26px;
			-o-background-size:26px 26px;
			-ms-background-size:26px 26px}
		.hover_f ul li.f_mail a {
			background:url(../img/f_icon_mail_off.png) no-repeat 50% 30%;
			background-size:26px 26px;
			-moz-background-size:26px 26px;
			-webkit-background-size:26px 26px;
			-o-background-size:26px 26px;
			-ms-background-size:26px 26px}
		.hover_f ul li.f_mail a:hover {
			background:url(../img/f_icon_mail_on.png) no-repeat 50% 30%;
			background-size:26px 26px;
			-moz-background-size:26px 26px;
			-webkit-background-size:26px 26px;
			-o-background-size:26px 26px;
			-ms-background-size:26px 26px}

これで完成です。

私の場合はお問合せ用に電話番号とお問合せフォームへのリンクを常に表示させるようにしましたが、この部分を普通に広告表示としても利用できますし、新着情報を表示させても良いでしょう。

このデザインの場合はスマホの画面サイズや横にした時にも常に一番下に50%ずつ表示されているのでそれぞれのサイズにあったcssを用意しなくて済むのでかなり便利だと思います。

スマホデザインは、これからまだまだ新しい物が沢山出てくるので面白いものがあればまたご紹介させて頂きます。

さいごに

必須項目ですね

最近はスマホデザインありきのホームページが増えてきているので、色々と勉強になっています。

一年前はスマホデザインは見づらいなぁって感じていたのですが、最近は逆にPC用のデザインは毎回ズームしなければいけないので見づらく感じてきました笑

実際にスマホ用のサイトデザインを制作していると従来のSEO対策で上から順番に重要な内容を表示させていくと言うのが更に深まってきました。デザインを作りこむ場合に自分が知っているレイアウトの作りは2~3程度しかないのでひたすら情報を集めていかないといけませんね。2015年も相変わらず激動で勉強の一年になりそうです。

勉強すると稼げる副業としても役立つ事が本当に多いので、ついていけなくならないように必死です。

関連記事

特定のユーザーのみ反映するカスタマイズ方法

ワードプレスでは管理画面の情報をいじると全てのユーザーが影響を受けてしまいますがカスタマイズする事で

記事を読む

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 はじめに ECCUBEでは検索機能がすご

記事を読む

Gmailを使ったメールの振り分け方法

Gmailを使ったメールの振り分け方法をご紹介致します。 はじめに Gmailでメールの振り

記事を読む

サクラで日本語ドメインを使う方法

サクラサーバーで日本語ドメインを利用するちょっとした裏技をご紹介いたします。 はじめに

記事を読む

no image

オリジナルのメールアドレスの作り方

オリジナルのドメインを取得した際にやっぱり欲しいのはオリジナルのメールアドレス。gmailやyaho

記事を読む

アップロード済み画像を簡単にリサイズする方法WordPress

この画像リサイズしたいけど再アップロードもめんどくせぇな・・・ はじめに 数年前から書いているブ

記事を読む

タグ機能を使ったPHPの分岐WordPress

ワードプレスでタグを使った分岐に関するやり方をご紹介させて頂きます。 はじめに PHPを使ったカ

記事を読む

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている際の反映されるまでの時間を調べ

記事を読む

ワードプレスのカスタム投稿タイプにページ送りを導入する方法

表示件数が多くなりすぎるとページ送りを導入した方がデザイン的にも見やすくなります。 はじめに ス

記事を読む

WordPressで記事の盗用をさせないWP-Copyright-Protection

5時間かけて書いた記事が色々なところで盗用されているなんて悲しい事ありますよね はじめに まず、

記事を読む

Message

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

現在の総記事数: 325件

特定のアカウントのツイートのみを通知させる方法

その人が発言したらすぐに確認したいですが全員を通知していると携帯が鳴り

ネスタリゾートを100%遊びたい人へ【宿泊あり】

実際にネスタリゾートに行って感じた事や、お勧めの利用方法などをご紹介い

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ はじめに

EC-CUBE特定の商品ステータスのみを特定の箇所に表示させる

代引きが出来ない商品やメール便が対応できない商品を目立たせたい時などに

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

→もっと見る

PAGE TOP ↑