https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > footer.html

footer.html


「_common/tag/」ディレクトリ内に置く、「footer.html」の基本的なルールです。

「CODE」ボタンをクリックすると参考コードを参照できます。


footer.htmlの記述


全サイトfooter.htmlの記述

Above the Fold(最初に読み込まれる上部1画面)で使用以外のJSファイル・scriptは、footer.htmlの最後尾に記述

タグ
<footer.html>

<div id="footer">

・・・
先に、フッターのHTMLタグ記述
・・・

例)下記は一例です。

<!-- 末尾に遅延読み込み(Above the Foleで使わないJS系) -->

<script src="/attic/_common/js/common.js"></script>
<script>
	// lazyCss
	$(function(){
		// CSS遅延読み込み
		$('#lazyCss').attr('rel', 'stylesheet');
	});

	// スムーズスクロール
	$(function(){
	   // #で始まるアンカーをクリックした場合に処理
	   $('a[href^=#]').click(function() {
	      // スクロールの速度
	      var speed = 500; // ミリ秒
	      // アンカーの値取得
	      var href= $(this).attr("href");
	      // 移動先を取得
	      var target = $(href == "#" || href == "" ? 'html' : href);
	      // 移動先を数値で取得
	      var position = target.offset().top;
	      // スムーススクロール
	      $('body,html').animate({scrollTop:position}, speed, 'swing');
	      return false;
	   });
	});
</script>
</div>
						


PCビューリンク設定(SMサイトのみ)


SMサイトのfooter.html「PCビューリンク」の記述

「PCビュー」リンクには、該当のPCサイト下層ページにリンクを貼る(PHP変数代入利用)
※ディレクトリ名を変数に代入していることが条件  「ページTOP宣言」

タグ
<a href="/<?=$page_name?>?dsp=pc">PCサイトを見る</a>

自動転送プログラム参照



ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会