各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

HTML5の書き方(第3回)~テンプレート紹介~

  • publish_advertise
2013/03/21

こんにちは。All About ホームページ作成ガイドの西村文宏です。

前回は、HTML5で新しく追加された要素の一部を簡単にご紹介いたしました。

 

HTML5を手軽に使ってみるには、デザインやレイアウトが完成された「テンプレート」を利用すると便利です。

今回は、たくさんのテンプレートを公開しているテンプレート配布サイトをご紹介いたします。

 

 


Template Portfolio – Free HTML5 Templates


 

上記は、「Free HTML5 Templates」というウェブサイトで配布されているテンプレートの一覧ページです。

 

ここで公開されている200種類を越えるテンプレートは、すべてHTML5で作られています。

英語サイトではありますが、以下の手順で簡単に利用できますので、ぜひ試してみてください。

 

1.テンプレートを探す

このページには、小さなサムネイル画像が並んでいますので、興味があるものを見つけたら画像をクリックしてみてください。
少し大きなサイズで確認ができます。

 

気に入ったテンプレートが見つかったら、サムネイル画像の下にある「more info」というリンクをクリックしてください。

すると、そのテンプレートの配布ページに移動できます。

 

2.テンプレートの詳細を見る

それぞれのテンプレートの配布ページでは、ページを下方向にスクロールすると、「View Demo」と「Download Here」という2つのボタンが見えます。

 

「View Demo」をクリックすると、そのテンプレートを使ったサンプルページが表示されます。自分の望むデザインになっているかどうかを確認してみてください。

 

このサンプルは、画像で表示されているわけではなく、テンプレートのHTMLが実際に使われています。

そのため、ブラウザ上での表示を確認できるほか、ソースを表示させて、実際の記述内容を確認することもできます。

 

3.テンプレートをダウンロードする

「Download Here」をクリックすると、テンプレートの構成ファイル一式をダウンロードできます。

ZIP形式で圧縮されていますから、ダウンロード後に展開してください。

 

テンプレート一式には、HTMLファイルとCSSファイルが含まれています。さらに、画像ファイルやJavaScriptファイル等が含まれているものもあります。

テンプレートによっては、ウェブ上にアップロードしないと、うまく表示確認ができないものもあります。

 

もし、サンプル通りに表示されない場合には、一旦、ウェブサーバ上にアップロードしてみてください。

また、readme.pdf や lisence.txt などの名称のファイルには、説明書きやライセンス情報が書かれています。(それらがないテンプレートもあります)

 

◆テンプレートを利用する際の注意

 

このテンプレート配布サイトで公開されているテンプレートのライセンスは、

「Creative Commons Attribution (by) 3.0」として提供されています。

これは、

 

・原著作者のクレジットを表示する必要がある。

・商用利用しても良い。

 

などの意味になります。詳しくはこちらのページをご参照ください。

これらのテンプレートを使うときには、ページのどこかに原著作者のクレジットを表示する必要があります。

例えば、以下のようなリンクを含めておくと良いでしょう。

 


<a href=”http://freehtml5templates.com/”>Free HTML5 Templates</a>


 

さて、3回にわたって、HTML5の書き方とHTML5のテンプレートを簡単にご紹介いたしました。ぜひ、HTML5を活用してみてください。

 

 

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.03.14
HTML5の書き方(第1回)~head要素について~
2013.03.19
HTML5の書き方(第2回)~新要素について~

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る