写真をクリックすると拡大表示される Flashフォーマット Flashフォーマットは写真が自動または手動で切り替わっていくスライドショー形式の表示方法ですページ内の情報が多い場合や写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポー

(1)

みんビズ制作講座：デザインカスタマイズ（全10回）

第8回：フォトギャラリーを使ってみよう

執筆：赤間公太郎（株式会社マジカルリミックス）みんビズでは、写真を掲載する際には通常「写真」機能を使用します。しかし、写真の点数が多くなればなるほど、管理も大変になります。多くの写真を扱う場合は「フォトギャラリー」が便利です。みんビズのフォトギャラリーの使い方を見てみましょう。「フォトギャラリー」はどんな機能？ ● フォトギャラリーを使ってみよう ● HTMLギャラリーフォーマット ❍ Flashフォーマット ❍ 表示を確認する ❍

「フォトギャラリー」はどんな機能？

みんビズで使用できる「フォトギャラリー」は、たくさんの写真を掲載する際に便利な機能です。フォトギャラリーには、以下の2つの表示方法が用意されています。 HTMLギャラリーフォーマット ● Flashフォーマット ● それぞれの特徴を見ていきましょう。

HTMLギャラリーフォーマット

HTMLギャラリーフォーマットは、写真の一覧表が自動的に表示され、クリックすると写真が拡大される表示方法です。ページ内の情報が少ない場合や、写真を一覧でも見せたいときに便利です。 HTMLギャラリーフォーマットは、写真が一覧で並ぶ

(2)

写真をクリックすると、拡大表示される

Flashフォーマット

Flashフォーマットは、写真が自動または手動で切り替わっていく、スライドショー形式の表示方法です。ページ内の情報が多い場合や、写真をイメージ的に見せたい場合に便利です。 ※iPhoneをはじめとする一部のスマートフォンはFlashをサポートしておらず、特にPC表示で閲覧した場合は、フォトギャラリーが表示されない場合があります。Flashフォーマットを採用する場合は、ユーザーの利用環境にも注意しましょう。

(3)

Flashフォーマットは、スライドショー形式

フォトギャラリーを使ってみよう

見出しや本文などにマウスカーソルを重ね、「」のアイコンをクリックします。

プラスのアイコンをクリック出てきたメニューの中から「フォトギャラリー」をクリックします。

(4)

「フォトギャラリー」をクリック

「選択」をクリックして、パソコン内にある画像を選択します。Windowsの場合はCtrlキー、Macの場合はcommandキーを押しながら画像を次々とクリックしていくと、複数の画像を選択することができます。

「選択」をクリック

(5)

「アップロード」をクリックアップロードした画像が表示されます。アップロードした写真が表示される Point Dropboxから写真をアップロードすることもできます。Dropboxは、Web上にデータを保存し、異なる端末や他のユーザーと共有するためのサービスです。基本的には、無料で使用することができます。スマートフォンで撮影した写真をDropboxに保存した場合などに便利です。「プレビュー」で、写真の順番を入れ替えたり、サブタイトルをつけたりします。

(6)

「プレビュー」クリック後の表示プレビューでは、以下のことができます。写真をドラッグして写真の順番を入れ替える ● HTMLギャラリーフォーマットの場合は、拡大表示の際に出るサブタイトルを設定する ● Flashフォーマットの場合は、表示される写真の上部に出るサブタイトルを設定する ● 写真にページなどをリンクさせる ● 写真を90度ずつ回転させる ● 写真を削除する ● ※ここでの「プレビュー」は、実際の見え方を確認するものではありません。プレビューには「一覧表示」と「詳細表示」の2つがあり、プレビューをクリックすることでそれぞれの表示に切り替わります。

(7)

クリックすると表示が切り替わるプレビュー

一覧表示では順番を入れ替えることしかできませんが、詳細表示では上記のすべての操作を行うことができます。

それぞれのボタンで操作できること

HTMLギャラリーフォーマットを使用する

(8)

「フォーマット」で「HTMLギャラリーフォーマット」をクリック「比率」で、サムネイルの比率を選択します。「原型比率（縦横比）」か、「正方形比率」を選択することができます。原型比率では、アップロードした写真の比率を保ったサムネイルが表示されます。縦長の写真は縦長の、横長の写真は横長のサムネイルが表示されます。正方形比率では、写真が正方形にトリミングされたサムネイルが表示されます。サムネイルサムネイルとは、縮小された小さな画像のことです。本来は「親指の爪」という意味です。 Point アップロードする写真の縦横比率がすべて同じ場合は「原型比率（縦横比）」でもきれいに並びますが、縦長の写真と横長の写真が混在している場合は「正方形比率」を選択するときれいに並びます。

(9)

比率を選択する「サイズ」で、サムネイルのサイズを調整します。

「+」をクリックするとサムネイルのサイズが大きくなり、「-」をクリックするとサムネイルのサイズが小さくなります。

サイズを調整する「スタイル」で、写真の枠を選択します。

(10)

サイズを選択する写真の枠は「フレームなし」「小フレーム」「大フレーム」の3つが用意されているので、ホームページの雰囲気に合わせて選びましょう。フレームのサイズを選択する「Pinterest」で、Pinterestで写真を共有するかどうかを選択します。 Pinterest Pinterestは、写真の共有サービスです。ユーザーが気に入った画像を投稿し、共有します。共有された写真はピンボード風に表示されます。

(11)

「Pinterest」で写真を共有するかどうかを選択

Flashフォーマットを使ってみよう

「再生速度」を入力します。再生速度は、「自動再生」をオンにした場合に、一枚の写真を表示している時間です。「再生速度」を入力する「サムネイルのプレビュー」の表示方法を選択します。サムネイルの表示方法を選択する

(12)

スライドショーが表示される際に、「最初は非表示」か「最初から表示」のどちらかを選択することができます。最初にサムネイルを非表示にした場合、画像にマウスカーソルを重ねるとサムネイルが出現します。

サムネイルの表示方法を切り替えて選択する

(13)

「最初から表示」する場合スライドショーを「自動再生」をするかどうかを選択します。チェックをオンにすると、ページが表示された際に自動的に写真が切り替わっていきます。チェックをオフにすると、写真は自動的に切り替わらず、サムネイルをクリックして写真を切り替えていく形式になります。「自動再生」をする場合、チェックをオンにする

表示を確認する

「保存」をクリックします。

(14)

「保存」をクリックして保存する

ページ右下の「プレビュー」をクリックして、実際の表示を確認スライドショーが表示されました。

(15)

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基礎』（同）。