(初心者向け)html5up - Big Pictureを使ってみる

[「html5upを使ってみる」](http://qiita.com/egplnt/items/2643c299d8540f749181)より
[html5up](https://html5up.net/)の[Big Picture](https://html5up.net/big-picture)を使ってみます

![スクリーンショット 2017-06-04 18.32.43.png](https://qiita-image-store.s3.amazonaws.com/0/125842/a6795711-1184-42a5-82fc-16946165f085.png)

[html5up](html5up.net)は[Creative Commons cc3](https://html5up.net/massively)なので、下記で編集するindex.htmlの"html5up"のcreditを残します




# １．写真を更新する
- ダウンロードしたファイルには写真が含まれていないので、自分の表示したい写真で置き換えます
- Finderでhtｍl5up-big-picture.zipをダブルクリックして展開すると、html5up-big-pictureのフォルダーが現れるので、その下の"images"フォルダーを開きます

![スクリーンショット 2017-06-04 18.41.33.png](https://qiita-image-store.s3.amazonaws.com/0/125842/dbfcebcc-c98a-7e0e-bc7e-90630cf317e7.png)

- 置き換える対象となるファイル（例：intro.jpg）のサイズを確認します。intro.ｊｐgをダブルクリックし、プレビューで開いて、「ツール」▶「サイズを調整」を開きます

![スクリーンショット 2017-06-04 18.43.19.png](https://qiita-image-store.s3.amazonaws.com/0/125842/e3a26268-fb70-97e9-ece2-29227610d673.png)

- この例では対象となるファイルbanner.jpgのサイズが「ピクセル」という単位で、幅が1400ピクセル、高さが715ピクセルであることがわかります

![スクリーンショット 2017-06-04 18.43.27.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ce002d2e-3905-d329-3cdf-ac2a7ddc9904.png)


-同様にone.jpgファイルが幅１４００ピクセル、高さ７３６ピクセル、two.jpgファイルが幅１４００ピクセル、高さ７３５ピクセルであることがわかります

![スクリーンショット 2017-06-04 18.45.38.png](https://qiita-image-store.s3.amazonaws.com/0/125842/6b7397a8-9bcf-a412-9483-dd19989de6c0.png)



- 変更（置き換え）前のバックアップとして、"banner.jpg"ファイルを右クリックで長押しすると、ファイル名部分が反転するので、"banner_bk.jpg"などへ改名しておきます。同様にavatar.jpgをavatar_bk.jpgへ改名しておきます

![スクリーンショット 2017-06-04 12.02.03.png](https://qiita-image-store.s3.amazonaws.com/0/125842/2af2e549-221f-0bfb-ebf3-2cbc6b2b8315.png)

![スクリーンショット 2017-06-04 12.02.11.png](https://qiita-image-store.s3.amazonaws.com/0/125842/7c74ccb4-0a64-2700-96e7-351ac9ff3485.png)

- iPhotoやiPhoneなどから自分の好きな写真をコピーして、このimagesフォルダーに置きます。[(初心者向け）Macbookで写真のサイズを変える](http://qiita.com/egplnt/items/54f19d3ff385c6e10b01)
を参照し、自分の好きなファイルを対象の元ファイル（例：bg.jpg）のサイズに合わせて変更します。ファイルサイズの変更が完了したら、ファイル名を対象ファイル名（例："bg.jpg"）へ変更します。オリジナルの自分の好きな写真を改名してしまわないよう、コピーした写真を改名するようにします
- [Unsplash](https://unsplash.com/)などのサイトから高品質な写真を無償で入手することができます。使用に際してはライセンスの規約を熟読し、規定を遵守します。
- ブラウザでindex.htmlをリロードし、提供した写真が表示されることを確認します

![スクリーンショット 2017-06-04 21.53.18.png](https://qiita-image-store.s3.amazonaws.com/0/125842/3c60ec4c-8b6f-8903-efc7-55d41afb8fd1.png)

![スクリーンショット 2017-06-04 21.54.46.png](https://qiita-image-store.s3.amazonaws.com/0/125842/0ded21b8-7507-547e-ce6a-6e1438ad78dd.png)

![スクリーンショット 2017-06-04 21.54.56.png](https://qiita-image-store.s3.amazonaws.com/0/125842/3a383fa4-270a-5513-6258-285f120fd325.png)





- カラー写真を白黒にするには、Macbookのプレビューで「ツール」▶「カラーを調整」で「彩度」をゼロ（左端）にすると写真が白黒になります

![スクリーンショット 2017-06-04 14.57.07.png](https://qiita-image-store.s3.amazonaws.com/0/125842/4c68f06c-eb7e-4008-b479-b960ef46034c.png)

![スクリーンショット 2017-06-04 14.57.40.png](https://qiita-image-store.s3.amazonaws.com/0/125842/75236b71-89da-e7e5-3dbc-2927c2b001a7.png)

- "images"フォルダーの他のjpgファイルも写真と置き換えることで、ブラウザで表示される画面を変更することができます。どの画面にどの写真が表示されるかは、写真が表示されているところで[contorl]を押しながら右クリックし、表示されるメニューから「名前をつけて画像を保存」を選択するとファイル名が表示されるので、imagesフォルダー内の同名のファイルを置き換えることで画面に表示される写真を入れ替えることができます
- 写真の大きさが合わない場合、写真サイズを編集します → [Macbookでの写真サイズの編集](http://qiita.com/egplnt/items/54f19d3ff385c6e10b01)



# ２．文章を更新する
- 画面に表示される文章を更新します
- まず、index.htmlのバックアップをとっておきます。index.htmlをコピー▶貼り付けし、ファイル名を`index_bk.html`などにします
- index.htmlを２本指でタップ（または[control]＋右クリック）し、「このアプリケーションで開く」からAtomを選択します

![スクリーンショット 2017-06-04 21.57.31.png](https://qiita-image-store.s3.amazonaws.com/0/125842/8d143ead-361e-df0d-090b-10962b6c2634.png)


-Atomでindex.htmlが編集可能なかたちで表示されました
- ３７行目の`<h2>Hey.</h2>`を見つけ、

![スクリーンショット 2017-06-04 21.59.04.png](https://qiita-image-store.s3.amazonaws.com/0/125842/c5342f95-f34e-ee66-17ba-955995abff73.png)


- この`Hey.`の文字を必要に応じて適当に書き直し（"Hey."はかなりかっこよいのでこのままでも良いと思いますが）、続けて次の`<p>Welcome to <strong>Big Picture</strong> a resp...`の部分も適当な文章に更新します。末尾の`</p>`を削除しないように気をつけます

![スクリーンショット 2017-06-04 22.04.35.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ce20156c-808b-3442-517a-e0b12f58cad1.png)


- [command]+Sで保存します
- ブラウザのindex.htmlを[control]+Rでリロードし、上記の更新された文章が画面に表示されることを確認します

![スクリーンショット 2017-06-04 22.07.00.png](https://qiita-image-store.s3.amazonaws.com/0/125842/4d5b9b12-b554-6ebe-6838-30d8fbddeb3a.png)


- 同様に、後続の４６行め付近からの"one"の文章、５９行め付近の"two"の文章も行末の`<br />`や`</p>`を削除しないように気をつけながら更新します
- [command]＋Sで保存した後、ブラウザでindex.htmlをリロードし、更新された文章が表示されることを確認します。

![スクリーンショット 2017-06-04 22.09.48.png](https://qiita-image-store.s3.amazonaws.com/0/125842/d0abd60e-e118-1e42-45d4-3a304898a425.png)

![スクリーンショット 2017-06-04 22.09.58.png](https://qiita-image-store.s3.amazonaws.com/0/125842/5035abb2-c9b0-1c36-89d2-30929d5bb256.png)


- 画面最下部へスクロールし、"© UNTITLED. DESIGN: HTML5 UP."でhtml５upのcreditが表示されている
ことを確認します 

![スクリーンショット 2017-06-04 22.10.53.png](https://qiita-image-store.s3.amazonaws.com/0/125842/f2f346cc-c150-fac0-df29-ff91bd502eae.png)









# ３．さらに文章を編集していきます
- Atomで[command]+Fで検索窓を表示し、「My Work」を検索します

- ７０行め付近で見つかる部分が「My Work」のセクションで表示される文字列です。末尾の`</p>`を削除してしまわないように注意して更新します

![スクリーンショット 2017-06-04 22.12.35.png](https://qiita-image-store.s3.amazonaws.com/0/125842/611016c3-af8f-00ae-c2d5-54336d213a62.png)

- [command]+Sで保存し、ブラウザでindex.htmlを再表示して結果を確認します


-ちなみに、元々書いてあった「Lorem ipsum dolor sit amet, consectetur... 」のような文章はダミーテキストと呼ばれ、まだ原稿がないウェブページのデザインを検討したりプロトタイプを作成したりする際に用いられます。その音からロレム・イプサムなどと呼ばれることもあります。参照 → [ウィキペディア Lorem ipsum](https://ja.wikipedia.org/wiki/Lorem_ipsum)
- oncolumn.html、twocolumn1.html、twocolumn2.htmlも同様に更新します



# 4. (参考)「Say Hello」メニューからメールを送信可能にする
- 「Say Hello」メニューからメールを送れるようにします。
- デフォルトのメールソフトを使うので、別のメールソフトやウェブ上のメールの仕組みを使用している場合は工夫が必要になります
- index.htmlを開いているAtomで「Say Hello」を検索します。１１３行め付近に見つかります

![スクリーンショット 2017-06-04 22.13.59.png](https://qiita-image-store.s3.amazonaws.com/0/125842/c0e8173f-9020-85e8-b082-0ac380132083.png)






- １１５行めの`<form method="post" action="#">`を`<form method="post" action="mailto:foo@aaa.bbb.com">`のように書き換えることで、「SEND MESSAGE」ボタンを押すとaaa.bbb.comのfooさん向けのメールを送信するようになります（デフォルトのメーラーを使って）

![スクリーンショット 2017-06-04 18.06.34.png](https://qiita-image-store.s3.amazonaws.com/0/125842/974155b1-a1b2-5ba0-41b8-ca8ff05ce58a.png)





-[command]+Sで保存したあと、ブラウザでindex.htmlをリロードし、Say Helloページで「SEND MESSAGE」ボタンを押すとデフォルトのメールアプリが起動されるようになります（あまり使われていないのでは、と思いますが）

![スクリーンショット 2017-06-04 22.14.44.png](https://qiita-image-store.s3.amazonaws.com/0/125842/b36ea899-09c3-b309-19d4-9f9dc706e45c.png)