Bootstrapのテンプレート「Canvas」の使い方【爆速コーディング可能】

CODE

Twitter社が開発したCSSフレームワーク「Bootstrap」のテンプレートを使ったLP制作の解説記事です。

今回は「Canvas」というテンプレートを使ってみました。
ただ、英語のサイトなので試行錯誤しましたが、使い方がわかれば便利すぎるテンプレートなので、初心者におすすめです。

本記事の内容
  • 事前に知っておくべきこと
  • 「Canvas」の使い方
  • 制作中のLPを紹介

この記事を書いている私は、「30DAYSトライアル」がきっかけでコーディングの勉強を始めました。

「30DAYSトライアル」の課題で、Bootstrapのテンプレートを使用したLP制作があります。
そこで、私はおすすめされていた「Canvas」のテンプレートを使ってみました。

「30DAYSトライアルって何?」って方はこちらからどうぞ。

30DAYSトライアルの始め方!
この記事では、30日でプログラミングスキルが身に付く「30DAYSトライアル」の始め方を紹介していきます。 目次 1. 30DAYSトライアルの概要2. 副業で月5万円稼げるようになりたい3. プログ

個人で稼ぐ力を身に付けたい方は、ぜひチェックしてみてください。

スポンサーリンク

「Canvas」を使う時に事前に知っておくべきこと

「Canvas」を使う時に事前に知っておくべきこと

実際にテンプレートを使用する前に、事前に知っておくべきことをいくつか解説します。

 

「Canvas」とは?

実際にサイトを見てもらった方が早いと思います。

Canvas | The Multi-Purpose HTML5 Template
Canvas is a Powerful, Responsive & Raw ...

「Live Preview」で見てもらうとわかりますが、かなりたくさんのテンプレートがあります。

そして、すべてのテンプレートが16$で買えるので、かなりお得です。
多すぎて、逆に迷ってしまうほど。

無料のテンプレートを配布しているサイトもありますが、質が全然違います。

私自身、ケチって一度は無料のテンプレートを使いました。
あとから「Canvas」を購入して、なぜ早く買わなかったのかと後悔するほどでした。

 

「Canvas」を使用するための基礎知識

最低限のコーディングの知識は必要です。

  • HTML
  • CSS
  • Bootstrap

以上の知識があればOKです。

これは先ほど紹介した「30DAYSトライアル」で1か月もかからずに習得できますよ。

 

「Canvas」を使用するための注意点

1サイトにつき、1ライセンス必要です。
つまり、テンプレートを使ってサイト制作する場合は、毎回買う必要があるということです。

ただ、LP制作の案件を受注できれば元を取れるので、ここは問題なしですね。

 

「Canvas」の使い方

「Canvas」の使い方

では、実際の使い方を解説していきます。

 

購入 → ダウンロード

Canvasのサイトから「Buy Now」をクリック。

購入手続きが終了したら、ダウンロードできるようになります。
そして、ダンロードしたZipファイルを解凍すれば完了です。

ファイルを開いてみると、かなりの量のテンプレートが入っています。

詳しくは、「Package-HTML」→「Documentation」→「index.html」を開くと使い方がわかります。
※英語で書かれていますが、日本語翻訳すれば問題なく使えます。

 

コーディング

ダウンロードが完了したら、コーディングに入っていきます。

テンプレートをそのまま使う場合

テキストエディタで、

  • テキストの書き換え
  • 画像の変更

をすれば、あっという間にLPの完成です。コーディングの知識があれば簡単ですよね。

ただ、注意点があります。

  • CSSの読み込み
  • JavaScriptの読み込み

以上を忘れないようにしましょう。
CSSが効かなかったり、動きのないサイトになってしまいます。

何のファイルが必要かは、実際にHTMLのコードを見ればわかります。

CSSの場合は、headタグ内を見てください。

この写真の場合は、四角で囲んだファイルをcssフォルダに入れておけばOKです。

JavaScriptの場合は、bodyの閉じタグの直前を見てください。

四角で囲んだファイルがjsフォルダに入っていればOKですね。

テンプレートによって読み込むファイルが違うので、気をつけてください。

テンプレートを探す際のヒント

HTMLファイルが多すぎて、Canvasのサイトで見たテンプレートを探すのが大変に感じるかもしれません。
そんな時は、デモページのURLにヒントがあります。

例えば、下記のページ。

このHTMLを使いたいと思ったら、「index-portfolio.html」を探せばOKということです。

これをエディタにドラッグ&ドロップで完了です。簡単ですよね。
この方法に気づくまで、htmlを開いては閉じて、という無駄な作業をしていました…

複数のテンプレートを組み合わせて使うことも可能

  • ヘッダーはこのテンプレートを
  • メインはこっちのテンプレートを
  • フッターはまた別のテンプレートを

という具合に、複数のテンプレートの組み合わせも可能です。
いろいろ試してみると楽しいですよ。

これで完成です\(^o^)/

 

制作中のLPを紹介

独学半年で、Canvasのテンプレートを使って、こんな感じのLPができました。
※未完成なので、出来上がったらまた載せますm(_ _)m

 

まとめ

以上が、Bootstrapのテンプレート「Canvas」の使い方でした。

慣れてしまえば爆速でコーディングできるようになるので、とても便利です。

また、初心者でもそれなりのWebサイトを作れるので自信になりますよ。

以上です。最後までお読みいただき、ありがとうございました。

コメント

  1. sym より:

    Canvasの使い方がググっても中々見つからなかったので、
    大変参考になりました。

    • わや より:

      なんとも嬉しいお言葉、ありがとうございます。
      私もCanvasを購入した後に使い方がわからなくて苦戦したので、記事にしてみました。

  2. sm より:

    はじめまして!

    わたしもCanvasを購入し,使い方に迷っていたので,当サイトに本当に助けられました.
    ありがとうざいます!

    そこで質問なのですが,このテンプレートを商用利用する際に,1サイトにつき1ライセンスの購入が必要とのことですが,
    どこから購入の手続きをすれば良いのでしょうか.

    私も一通り調べたのですが,よくわからず今に至っています...
    もしご存知でしたらご教示いただけると幸いです.

    よろしくお願いします!

    • わや より:

      嬉しいお言葉、ありがとうございます。
      私もまだ1ライセンスしか購入したことがないのですが、おそらく最初に購入したのと同じように手続きをすれば良いのではないでしょうか?
      現状は、1度購入すれば何度も使えてしまう仕様ですが、きちんと支払ってください、ということだと思います。
      曖昧な回答になってしまい、申し訳ありません。

  3. まさ より:

    Canvasを購入しましたが、ファイル数の多さにどれを触ればいいかわからず挫折しかけていましたが、
    こちらの記事のおかげで進めることができました!

    ありがとうございます。

    質問なのですが、Contactのお問い合わせ機能を実装するにあたり、送り先のメールアドレスはどこで設定するのでしょうか?

    教えていただけると助かります。

    • わや より:

      嬉しいコメントありがとうございます。
      テンプレートの種類が多いのはいいですが、ファイルが多すぎますよね。

      ご質問の件、
      ダウンロードしたファイル内にある「Package-HTML」→「Documentation」→「index.html」→「Forms」
      を見てみると解決しませんでしょうか?

  4. オリボー より:

    全然Canvasのことについて触れているサイトが見つからなかったのでこの記事を見つけてさらに理解が深まりました!!

    質問2つよろしいでしょうか

    1つ目 Canvasを16$(1800円)で購入することで合計850個ものテンプレートが使えるってことでしょうか。「1サイトにつき、1ライセンス必要です。」この文章で「1つのテンプレートごとに1800円必要なのか?」と少し混乱してしまったので。。(つまり「かかるお金は合計で1800円なのか。」ってことです。質問わかりにくかったらすみません。。)

    2つ目 来週新しいPCに変えようと思っているんですけど、今使ってるPCでCanvas を購入した場合、購入した物のデータは新しいPCに移行できるのでしょうか。

    2つ目はこのページとあまり関係ないことなので、1つ目の質問だけでも答えていただけると幸いです。

    • わや より:

      コメントありがとうございます。もともと私もCanvasの解説記事がなくて苦労したので、他の方の参考になればと思い、まとめました。

      ご質問①
      >Canvasを16$(1800円)で購入することで合計850個ものテンプレートが使えるってことでしょうか。

      その通りです。16$で購入すれば、すべてのテンプレートを使用することができます。
      1つのサイトであれば、いくつテンプレートを組み合わせようが自由ということですね。

      ご質問②
      Canvasからダウンロードしたファイルは「Package-HTML」という名前でPCにダウンロードされていると思いますので、移行は可能かと思います。

  5. ささだ より:

    すごくわかりやすく説明されていて、本当に参考になりました!ありがとうございます!(コメント欄も参考になりました)

    恐縮ですがお尋ねさせてください。html内で、もともと組み込まれている画像を変更する際、書かれているファイル名を変更したのですが、プレビューでは変更されていませんでした。こういった場合、記事内でもおっしゃられていたDocumentationファイルのindex.html内に解答…というかヒントが書かれているものなのでしょうか?
    素人質問で申し訳ありません。
    回答いただけると幸いです。

    • わや より:

      嬉しいコメントありがとうございます。

      >html内で、もともと組み込まれている画像を変更する際、書かれているファイル名を変更したのですが、プレビューでは変更されていませんでした。

      画像を変更するには、おっしゃっている方法であっていると思うのですが…
      もしまだ解決していないようでしたら、詳細に教えていただけると助かります。

      お問い合わせの方からご連絡いただいてもかまいません。
      https://wayasblog.com/contact/

      • ささだ より:

        返信いただきありがとうございます!

        自分の方でミスを把握することができました!
        突然の質問にも対応していただき本当にありがとうございました!

タイトルとURLをコピーしました