汎用性のあるシートをつくる①/import.js/set_css.php/set_con_css.php
2018.05.17
import.js
沢山のjsを読み込ませると乱雑なので、import.jsにまとめました。
ここに読み込ませているjsは、ほとんどのサイトで使用可能な汎用性のあるもの（使いまわしが効くもの）に限ります。
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>');
↑ jqueryを読み込ませる、作るサイトによってバージョンを変える必要がある
document.write('<script src="/common/js/pjax/pjax.js"></script>');
↑ スムーズにページ遷移するサイトの作ることができる（参考URL：http://neganin.com/blog/web/jquery-pjax/）
document.write('<script src="/common/js/hack/jquery.FLAutoKerning.js"></script>');
↑ 日本語の文字詰め(カーニング)を自動で調整してくれる（参考URL：https://liginc.co.jp/designer/archives/8981）
document.write('<script src="/common/js/comp/jquery.easing.1.3.js"></script>');
↑ アニメーションの動きを豊かにしてくれる（参考URL：https://www.sejuku.net/blog/63968）
document.write('<script src="/common/js/comp/jquery.qsbacktotop.min.js"></script>');
↑ 右下のトップへ戻るボタン
document.write('<script src="/common/js/matchHeight/matchHeight.js"></script>');
↑ で横並びにした要素の高さを揃える（参考URL：https://www.omakase.net/blog/2020/09/matchheightjs.html）
document.write('<script src="/common/js/comp/jquery.parts.js"></script>');
↑ 全ページに適用されるjsを書き込む
document.write('<script src="/common/js/aos/aos.js"></script>');
↑ （参考URL：https://michalsnik.github.io/aos/）set_css.php
トップページのみに読み込ませる
<link href="/favicon.ico" rel="shortcut icon" />
↑ ファビコンを読み込ませる
<link href="//fonts.googleapis.com/css?family=Poppins:400,600,700" rel="stylesheet">
↑ グーグルフォントより適当なフォントを読み込ませる（グーグルフォント：https://fonts.google.com/）
<link rel="stylesheet" type="text/css" href="/common/css/basic.css">
↑ トップページ、中面ページに共通して適用されるスタイルシート
<link rel="stylesheet" type="text/css" href="/common/css/index.css">
↑ トップページのみに適用されるスタイルシート
<link rel="stylesheet" type="text/css" href="/common/css/aos.css">
↑ aos.jsで使うスタイルシートの読み込みset_con_css.php
中面ページのみに読み込ませる
<link href="/favicon.ico" rel="shortcut icon" />
<link href="//fonts.googleapis.com/css?family=Poppins:400,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/common/css/basic.css">
<link rel="stylesheet" type="text/css" href="/common/css/contents.css">
↑ 中面ページのみに適用されるスタイルシート
<link rel="stylesheet" type="text/css" href="/common/css/aos.css">