今回はBootstrapのテンプレートを使用してホームページを作成したいと思います。
無料テンプレート素材がたくさんあるので好きなやつを選ぶといいです。
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| Apache | 2.4.6 |
| PHP | 7.0.28 |
テンプレートのダウンロード
URLをクリック → Bootstrapとは！高品質な無料HTMLテンプレート素材35選
色んなテンプレートがあるので好きなやつを選択します。
私の場合は、「Agency」にしました。
URLをクリックします。
DownloadまたはView Soruceのどちらかでソースを落としてきます。
私の場合は、「View Soruce」にしました。
コピーマークをクリックします。
|
1 |
https://github.com/BlackrockDigital/startbootstrap-agency.git |
自分の開発環境に移動します。
[clone]
|
1 |
$ git clone https://github.com/BlackrockDigital/startbootstrap-agency.git |
[実行結果]
|
1 2 3 4 5 |
Cloning into 'startbootstrap-agency'... remote: Counting objects: 3278, done. remote: Total 3278 (delta 0), reused 0 (delta 0), pack-reused 3278 Receiving objects: 100% (3278/3278), 12.61 MiB | 6.26 MiB/s, done. Resolving deltas: 100% (828/828), done. |
[ディレクトリの確認]
|
1 |
$ ls -al |
[実行結果]
|
1 2 3 4 |
total 12 drwxrwxr-x 3 ユーザ名 ユーザ名 4096 Mar 10 17:54 . drwxr-xr-x 23 ユーザ名 uchida 4096 Mar 10 17:53 .. drwxrwxr-x 9 ユーザ名 ユーザ名 4096 Mar 10 17:54 startbootstrap-agency |
これでソースが作成されているのが確認できました。
サイトが表示されるように、バーチャルホストの設定をしましたが、省略します。
では、自分の開発環境でURLを指定してサイトを表示します。
無事に表示されればOKです。
head部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Agency - Start Bootstrap Theme</title> ︙ </head> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> // 修正 <meta name="description" content="GROW-UP オフィシャルWEBサイト"> // 追加 <meta name="keywords" content="GROW-UP,grow-up,グロォゥアップ,グローアップ,FACTORY,factory,ファクトリー,GROW-UP株式会社,株式会社GROW-UP"> // 修正 <meta name="author" content="samancha"> // 修正 <title>GROW-UPホームページ</title> ︙ </head> ︙ |
navigation部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav text-uppercase ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#team">Team</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <div class="container"> // 修正 <a class="navbar-brand js-scroll-trigger" href="#page-top">Tanaka Automobile</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav text-uppercase ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#team">Team</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> ︙ |
header部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> <div class="container"> <div class="intro-text"> <div class="intro-lead-in">Welcome To Our Studio!</div> <div class="intro-heading text-uppercase">It's Nice To Meet You</div> <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a> </div> </div> </header> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> <div class="container"> <div class="intro-text"> // 修正 <div class="intro-lead-in">Welcome To Our Garages!</div> <div class="intro-heading text-uppercase">It's Nice To Meet You</div> <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a> </div> </div> </header> ︙ |
services部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Services</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Responsive Design</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-lock fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Web Security</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> </div> </div> </section> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Services</h2> // 修正 <h3 class="section-subheading text-muted">自動車・バイクの性能が向上し、故障を改善します。</h3> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> // 修正 <i class="fa fa-car fa-stack-1x fa-inverse"></i> </span> // 修正 <h4 class="service-heading">車の販売・買取・整備</h4> // 修正 <p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを お受けします。</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> // 修正 <i class="fa fa-truck fa-stack-1x fa-inverse"></i> </span> // 修正 <h4 class="service-heading">トラックの販売・買取・整備</h4> // 修正 <p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを お受けします。</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> // 修正 <i class="fa fa-motorcycle fa-stack-1x fa-inverse"></i> </span> // 修正 <h4 class="service-heading">バイクの販売・買取・整備</h4> // 修正 <p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを お受けします。</p> </div> </div> </div> </section> ︙ |
portfolio部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Portfolio</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> <h4>Threads</h4> <p class="text-muted">Illustration</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> <h4>Explore</h4> <p class="text-muted">Graphic Design</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> <h4>Finish</h4> <p class="text-muted">Identity</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> <h4>Lines</h4> <p class="text-muted">Branding</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> <h4>Southwest</h4> <p class="text-muted">Website Design</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> <h4>Window</h4> <p class="text-muted">Photography</p> </div> </div> </div> </div> </section> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> // 修正 <h2 class="section-heading text-uppercase">Information</h2> // 修正 <h3 class="section-subheading text-muted">様々な情報を提示し、最新の情報にアップデートします。</h3> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> // 修正 <h4>販売</h4> // 修正 <p class="text-muted">商品を売る。</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> // 修正 <h4>買取</h4> // 修正 <p class="text-muted">購入したり、下取りしたりする。</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> // 修正 <h4>車検</h4> // 修正 <p class="text-muted">自動車の検査。</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> // 修正 <h4>定期点検</h4> // 修正 <p class="text-muted">事前に点検・整備する。</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> // 修正 <h4>一般整備</h4> // 修正 <p class="text-muted">オイル交換やタイヤ交換など…</p> </div> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt=""> </a> <div class="portfolio-caption"> // 修正 <h4>板金・塗装</h4> // 修正 <p class="text-muted">修理・再生する作業。</p> </div> </div> </div> </div> </section> ︙ |
about部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">About</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="timeline"> <li> <div class="timeline-image"> <img class="rounded-circle img-fluid" src="img/about/1.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>2009-2011</h4> <h4 class="subheading">Our Humble Beginnings</h4> </div> <div class="timeline-body"> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="rounded-circle img-fluid" src="img/about/2.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>March 2011</h4> <h4 class="subheading">An Agency is Born</h4> </div> <div class="timeline-body"> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> </li> <li> <div class="timeline-image"> <img class="rounded-circle img-fluid" src="img/about/3.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>December 2012</h4> <h4 class="subheading">Transition to Full Service</h4> </div> <div class="timeline-body"> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> </li> <li> <div class="timeline-image"> <img class="rounded-circle img-fluid" src="img/about/3.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>December 2012</h4> <h4 class="subheading">Transition to Full Service</h4> </div> <div class="timeline-body"> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="rounded-circle img-fluid" src="img/about/4.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>July 2014</h4> <h4 class="subheading">Phase Two Expansion</h4> </div> <div class="timeline-body"> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <h4>Be Part <br>Of Our <br>Story!</h4> </div> </li> </ul> </div> </div> </div> </section> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">About</h2> // 修正 <h3 class="section-subheading text-muted">私達の歴史について</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="timeline"> <li> <div class="timeline-image"> <img class="rounded-circle img-fluid" src="img/about/1.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> // 修正 <h4>2018年2月</h4> // 修正 <h4 class="subheading">私たちの謙虚な始まり</h4> </div> <div class="timeline-body"> // 修正 <p class="text-muted">整備工場で働いて約10年が経った頃…ある友人から独立してみないか？という誘いがあっ た。それをきっかけに話をしている内に、ついに実現することが出来たのです。まずは、一歩前進です。</p> </div> </div> </li> // コメントアウト <!-- <li class="timeline-inverted"> ︙ </li> --> <li class="timeline-inverted"> ︙ </li> </ul> </div> </div> </div> </section> ︙ |
team部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Our Amazing Team</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="team-member"> <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt=""> <h4>Kay Garland</h4> <p class="text-muted">Lead Designer</p> <ul class="list-inline social-buttons"> <li class="list-inline-item"> <a href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> <div class="col-sm-4"> <div class="team-member"> <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt=""> <h4>Larry Parker</h4> <p class="text-muted">Lead Marketer</p> <ul class="list-inline social-buttons"> <li class="list-inline-item"> <a href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> <div class="col-sm-4"> <div class="team-member"> <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt=""> <h4>Diana Pertersen</h4> <p class="text-muted">Lead Developer</p> <ul class="list-inline social-buttons"> <li class="list-inline-item"> <a href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> </div> <div class="row"> <div class="col-lg-8 mx-auto text-center"> <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p> </div> </div> </div> </section> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Our Amazing Team</h2> // 修正 <h3 class="section-subheading text-muted">最高のメンバー達です。</h3> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="team-member"> <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt=""> // 修正 <h4>Teruki Tanaka</h4> // 修正 <p class="text-muted">社長-整備士</p> <ul class="list-inline social-buttons"> <li class="list-inline-item"> <a href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> // 修正 <a href="https://www.facebook.com/profile.php?id=100004262675236"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> <div class="col-sm-4"> <div class="team-member"> <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt=""> // 修正 <h4>Makoto Yao</h4> // 修正 <p class="text-muted">営業-整備士</p> <ul class="list-inline social-buttons"> <li class="list-inline-item"> <a href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> // 修正 <a href="https://www.facebook.com/profile.php?id=100002680991384"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> <div class="col-sm-4"> <div class="team-member"> <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt=""> // 修正 <h4>Samancha</h4> // 修正 <p class="text-muted">システムエンジニア</p> <ul class="list-inline social-buttons"> <li class="list-inline-item"> // 修正 <a href="https://twitter.com/hjFGlLb8yjtrGNg?lang=ja"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> // 修正 <a href="https://www.facebook.com/profile.php?id=100003192819335"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> </div> <div class="row"> <div class="col-lg-8 mx-auto text-center"> // 修正 <p class="large text-muted">メンバー全員が整備経験があり、整備は勿論のこと営業マンだったり、システム>エンジニアだったり２つの能力を持っているので、頼もしいメンバーです。</p> </div> </div> </div> </section> ︙ |
contact部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> ︙ </section> <!-- Clients --> <section class="py-5"> ︙ </section> <!-- Contact --> <section id="contact"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Contact Us</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <form id="contactForm" name="sentMessage" novalidate> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="Please enter your name."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="Please enter your email address."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required data-validation-required-message="Please enter your phone number."> <p class="help-block text-danger"></p> </div> </div> <div class="col-md-6"> <div class="form-group"> <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="Please enter a message."></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="clearfix"></div> <div class="col-lg-12 text-center"> <div id="success"></div> <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button> </div> </div> </form> </div> </div> </div> </section> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> ︙ </section> <!-- Clients --> <section class="py-5"> ︙ </section> <!-- Contact --> <section id="contact"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> // 修正 <h2 class="section-heading text-uppercase">Contact</h2> // 修正 <h3 class="section-subheading text-muted">お問い合わせフォーム</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <form id="contactForm" name="sentMessage" novalidate> <div class="row"> <div class="col-md-6"> <div class="form-group"> // 修正 <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="あなたの名前を入力してください。"> <p class="help-block text-danger"></p> </div> <div class="form-group"> // 修正 <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="メールアドレスを入力してください。"> <p class="help-block text-danger"></p> </div> <div class="form-group"> // 修正 <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required data-validation-required-message="電話番号を入力してください。"> <p class="help-block text-danger"></p> </div> </div> <div class="col-md-6"> <div class="form-group"> // 修正 <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="メッセージを入力してください。"></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="clearfix"></div> <div class="col-lg-12 text-center"> <div id="success"></div> <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button> </div> </div> </form> </div> </div> </div> </section> ︙ |
対象ファイル：js/contact_me.js
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { $("#contactForm input,#contactForm textarea").jqBootstrapValidation({ ︙ success: function() { // Success message $('#success').html("<div class='alert alert-success'>"); $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-success') .append("<strong>Your message has been sent. </strong>"); $('#success > .alert-success') .append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { $("#contactForm input,#contactForm textarea").jqBootstrapValidation({ ︙ success: function() { // Success message $('#success').html("<div class='alert alert-success'>"); $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-success') // 修正 .append("<strong>あなたのメッセージは送信されました。</strong>"); $('#success > .alert-success') .append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, ︙ |
対象ファイル：mail/contact_me.php
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php // Check for empty fields if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) { echo "No arguments Provided!"; return false; } $name = strip_tags(htmlspecialchars($_POST['name'])); $email_address = strip_tags(htmlspecialchars($_POST['email'])); $phone = strip_tags(htmlspecialchars($_POST['phone'])); $message = strip_tags(htmlspecialchars($_POST['message'])); // Create the email and send the message $to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. $email_subject = "Website Contact Form: $name"; $email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message"; $headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true; ?> |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php // Check for empty fields if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) { echo "No arguments Provided!"; return false; } $name = strip_tags(htmlspecialchars($_POST['name'])); $email_address = strip_tags(htmlspecialchars($_POST['email'])); $phone = strip_tags(htmlspecialchars($_POST['phone'])); $message = strip_tags(htmlspecialchars($_POST['message'])); // Create the email and send the message // 修正 $to = '☓☓☓@yahoo.co.jp'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. // 修正 $email_subject = "ウェブサイトお問い合わせフォーム Form: $name"; // 修正 $email_body = "あなたのウェブサイトの連絡フォームから新しいメッセージを受け取りました。\n\n"."＝＝＝＝＝＝＝＝＝>＝＝＝:\n\nお名前: $name\n\nメールアドレス: $email_address\n\n電話番号: $phone\n\nメッセージ:\n$message"; // 修正 $headers = "From: ☓☓☓@yahoo.co.jp\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true; ?> |
Yahoo!メールの設定
お問い合わせフォームから宛先をyahooメールに送信すると迷惑メールになるので、設定をしたいと思います。
yahooのメールを開いて下さい。
まずは、フォルダの作成です。
個人フォルダにある＋をクリックします。
フォルダー名を入力し、[OK]ボタンをクリックします。
するとフォルダが作成されます。
次にフィルターの設定です。
URLのサイトを参考に設定してみて下さい → フィルターを設定する
ちなみに私の設定は下記です。
お問い合わせフォームから送信してみて、指定したフォルダにメールが届くか確認。
これで、無事にメールが届きました。
access部分の追加
対象ファイル：index.html
対象ファイル：scss/_access.scss
対象ファイル：scss/agency.scss
対象ファイル：css/agency.css
対象ファイル：css/agency.min.css
まずは、URLからmapで載せたい箇所を検索。コチラ → Google Map をレスポンシブ対応に
取得したコードを HTML に貼り付ける。
ナビバーにACCESSを追加。
※CSSファイルを更新した場合は、Shiftキー ＋ （ブラウザの更新ボタンをクリック）
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> ︙ </section> <!-- Clients --> <section class="py-5"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt=""> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt=""> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt=""> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt=""> </a> </div> </div> </div> </section> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">GROW-UP FACTORY</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav text-uppercase ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#portfolio">Information</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#team">Team</a> </li> // 追加 <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#access">Access</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> ︙ </section> <!-- Clients --> <!-- <section class="py-5"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt=""> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt=""> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt=""> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#"> <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt=""> </a> </div> </div> </div> </section> --> // 追加 <!-- Access --> <section id="access"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Access</h2> <h3 class="section-subheading text-muted">GROW-UP FACTORYの所在地</h3> </div> <div class="col-lg-12 text-center googlemap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.0675828398744!2d139.14966321561036!3d36.18923818007907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601ec3bcbaad25fb%3A0xc01cd9a62e9a00fb!2z44CSMzY3LTAyMTIg5Z-8546J55yM5pys5bqE5biC5YWQ546J55S65YWQ546J77yR77yW77yV77yS!5e0!3m2!1sja!2sjp!4v1521423549462" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div> </section> ︙ |
[ディレクトリの移動]
|
1 |
$ cd scss/ |
[ファイルの作成]
|
1 |
$ touch _access.scss |
[権限の変更]
|
1 |
$ chmod 775 _access.scss |
[ファイルの編集]
|
1 |
$ vi _access.scss |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Styling for the access section#access .container .row div.googlemap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } section#access .container .row div.googlemap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } |
[ファイルの編集]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Core variables and mixins @import "variables.scss"; @import "mixins.scss"; // Global CSS @import "global.scss"; // Components @import "navbar.scss"; @import "masthead.scss"; @import "services.scss"; @import "portfolio.scss"; @import "timeline.scss"; @import "team.scss"; // 追加 @import "access.scss"; @import "contact.scss"; @import "footer.scss"; |
[ディレクトリの移動]
|
1 |
$ cd ../css/ |
[ファイルの編集]
|
1 |
$ vi agency.css |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 追加 section#access .container .row div.googlemap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } // 追加 section#access .container .row div.googlemap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } |
[ファイルの編集]
|
1 |
$ vi agency.min.css |
[ファイルの中身]
|
1 2 |
// 追加 section#access .container .row div.googlemap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}section#access .container .row div.googlemap iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;} |
modal_1部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> ︙ </section> <!-- Clients --> <!-- <section class="py-5"> ︙ </section> --> <!-- Access --> <section id="access"> ︙ </section> --> <!-- Contact --> <section id="contact"> ︙ </section> <!-- Footer --> <footer> ︙ </footer> <!-- Portfolio Modals --> <!-- Modal 1 --> <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="close-modal" data-dismiss="modal"> <div class="lr"> <div class="rl"></div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <div class="modal-body"> <!-- Project Details Go Here --> <h2 class="text-uppercase">Project Name</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt=""> <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> <ul class="list-inline"> <li>Date: January 2017</li> <li>Client: Threads</li> <li>Category: Illustration</li> </ul> <button class="btn btn-primary" data-dismiss="modal" type="button"> <i class="fa fa-times"></i> Close Project</button> </div> </div> </div> </div> </div> </div> </div> ︙ |
[変更後]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> <!-- Portfolio Grid --> <section class="bg-light" id="portfolio"> ︙ </section> <!-- About --> <section id="about"> ︙ </section> <!-- Team --> <section class="bg-light" id="team"> ︙ </section> <!-- Clients --> <!-- <section class="py-5"> ︙ </section> --> <!-- Access --> <section id="access"> ︙ </section> --> <!-- Contact --> <section id="contact"> ︙ </section> <!-- Footer --> <footer> ︙ </footer> <!-- Portfolio Modals --> <!-- Modal 1 --> <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="close-modal" data-dismiss="modal"> <div class="lr"> <div class="rl"></div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <div class="modal-body"> <!-- Project Details Go Here --> // 修正 <h2 class="text-uppercase">販売</h2> // 修正 <p class="item-intro text-muted">車両販売に関しての流れを記載します。</p> // ▼ 追加 ▼ <table class="table table-striped"> <thead> <tr> <th>#</th> <th>説明</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>車両の特定</td> </tr> <tr> <td></td> <td>⬇</td> </tr> <tr> <td>2</td> <td>具体的な内容の取り決め</td> </tr> <tr> <td></td> <td>⬇</td> </tr> <tr> <td>3</td> <td>見積り</td> </tr> <tr> <td></td> <td>⬇</td> </tr> <tr> <td>4</td> <td>車両決定</td> </tr> <tr> <td></td> <td>⬇</td> </tr> <tr> <td>5</td> <td>車両点検</td> </tr> <tr> <td></td> <td>⬇</td> </tr> <tr> <td>6</td> <td>納車</td> </tr> </tbody> </table> // ▲ 追加 ▲ // コメントアウト <!--<img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">--> // 修正 <p>車両によって納車のタイミングは異なります。ですが、お客様の要望になるべく応えるように努力する 次第であります。何卒ご理解の上よろしくお願い致します。</p> // ▼ コメントアウト ▼ <!-- <ul class="list-inline"> <li>Date: January 2017</li> <li>Client: Threads</li> <li>Category: Illustration</li> </ul> --> // ▲ コメントアウト ▲ <button class="btn btn-primary" data-dismiss="modal" type="button"> <i class="fa fa-times"></i> Close Project</button> </div> </div> </div> </div> </div> </div> </div> ︙ |
modal_2部分の修正
対象ファイル：index.html
[ファイルの編集]
|
1 |
$ vi index.html |
[変更前]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
<!DOCTYPE html> <html lang="en"> <head> ︙ </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> ︙ </nav> <!-- Header --> <header class="masthead"> ︙ </header> <!-- Services --> <section id="services"> ︙ </section> |