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

公開日: : 最終更新日: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="http://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年も相変わらず激動で勉強の一年になりそうです。

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

関連記事

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

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

記事を読む

ワードプレスの記事やカテゴリなどの各IDを調べる方法

ワードプレスには記事やカテゴリ、タグなどそれぞれIDがございます。 はじめに プラグインの設定を

記事を読む

ワードプレスとツイッターの連携が可能SimpleTweet

ワードプレスとツイッターを連携できるプラグインSimpleTweetの設置方法のご紹介 はじめ

記事を読む

URLを入力するだけでfacebookのようなリンクを表示させる方法

リンクを入力するだけでアイキャッチや文章を表示させる方法をご紹介いたします。 はじめに 自分の過

記事を読む

アフィリエイトの審査に落ちた方へ

リンクシェアって審査が厳しいですよね はじめに 副業でアフィリエイトサービスを利用しようと思

記事を読む

Contact Form 7の送信元をメールアドレスにする方法【さくら】

コンタクトフォーム7からのメールのメールアドレスと送信元が違うケースって結構ありますよね。 はじめ

記事を読む

スマホの理想的なハンバーガーメニュー紹介

スマホデザインを作るのであれば、ハンバーガーメニューが一般的ですよね。今回は理想的なハンバーガーメニ

記事を読む

無料のFC2ショッピングカートの登録方法

今回は、ショッピングカートを利用したいけど月額費用が気になる方向けのFC2ショッピングカートの登録方

記事を読む

無料のお問合せフォームの作り方【FC2】

今回は無料で使えるFC2のお問合せフォームの導入方法をご紹介いたします。 はじめに お問

記事を読む

no image

メールソフトのインストール【サンダーバード】

オリジナルのメールアドレスを取得しただけではメールは使用できません。今回ご紹介するのは無料で使えるサ

記事を読む

Message

現在の総記事数: 312件

Contact Form 7のエラー項目を分かりやすく方法

Contact Form 7を利用している方でエラー項目をよりわかりや

アドセンスのポリシー違反を解除する方法

ある日アドセンスから英語のメールが届きました はじめに アドセンス

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました

Huluのここがクソ!色々改悪されすぎ

Huluを契約して2年経過しましたが、使いにくくなりすぎてもう解約しま

SBIの貸株を解除する方法

SBI証券で貸株をしている人で解除方法がわからない人に

→もっと見る

PAGE TOP ↑