スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第8回 フォトギャラリーを使ってみよう

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

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

執筆:赤間 公太郎(株式会社マジカルリミックス)

2013年3月6日更新

  • このエントリーをはてなブックマークに追加

閲覧数10,700views

このコラムをPDF形式でダウンロードする

みんビズでは、写真を掲載する際には通常「写真」機能を使用します。しかし、写真の点数が多くなればなるほど、管理も大変になります。多くの写真を扱う場合は「フォトギャラリー」が便利です。
みんビズのフォトギャラリーの使い方を見てみましょう。

  • 「フォトギャラリー」はどんな機能?
  • フォトギャラリーを使ってみよう
    • 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フォーマットは、一部の環境では表示されない場合があるので注意
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

10日でSEO&アクセスアップ Jimdoデザインブック

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-
  • 15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2016/9/18~2016/9/24]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

    中小企業・小規模事業者の経営者と経理担当者のための経理サポートサイト