はじめて相談室 第32回 たくさんの写真をきれいに並べるには 執筆 #fc0 株式会社エフシーゼロ はじめて相談室 では はじめてＷＥＢ を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターが お答えします こんなこと聞いていいのかな という方大歓迎の相談室です 今回は ホームページの中のたくさんの写真をきれいに並べるには というご相談です おたより こんにちは 息子が入っているサッカーチームの活動記録用のホームページを作るために はじめてＷＥＢに登録し ました 試合の様子のレポートをするためにページの中でたくさんの写真を載せているのですが どうもレイアウト があんまりきれいじゃないというか 間延びした感じがします なんだか縦長になってしまうので 本当はもっとたくさん写真を載せたいのにあまり載せられません 写真って縦並 びにしかできないのですか たくさんの写真をもっときれいに並べる方法があったら教えていただけないでしょうか バタバタママさん ナビゲーターからの回答 バタバタママさん おたよりありがとうございます はじめてＷＥＢ ナビゲーターの立花かずみです サッカーだと人数も多いですし チームのメンバーそれぞれが写っている写真を厳選しても きっ とたくさんの写真がありますよね 活躍の様子をできるだけいっぱい載せたいけど 載せられな い というバタバタママさんのお悩み よくわかります 今回はこのお悩みを フォトギャラリー という機能を使って解決する方法をご紹介します 縦長のレイアウトになってしまうのはなぜ 今回 バタバタママさんが 縦長になってしまう と悩んでいたのは 写真を載せるのに 画像 コンテンツを使っていたか らではないかな と思います
画像 コンテンツでは写真が1枚しか載せられません そして次の画像をさらに 画像 コンテンツで載せようとすると 前の写真の上か下に配置されます このため 図のように写真の周りがスカスカした感じになってしまいます これをバシッと解決して 複数の写真をかっこよく並べられるのが フォトギャラリー です フォトギャラリーって フォトギャラリーを使うと 複数の写真を並べて表示することができます アップロードをするときも複数の写真をまとめて 選択できるので 画像 で1枚1枚載せていくよりも相当手間が省けますね 写真の並べ方のバリエーションも結構いろいろあります 並べ方を設定すると Jimdoがいい感じに写真の大きさなどを 調整してレイアウトしてくれます
たとえばこんな感じのレイアウトができます どうでしょう 画像 コンテンツで並べたものよりもなんだかプロっぽく見えませんか フォトギャラリーの操作の基本 いろいろなレイアウトや設定がありますが 基本操作は共通です まずは コンテンツを追加 から フォトギャラリー を選
択すると フォトギャラリーの設定画面が表示されます 画面構成はこんな感じです ここへ画像をドラッグ のエリアに載せたい複数の写真を一気にドラッグ ドロップすると ドラッグした写真が一度にペー ジに表示され 設定画面の中にも写真の一覧 下図 が表示されます 写真の数によっては 表示までに少し時間がか かるかもしれません 写真の表示順を変えたいときは 設定画面の写真一覧の中で写真をドラッグするだけで簡単に順番を変えることができ ます 写真を削除したいときは 削除したい写真の上にマウスカーソルを持っていき ゴミ箱のボタンで削除します フォトギャラリーの並べ方の種類と使いどころ
並べ方には 縦並び 横並び タイル スライダー の4種類があり それぞれの並べ方の中でさらに細かな設定ができます それぞれの並べ方の特徴についてご紹介しま すね 横並び 縦並び 横向き写真と縦向きの写真を混ぜて並べたいときに便利な並べ方です 横並び は 縦の高さを揃えたレイアウト 縦並び は横幅を揃えたレイアウトです わかりづらいので図で見てみてく ださい 写真が自動的に拡大されたり縮小されたりして 縦横の写真が混在していてもいい感じにぴったり並びます 縦方向と 横方向のどちらか割合が多いほうに合わせるといい感じになると思います 写真の枚数や内容に応じて設定をしてみて ください 縦並び 横並びともに 何枚の写真を横に並べるかの設定ができます 縦並びの場合は 表示サイズ 横並びの場合は 列数 で設定します 横に並べる写真の数が多いほど 写真は小さくなります 初期設定では 拡大表示 にチェックが入っているので 写真 をクリックすると大きい写真が表示されます
タイル 写真を正方形の枠の中で見せる並べ方です オリジナル比率で表示 にする 下図赤枠内をクリックする と 枠の中でオリジナルの縦横比率で表示されるので 上 下左右に余白が空いたような見え方になります これは使いどころがちょっと難しいかもしれないですね 正方形で表示 下図赤枠内をクリック の場合は写真の一部が切り取られます 最近流行の インスタ Instagram も初期設定では正方形で表示されますが 正方形の写真ってなんとなくかっこよく見えたりするんですよね
タイルの設定画面では 表示する写真の大きさの調整や 同じ正方形でもどのように見せるかなど 細かな調整ができ ます スライダー スライダー では写真が紙芝居のように切り替わる設定ができます いろいろな会社やお店のページで見たことがある 方もいるのではないでしょうか トップページのメインとなる写真に使うと効果的です
スライダーの設定画面では 写真切り替えの自動/手動の設定や 自動的に切り替わる場合の速度の調整などができ ます 写真に説明文を入れたいとき フォトギャラリーでは それぞれの写真に対する説明文を入れることもできます 説明文を入れるときは 設定画面の写真 一覧表示を リスト表示 に切り替える必要があります
表示を変えると 設定画面の写真が縦並びの表示に切り替わります こうすることで それぞれの写真に対する説明文を 設定できます キャプションを入力してください のところに説明文を入れます 説明文は 縦並び 横並び タイル のときはそれぞれの写真をクリックして拡大表示をしたときに表示されます ス ライダー の場合は 写真の下のほうに表示されます
フォトギャラリーを使ってたくさんの写真を載せると ホームページをさらにかっこよくできると思います 写真で勝負 とい うホームページを運営している方はぜひチャレンジしてみてくださいね おたよりお待ちしています はじめて相談室 では みなさまからの はじめてＷＥＢ の素朴な疑問をお待ちしています こんなこと聞いたら恥ずかしいかも というご質問大歓迎です はじめてＷＥＢ ナビゲーターがなんでもお答えしちゃいます おまちしてまーす はじめてＷＥＢ でホームページを作成しよう はじめてＷＥＢ のホームページ開設支援サービスとは 7つのステップで簡単に無料で作成がで き さらにその後1年間無料でご利用いただけるサービスです
ホームページ公開の7ステップ はじめてＷＥＢ サービス紹介 次回のコラムを見る» #fc0 株式会社エフシーゼロ JimdoExpert http://fc0.vc/
もっと多くの人に "Webへの入口"を をコンセプトに 中小企業や個人商店をメインとしたWebサイトの企画 制作 運営アドバイスなどの業務を行う また 主に初心者を対象とした講師 執筆も多数 主な著書に デザインの学校 これからはじめるFireworksの本 技術評論社 デザインの学校 これからはじめるDreamweaverの本 同 ああしたい こう変えたいが手にとるようにわかるCSS基礎 共 著 エムディエヌコーポレーション など Copyright 2018 はじめてＷＥＢ All Rights Reserved. https://hajimeteweb.jp/