トップ  >  2014年  >  2014.08.15 [HTML] テンプレートの簡単生成
features [HTML] テンプレートの簡単生成
2014.08.15記
http://lollyt.in/
今回はこのサイトからデザインを選択して、ダウンロードできるテンプレートで1ページ作ってみようと思います

選択できるデザインブロックは、「ヘッダー」、「スライダー」(スライドショー)、「コンテンツエリア」、「サービス・プロダクツ」(画像とキャプション)、「ギャラリー」、「マップ」、「フォーム」、「フッター」、「カラム・フルサイズ」(固定幅か全幅のレイアウトかの選択)の9種類があります。

以下では、初期値のままで、サイトの右側のダウンロードエリアから「Export HTML file」「Download Project Files」のアイコンからダウンロードします。
「Export HTML file」では [tags.html] というファイルがダウンロードされます。
「Download Project Files」では [css][fonts][img][js][plugins]というフォルダにファイルが格納されたZIPファイルがダウンロードされます。このZIPを解凍し、[css]フォルダの並びに[tags.html]を配置します。[tags.html]はファイル名を適当に変更してもOKです。

以下で、若干カスタマイズ(画像の差し替え程度)してみます。

設置サンプル
http://www.keibunsya.co.jp/modules/features/files/20140815/lollytin_beta1.4/tags.html

ヘッダーの変更

tags.html の26行目あたり
画像を変更
<!-- LOGO -->
<div id="logo"><a href="/"><img src="http://placehold.it/720x200/149cd7/149cd7" /></a></div>
↓
<div id="logo"><a href="/"><img src="http://www.keibunsya.co.jp/themes/nepink/title_201101.jpg" /></a></div>
41行目あたり
<!-- CALL TO ACTION -->
<div class="call"><h1>Lorem ipsum 1800123123</h1><p>Consectetur adipiscing elit</p></div>
↓
<div class="call"><h1>啓文社</h1><p>「印刷・DTPの専門店」自費出版、少部数印刷、同人誌、CD-ROM、DVD、PDF、名簿管理、Word・Excel・PowerPoint入稿など、気軽におたずねください。</p></div>

スライダー部分

95行目あたり
画像を変更
<div data-src="http://placehold.it/1110x400/21b2eb/058dcd"></div>
<div data-src="http://placehold.it/1110x400/058dcd/21b2eb"></div>
↓
<div data-src="http://www.keibunsya.co.jp/themes/nepink/title200811b.jpg"></div>
<div data-src="http://www.keibunsya.co.jp/themes/nepink/title.jpg"></div>

サービス・プロダクツ部

107, 116, 125, 134行目あたり
足成のフリー画像で置換
(ダウンロードした画像を img/ に配置)
http://www.ashinari.com/
<img src="http://placehold.it/720x720/21b2eb/058dcd" />
↓
<img src="img/a1380_001630_m.jpg" />

地図を当社の位置を示すように変更

js/custom.js の84行目あたり
地図の緯度・経度を当社の値に変更
var myLatlng = new google.maps.LatLng(-12.47518, 130.99042);
↓
var myLatlng = new google.maps.LatLng(35.6421679, 139.6524326);
このファイルの変更を保存すると以下のエラーが発生するので
Uncaught SyntaxError: Unexpected token ILLEGAL

js/custom.js の62行目あたり
Sakuraエディターで見ると中黒「・」のようなものがあり、これが原因でエラーが発生していたので削除しました
if (imagePos < topOfWindow・) {
↓
if (imagePos < topOfWindow) {
(ファイルのエンコードがUTF-7だったのでUTF-8に変更しました)

フッターの変更

193行目あたり
当社に変更
<div class="col-md-6 col-sm-6 col-xs-12 left">
	© 2014 Praesent nisl diam.
</div>
↓
<div class="col-md-6 col-sm-6 col-xs-12 left">
	© 2014 啓文社
</div>
フォームは[Submit]ボタンを押しても送信されませんが、入力のチェックは行われるようにしてあります

カスタマイズは以下を変更
tags.html
css/custom.css
js/custom.css

画像はサイズを揃えた方がいいようです。
現在は [beta1.4] なので、まだまだ変化するよね
前
2014.09.15 iPhone6のサイズ
カテゴリートップ
2014年
次
2014.07.15 ふるさと納税

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999 keibunsya all right reserved.