みんビズ制作講座:デザインカスタマイズ(全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」で写真を共有するかどうかを選択
Flashフォーマットを使ってみよう
「再生速度」を入力します。
再生速度は、「自動再生」をオンにした場合に、一枚の写真を表示している時間です。
「再生速度」を入力する
「サムネイルのプレビュー」の表示方法を選択します。
サムネイルの表示方法を選択する
スライドショーが表示される際に、「最初は非表示」か「最初から表示」のどちらかを選択することができます。最初にサ ムネイルを非表示にした場合、画像にマウスカーソルを重ねるとサムネイルが出現します。
サムネイルの表示方法を切り替えて選択する
「最初は非表示」にする場合
「最初から表示」する場合
スライドショーを「自動再生」をするかどうかを選択します。チェックをオンにすると、ページが表示された際に自動的に写 真が切り替わっていきます。チェックをオフにすると、写真は自動的に切り替わらず、サムネイルをクリックして写真を切り 替えていく形式になります。
「自動再生」をする場合、チェックをオンにする
表示を確認する
「保存」をクリックします。
「保存」をクリックして保存する
ページ右下の「プレビュー」をクリックして、実際の表示を確認
スライドショーが表示されました。
HTMLギャラリーフォーマットを選択した場合の、プレビュー後の表示
Flashフォーマットを選択した場合の、プレビュー後の表示
まとめ
フォトギャラリーは、多くの写真を省スペースで表示したい時に使用
●
ホームページの雰囲気や横幅に合わせて正しく設定・調整を行う
●
Flashフォーマットは、一部の環境では表示されない場合があるので注意
●
次回のコラムを見る »
赤間 公太郎(あかま・こうたろう)
株式会社マジカルリミックス 代表取締役CEO/JimdoExpert http://www.magical-remix.co.jp/
http://www.kotalog.net/
宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを 中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マ ジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売 上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、
執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師とし てWeb制作講義を担当。
主な著書に『10日でSEO&アクセスアップ
Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書
基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科 書』(同)。
[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員
Copyright 2018 はじめてWEB All Rights Reserved.
https://hajimeteweb.jp/