旅館・飲食店向けの無料HTMLテンプレート「white base」
ローカルビジネスに使えるHTMLテンプレートを作りました。
レスポンシブシングルカラムのHTMLテンプレートです。
旅館や飲食店向けに、縦書きのナビゲーション、日本語がきれいに表示されるデザインにしました。
※このテンプレートはWordPressテーマではありません。WordPressにそのままインストールしては使えません。
テンプレートファイルのダウンロードはこちら→HTMLテンプレートファイル（zip）
[追記]デモページがレスポンシブになってませんでした。修正しました。
わかりやすくするためにサンプルのタイトルロゴを日本語にしました。
[訂正]
メールフォームプログラムを一緒に同梱してました。メールフォームプログラムはご自分で導入してください。theme2.0.zipが最新です。
base.syofuso.com
海外のHTMLテンプレートは高機能でかっこいいデザインのものが無料でたくさんありますが、英語が前提のデザインが多いんですよね。
日本語がきれいに映えるものが少なかったので、自分で作ってみました。
著作権表示のリンククレジットは一応フッターに記述がありますが、削除しても構いません。
またクレジットのリンクにはnofollowを入れています。お互い「スパムリンク」をしないためです。
これはid:s-supporterさんの記事を読んで気付きました。
【SEO】フッターリンクにSEO効果（リンクの価値）はない？乱用はスパムと判定されることもあり - 検索サポーター
“Designed by”リンクには必ずnofollowをつけよう。 | SEO Japan – アイオイクスによる海外最新SEO情報ブログ
特徴
- 無料、商用利用可、著作権表示不要（クレジットリンク消してもOK）
- レスポンシブデザイン
- 縦書きナビゲーションメニュー付き
- フルスクリーンのスライダー（カルーセル）
- 日本語表示に適したフォント指定
- 予約ボタン・電話番号を右上トップ固定
- 内部SEO施策済み
スクロールすると上部固定（横書き）に変わります。 スマートフォンではハンバーガーメニュー。
リッチスニペットを用いたパンくずリストによりサイト構造を適切に検索エンジンに伝えます。
使い方 カスタマイズ解説
zipファイルを解凍するとthemeフォルダに6つのhtmlファイルがあります。テキストと画像リンクを変更してください。
sample.htmlによく使うレイアウトの要素を入れたので、切り貼りしてお使い下さい。
タイトルロゴは263×70～300×80pxの横書きサイズ推奨。サイズを変える場合はcssの#titleのmarginを調整して下さい。
imagesフォルダにある画像はぱくたそ・足成のフリー素材です。使用できますが、オリジナルの写真を使ったほうがいいでしょう。
主な要素のスタイルはcustom.cssに入っています。skeleton.cssはグリッドシステムやレイアウト用です。
グリッド・システムやレイアウトについては以下の記事をどうぞ。
blog.minimal-green.com
カスタマイズ例1
カスタマイズデモページ1
カスタマイズ例2
カスタマイズデモページ2
詳しいカスタマイズはこの記事に随時リンク追記していきます。
使用したライブラリ
グリッドシステム用にCSSフレームワーク「skeleton」
Skeleton: Responsive CSS Boilerplate
TOPページのスライダーに「swiper」
Swiper - Most Modern Mobile Touch Slider
メールフォームプログラムはご自分で導入してください。
私はメールフォームはPHP工房さまのプログラムを利用しています。
www.php-factory.net
利用規約
GPL ライセンスのもと公開しています。無料で自由に改変してお使いただけます。
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
個別のカスタマイズのご依頼は検討中です。コメントかサイドバーのお問い合わせフォームからご連絡下さい。
サイトの公開
サーバーにファイルをアップロードしてサイトをインターネット上に公開しましょう。基本的にはzipファイルの中のthemeフォルダの中全部そのままアップロードすればOKです。
更新方法はこちらの記事をどうぞ。
blog.minimal-green.com
