公開日：12/05/2018
    シェア：

    ExpressionWeb4の使い方③まずは簡単にアルバムを作ってみよう

    　 image
    結婚式や旅行など、撮った写真をいろんな人に配るときに便利なフォトギャラリー。
    実は、ExpressionWeb４を使うと超簡単にこのフォトギャラリーが作れちゃうんです。
    聞くより慣れろ！　ということで早速その方法を見ていきましょう！！

    １.準備するもの

    まずは今回用のフォルダを作っておきます。（仮に「フォトギャラリー」としましょう）
    その中にギャラリーに入れたい写真を入れるフォルダを作ります。（仮に「photo」とします）
    まずはExpressionWebを起動して空白のページを作ります。
    image

    コードが自動的に入った状態でファイルが作成されました。
    image

    もし、コードまたはデザイン表示になっていたら分割モードに切り替えます。
    image



    ２.写真とか文字を入れる

    では、テキストや写真を入れていきまましょう！

    テキスト類を入れる

    まずは、タイトルです。
    image
    緑円のところにタイトルを入れてみましょう。
    すると、自動的にオレンジ枠にもコードが入ります。
    でもよく見ると

    ＜p>～＜/p>ですよね？これはよくありません。
    一般的にタイトル＜h1>～＜／ｈ１＞で囲むからです。

    そこで、入れたタイトルをクリック→テキストの左上のPを右クリック→サブメーニューを表示したら「クイックタグエディタ」をクリックします。
    image
    image
    クイックタグエディターが表示されましたか？この時に「」が表示されていると成功です。
    image
    続いて＜p＞を＜h1＞に書き換えます。（ちなみにh1は一番大きい見出しです）
    image
    書き換えたら緑のチェックボタンをクリックすると・・・
    image
    文字が大きくなりました。

    続いて、その下に一文コメントを入れておきます。（入れなくてもいいですが・・・）
    image
    通常のテキストは＜p>＜/p>で囲んでいていいので、このままにしておきます。

    ギャラリーを入れる枠をつくる

    このながれで写真を入れてもいいのですが、ちょっと一工夫して枠（div）を入れておきたいと思います。
    画面右側にある「ツールボックス」の「div」をクリックしながらテキストの下に移動して離します（ドロップします）
    image
    すると
    の枠が配置されてます。（下の赤丸の部分）
    image
    これで枠の設置は完了です。
    写真を入れる
    さて、いよいよ写真を入れるわけですが、そのまえに一つ準備をしておきましょう、
    ツール→ページ編集オプションをクリックします。
    image
    すると「ページ編集オプション画面」が表示されるので、画像の大きさや、リンクの青枠の太さなどを決めます。
    image
    • 設定→最短の辺→150
    • 線の太さ→チェックをつける→0px
    • 縁にベベルをつける→外す
    設定が終わったら「OK」をクリックして「ページ編集オプション画面」を閉じます。

    ３.サムネイル化する

    さて、いよいよ写真を入れます。
    先ほど入れた
    枠が選択されている状態（オレンジの四角枠）で挿入→画像→ファイルから　の準にクリックします。
    image
    画像選択画面が出てくるので、入れたい写真を選びます。
    image
    ※Ctrlを押しながらクリックすると複数の写真が選択できます。
    選び終わったら「挿入」をクリックします。
    すると画像が挿入されるのですが、画像サイズや量によって時間がかかる場合があります。
    どうしたんだろう？と、むやみに動かすと本当にフリーズするので気をつけてください。
    image
    画像が入りました、サイズが大きいと見きれてしまいますが、ちゃんと入っています、ご安心ください。
    挿入した写真をサムネイル化していきます、ここはちょっとした工夫が必要なので１つずつ順番に操作していきましょう。
    まず、コードの中から
    image
    上のこの例で言えば15行目です。
    みつけたら、その左側にある行数をクリックします。
    image
    （赤丸のところです）
    すると、先ほど入れた写真全て選ばれている状態になります。（コードも緑色で強調されます）
    続いて、デザイン画面側の写真を右クリックしてサブメニューをだしたら「オートサムネイル」をクリックします。
    image
    すると静かに処理が始まります。
    これも時間がかかるので、じっと待ちます。待機です。心配になっても待機です。
    ・・・・・
    ・・・・
    ・・・
    ・・
    ・
    しばらくすると・・・
    image
    ちゃんとサムネイル化されましたね？

    4.表示を整える

    続いて、表示を整えます。これはやらなくてもいいんですが、見やすくしたい場合はぜぎお試しください。
    まずは、＜div＞を整えます。あえて＜div＞を入れた理由がここで明らかになります。
    まず、コードの中の＜/p＞＜div＞（①）をクリックしたら左側のstyle（②）をクリックして、その右側に出てくる□（③）をクリックします。
     「スタイルのの変更」画面が出てくるので、「配置」をクリックしてからwidthを80%にします。
    image
    こうすると、ブラウザの幅に対して80％幅の枠になり、その中に写真が並ぶので、ちょっと見やすくなるらしいです。
    一緒に「align」もcenterにしておきます。それをしてあげると写真が中央に表示されるようになるんです。






    写真を入れた時にスタイルシートも自動生成されたますが、今度は「auto-style1」を右クリックしてからスタイルの変更をクリックしてみましょう。








    さっきと同じ「スタイルのの変更」画面がでくるので「角丸半径」を選んでから20ｐｘを指定します。（オレンジ丸参照）
    image
    これで「OK」をクリックします。
    見た目は変わらないんですが、保存したファイルをブラウザで見るとサムネイルの写真の角が丸まります。

     リンクも入れる

    サムネイルをクリックした問に新しいウィンドウ（タブ）に大きい写真を表示したいですよね？
    まず、サムネイルを右クリックして「ハイパーリンクの編集」をクリックします。
    image

    続いて、ターゲットフレーム→新しいウィンドウをクリックしたらページの基準として設定するにチェックを入れてOKをクリックします。
    image

    ５.完成

    最後に保存してフォトギャラリーの完成です。
    この時にタイトル変更をクリックしてページのタイトルを付けてあげましょう。

    保存する場所は一番最初に作った「フォトギャラリー」です。

    保存（またはOK）をクリックすると画像をどうするか聞いてきます、
    一般的には、専用のフォルダをつくるので、「フォルダの変更」をクリックして、写真用のフォルダ（最初に作ったphoto）に入れてあげます。
    image
    では、ブラウザで見てみましょう。
    「フォトギャラリー」のなかにあるhtmlファイルをダブルクリックします。
    image
    こんな感じになれば成功です！！

    ※最後に追加情報！
    タイトルなどの指定は、ファイル→プロパティ　で指定できます、
    こちらも忘れずに行いましょう！！