[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 ふるさと納税 |