みんビズ制作講座 デザインカスタマイズ 全10回 第8回 フォトギャラリーを使ってみよう 執筆 赤間 公太郎 株式会社マジカルリミックス みんビズでは 写真を掲載する際には通常 写真 機能を使用します しかし 写真の点数が多くなればなるほど 管理 も大変になります 多くの写真を扱う場合は フォトギャラリー が便利です みんビズのフォトギャラリーの使い方を見てみましょう フォトギャラリー はどんな機能 フォトギャラリーを使ってみよう HTMLギャラリーフォーマット Flashフォーマット 表示を確認する フォトギャラリー はどんな機能 みんビズで使用できる フォトギャラリー は たくさんの写真を掲載する際に便利な機能です フォトギャラリーには 以 下の2つの表示方法が用意されています HTMLギャラリーフォーマット Flashフォーマット それぞれの特徴を見ていきましょう HTMLギャラリーフォーマット HTMLギャラリーフォーマットは 写真の一覧表が自動的に表示され クリックすると写真が拡大される表示方法です ペー ジ内の情報が少ない場合や 写真を一覧でも見せたいときに便利です HTMLギャラリーフォーマットは 写真が一覧で並ぶ
写真をクリックすると 拡大表示される Flashフォーマット Flashフォーマットは 写真が自動または手動で切り替わっていく スライドショー形式の表示方法です ページ内の情報 が多い場合や 写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポートしておらず 特にPC表示で閲覧した場合は フォトギャ ラリーが表示されない場合があります Flashフォーマットを採用する場合は ユーザーの利用環境にも注意しましょう
Flashフォーマットは スライドショー形式 フォトギャラリーを使ってみよう 見出しや本文などにマウスカーソルを重ね のアイコンをクリックします プラスのアイコンをクリック 出てきたメニューの中から フォトギャラリー をクリックします
フォトギャラリー をクリック 選択 をクリックして パソコン内にある画像を選択します Windowsの場合はCtrlキー Macの場合はcommandキー を押しながら画像を次々とクリックしていくと 複数の画像を選択することができます 選択 をクリック 掲載したい画像を選択したら アップロード をクリックして画像をアップロードします
アップロード をクリック アップロードした画像が表示されます アップロードした写真が表示される Point Dropboxから写真をアップロードすることもできます Dropboxは Web上にデータを保存し 異なる端末や他の ユーザーと共有するためのサービスです 基本的には 無料で使用することができます スマートフォンで撮影した写真をDropboxに保存した場合などに便利です プレビュー で 写真の順番を入れ替えたり サブタイトルをつけたりします
プレビュー クリック後の表示 プレビューでは 以下のことができます 写真をドラッグして写真の順番を入れ替える HTMLギャラリーフォーマットの場合は 拡大表示の際に出るサブタイトルを設定する Flashフォーマットの場合は 表示される写真の上部に出るサブタイトルを設定する 写真にページなどをリンクさせる 写真を90度ずつ回転させる 写真を削除する ここでの プレビュー は 実際の見え方を確認するものではありません プレビューには 一覧表示 と 詳細表示 の2つがあり プレビューをクリックすることでそれぞれの表示に切り替わりま す
クリックすると表示が切り替わるプレビュー 一覧表示では順番を入れ替えることしかできませんが 詳細表示では上記のすべての操作を行うことができます それぞれのボタンで操作できること HTMLギャラリーフォーマットを使用する フォーマットで HTMLギャラリーフォーマット をクリックします
フォーマット で HTMLギャラリーフォーマット をクリック 比率 で サムネイルの比率を選択します 原型比率 縦横比 か 正方形比率 を選択することができます 原型比率では アップロードした写真の比率を保っ たサムネイルが表示されます 縦長の写真は縦長の 横長の写真は横長のサムネイルが表示されます 正方形比率で は 写真が正方形にトリミングされたサムネイルが表示されます サムネイル サムネイルとは 縮小された小さな画像のことです 本来は 親指の爪 という意味です Point アップロードする写真の縦横比率がすべて同じ場合は 原型比率 縦横比 でもきれいに並びますが 縦長の写 真と横長の写真が混在している場合は 正方形比率 を選択するときれいに並びます
比率を選択する サイズ で サムネイルのサイズを調整します + をクリックするとサムネイルのサイズが大きくなり - をクリックするとサムネイルのサイズが小さくなります サイズを調整する スタイル で 写真の枠を選択します
サイズを選択する 写真の枠は フレームなし 小フレーム 大フレーム の3つが用意されているので ホームページの雰囲気に合わせ て選びましょう フレームのサイズを選択する Pinterest で Pinterestで写真を共有するかどうかを選択します Pinterest Pinterestは 写真の共有サービスです ユーザーが気に入った画像を投稿し 共有します 共有された写真はピン ボード風に表示されます
Pinterest で写真を共有するかどうかを選択 Flashフォーマットを使ってみよう 再生速度 を入力します 再生速度は 自動再生 をオンにした場合に 一枚の写真を表示している時間です 再生速度 を入力する サムネイルのプレビュー の表示方法を選択します サムネイルの表示方法を選択する
スライドショーが表示される際に 最初は非表示 か 最初から表示 のどちらかを選択することができます 最初にサ ムネイルを非表示にした場合 画像にマウスカーソルを重ねるとサムネイルが出現します サムネイルの表示方法を切り替えて選択する 最初は非表示 にする場合
最初から表示 する場合 スライドショーを 自動再生 をするかどうかを選択します チェックをオンにすると ページが表示された際に自動的に写 真が切り替わっていきます チェックをオフにすると 写真は自動的に切り替わらず サムネイルをクリックして写真を切り 替えていく形式になります 自動再生 をする場合 チェックをオンにする 表示を確認する 保存 をクリックします
保存 をクリックして保存する ページ右下の プレビュー をクリックして 実際の表示を確認 スライドショーが表示されました HTMLギャラリーフォーマットを選択した場合の プレビュー後の表示
Flashフォーマットを選択した場合の プレビュー後の表示 まとめ フォトギャラリーは 多くの写真を省スペースで表示したい時に使用 ホームページの雰囲気や横幅に合わせて正しく設定 調整を行う Flashフォーマットは 一部の環境では表示されない場合があるので注意 次回のコラムを見る» 赤間 公太郎 あかま こうたろう 株式会社マジカルリミックス 代表取締役CEO JimdoExpert http://www.magical-remix.co.jp/ http://www.kotalog.net/ 宮城県出身 コンピューター系の専門学校を卒業後 仙台のデザイン会社に入社 Webサイトのデザイン コーディングをはじめとし 各種デジタルメディアのデザインに従事 2002年に退職し しばらくフリーランスとして活動 2007年に株式会社マジカルリミックスを設立 社内での業務担当は Webサ イト運用に関するコンサルティング 社内向けITトレーニング セミナー出演 執筆など 2005年より仙台市内の 専門学校において 非常勤講師としてWeb制作の講義を担当 主な著書に HTML5+CSS3の新しい教科書 基礎から覚える 深く理解できる 共著 エムディエヌコーポレーション 基礎から覚える 深く理解できる Webデザインの新しい教科書 同 ああしたい こう変えたいが手にとるようにわかるCSS基礎 同 Copyright 2016 はじめてＷＥＢ All Rights Reserved. http://hajimeteweb.jp/