• JOIN US ON SNS
  • 株式会社monomode
    私たちは札幌・東京を拠点に活動するWEB制作、ホームページ制作会社です。WEB制作やネットショップ制作を主軸にウェブ上のプロモーション展開をサポートしています。

無料テンプレートで爆速WEB制作!Start Bootstrapを使ってみよう!

無料テンプレートで爆速WEB制作!Start Bootstrapを使ってみよう!

BootstrapとはTwitter社にて開発されたWEBサイト構築をよりスムーズかつ、スピーディーに仕上げる為のフレームワーク。フレームワークとはCSSのスタイリングやレイアウトが既に定義されたCSSのパッケージの様なもの。その為、HTMLとCSSの基礎知識さえあれば、デザインが苦手な人でも簡単におしゃれなWEBサイトを作成できるのが特徴です。さらに、レスポンシブデザインにも対応しているところも魅力のひとつ。

例えば、ナビゲーションメニューやフォームを1から作るのってちょっと面倒だったりしますよね。bootstrapのCSSフレームワークにはそういったものが既に定義されています。

そして今回は、そのBootstrapを応用した無料のWEBテンプレート「Start Bootstrap」の使い方をご紹介します。もちろん全て無料のテンプレートになりますので、是非お試しあれ。

無料で使える、Start Bootstrapのテンプレート

まずはサイトにアクセス!好みのテンプレートを選択しよう

startbootstrap

http://startbootstrap.com/

まず、自分の作成したいWEBサイトのイメージに合わせてテンプレートを選びましょう。おしゃれなワンページテンプレートやレスポンシブ対応のテンプレートがすべて無料で揃っています。デザインのトレンドを抑えたオシャレなテンプレートがたくさんあって、見ているだけでも楽しい。各テンプレートのプレビューも確認できるので、自分好みのテンプレートが見つかったら、ダウンロードしましょう。今回は「Clean Blog」というテンプレートをダウンロードしてみます。

 

theme

トレンドを抑えたかっこいいテンプレートがたくさん並んでいます。

 

 

こちらがダウンロードしたStart Bootstrapのテンプレート Clean Blog

cleanblog

Clean blog

Clean Blogはレスポンシブデザイン対応で、個人や会社のブログに最適なテンプレートです。WEBフォントも組み込まれていてかっこいい!

 

 

ダウンロードしたZipファイルを解凍!

file

次に、ダウンロードしたzipファイルを解凍します。ダウンロードした「Clean Blog」のzipファイルを解凍すると、複数に分かれたフォルダが入っています。トップページに使用するするindex.html、プロフィールや会社概要のページに使うabout.html、記事のシングルページに使用するpost.html、あとはコンタクトフォームの付いたお問合せページのcontact.html の4つのHTMLファイルがあります。WEBフォントやCSSなどがまとめられたフォルダも入っていますね。

次は、テンプレートを自分のサイトに合わせて情報を書き換える作業の説明をします。

 

 

テンプレート内のテキストを書き換えよう!

text

HTMLのファイルには既にテキストが書き込まれています。自分のサイトに合わせてタイトルや見出しなどのテキストを書き換えましょう。

 

 

画像の変更をしよう!

img

画像の変更はimgフォルダから行います。今回使用するテーマのimgフォルダには主に各ページに使用するカバー画像が5枚入っています。それぞれのページに表示される画像を差し替える際には、同じファイル名の画像をimgフォルダ内にて追加して上書きするか、CSS・HTMLのリンクファイル名を書き換えましょう。サイズなどを合わせておくとレイアウトの崩れなどもなく画像が変更できますよ。

 

 

CSSを書き換えて微調整もできる

css

多少のデザイン変更、レイアウト変更がしたくても対応可能なところが、Bootstrapテンプレートのいいところ。CSSフォルダ内にあるファイルを修正すれば、文字色や多少のデザイン変更を簡単に行うことができます。

 

 

WEBサイトの完成!

完成!

さぁ、これであなただけのWEBサイトが完成です!

どうでしたか。Start Bootstrapを使えば、WEBデザインが苦手な人でも、HTMLとCSSの基礎的な知識があれば簡単におしゃればWEBサイトが作成できそうですね。読み込むファイルの量も多くはないので、サイトもサクサク動きます。ぜひWEBサイト作成の際には試してみてください。

 

気になる無料テンプレートをご紹介させて頂いた記事も是非ご覧くださいな!

必見!コーポレートサイト向け、無料でおしゃれなBootstrapテンプレートもご紹介しています。

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
五十嵐翔太

五十嵐翔太

代表の五十嵐です。 デザイナー、フロントエンドエンジニアを得て創業しました。 好きなことは食べることと人間観察、猫とあそぶこと。

関連記事

  • RSS rss
  • feedly FEEDLY Feedlyで追加する
mautic is open source marketing automation
ページトップへ戻る