稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

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

投稿日:2015年9月26日 更新日:

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

はじめに

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

注意事項

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年も相変わらず激動で勉強の一年になりそうです。

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

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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

関連記事

ECCUBE4をXサーバーにインストールしてみた

ECCUBE4系へバージョンアップできるかどうか実験中 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ワードプレスの分岐topページのみやその他表示 【EC-CUBE】管理 …

no image

WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう 関連記事: tinymce advancedで絵文字もフォントサイズも可能に 本当のアクセス解析じゃなかった・・・リファラスパム編 足底筋膜 …

ワードプレスに目次を簡単に入れるTable of Contents Plus

今までタグを手打ちしていたのですが、やっとこさおさらば出来そうです。 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 Yahoo!ショッピングの設定方法Step1の詳しい説明 ワードプレ …

【Xサーバ】hostsの設定で動作確認

前回Xサーバの動作確認URLで実際の動作が確認できませんでしたが、hostsの設定で確認できますよ。 関連記事: 自動相互リンクの作り方 Yahoo!ショッピングの設定方法Step1の詳しい説明 シー …

youtubeに動画をアップロードする方法

youtubeに動画をアップロードするのって難しいと思っていませんか?意外と簡単なんですよ。 関連記事: アフィリエイトだと気付かせないリンクのつけ方 無料のFC2ショッピングカートの登録方法 無料で …