実験、簡易サイト作成に!HTMLコードのテンプレートサンプルを作ってみた
- 2018.12.18
- 2019.01.26
- Webスキル
よこのじ(@yokonoji_work)です。
HTMLやCSSについて一通り扱えるようになった後、JavaScriptやPHPも取り入れて実験や簡易的なサイトを作ることが多いため、そのためのテンプレートを作ってみました。
HTMLテンプレートサンプル
こちらのサイトが、そのテンプレートサンプルです。Bootstrapをベースにして、Navbarや2カラムのcontainerを配置しています。Webページを作るときはこれを利用してサクっと作ることができます。リンク先のページのソースコードをまるっとコピペしてもらえればそのまま動きます。
HTML Template:https://yokonoji.github.io/project/html-template
解説
作ったページはそのまま公開もできるようにいくつかポイントがあります。
1つはdns-prefetchを使って、Google Adsense関連のページで読み込まれるドメインの名前解決を行っている点です。これにより、ページアクセス時のDNS Lookupを事前に済ませて広告表示を速くすることができます。
<meta http-equiv="x-dns-prefetch-control" content="on"> <!--Adsense関連の名前解決--> <link rel="dns-prefetch" href="//pagead2.googlesyndication.com"> <link rel="dns-prefetch" href="//cm.g.doubleclick.net"> <link rel="dns-prefetch" href="//googleads.g.doubleclick.net"> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link rel="dns-prefetch" href="//ade.googlesyndication.com"> <link rel="dns-prefetch" href="//tpc.googlesyndication.com"> <link rel="dns-prefetch" href="//googleads4.g.doubleclick.net">
SNS用のカード表示も用意しています。これらのメタタグにサイトのURLや画像の指定を行えばTwitterやFacebookでの拡散も問題ありません。
<!--SNS用カード--> <meta property="og:url" content="サイトのURL" /> <meta property="og:title" content="サイトタイトル" /> <meta property="og:type" content="website"> <meta property="og:description" content="サイトの説明をここに書く" /> <meta property="og:image" content="画像をURLで指定" /> <meta name="twitter:card" content="summary か summary_large_image" /> <meta name="twitter:site" content="Twitterユーザー名 @yokonoji_work" /> <meta property="og:site_name" content="サイトタイトル" /> <meta property="og:locale" content="ja_JP" /> <meta property="fb:app_id" content="Facebook appIDを入力">
その他、ファビコンやFont Awesomeのcss読み込み、google fontsでNoto Sans JPの読み込み、Bootstrapのcss, js、jQueryの読み込みを記述済みです。
ちょっとした実験、簡易サイトの作成に自分でカスタマイズしたテンプレートを持つと何かと便利ですよ。
- 前の記事
Windows10でnpmをインストール・設定する 2018.12.16
- 次の記事
画像の圧縮・最適化でページ表示を速くして、サーバーコストを下げる 2018.12.19