たくさん撮りためた写真を整理して、フォトギャラリーを作成しててみましょう。 simpler2-69 基本色 black 教室試作サイト http://c15.seta.red 2016-8-27

full1

たくさん撮りためた貴重な撮影画像を整理して、写真ギャラリーを作成しててみましょう。ワードプレスを使えば簡単に写真ギャラリーのサイトを作成できます。

写真の大きさを調整しよう

まずはとりためたデジカメやiPhoneの写真ファイルをWeb用に加工(リサイズ)して使いやすくしましょう。
面倒な解説を省き、誤解を恐れず定義すると、すべての写真の横幅を1000pxに統一してしまうのです。
通常デジカメやiPhoneの写真は横幅が4000px以上あって、Webで処理するには大きすぎますので、これをホームページで使用するのに適した大きさに縮小(リサイズ)します。ただし、縦横比はそのままで変更しません。

※pxとは:ピクセルと言い、コンピュータで画像を扱うときの最小単位、写真画像の大きさを表します。

ハイビジョンモニタ・・・物理的な解像度 :横1,920 × 縦1080px 
iPhone 6 Plus・・・ブラウザサイズ:414 × 736px 物理的な解像度 :1,080 × 1,920px 解像度、401ppi、5.5インチ
iPhone 6  ・・・ブラウザサイズ :375 × 667px 物理的な解像度 :750 × 1,334px  解像度、326ppi、4.7インチ
iPhone 5系 ・・・ブラウザサイズ :320 × 568px 物理的な解像度 :640 × 1,136px  解像度、326ppi、4インチ

写真ギャラリーのプラグイン「Foo Gallery」

写真ギャラリーを作るには、サーバーにワードプレスをインストールします。使用するテーマは軽くて使いやすいものがいいですね。
※ここではシンプラーを使いました。simpler2-61 基本色 steelblue
また、写真ギャラリーのプラグインとして「Foo Gallery」を使います。このプラグインは、操作も分かりやすく、いろいろ細かい調整もしやすいです。
このプラグイン単体だと、Lightbox機能が動作しないため「Foo Gallery」プラグインと併せて「FooBox Image Lightbox」も同時にインストールします。

FooGalleryから写真を追加します

プラグインを有効化すると、ダッシュボードの左側に「Foo Gallery」の項目が新たに追加表示されます。
まずは「Add New Gallery」から、ギャラリーを新規作成します。
ギャラリーのタイトルは、管理しやすいお好きなタイトルを入力してください。
あとはGallery Items から写真のアップロードします。
次に、Gallery Setting からギャラリーテンプレートの選択をします。無料版では5パターンのギャラリーデザインが選べます。
各設定がすんだら、作成したギャラリーのショートコードを表示したいページにペーストします。
詳しい使い方はこちらを参照してください。

5種類のGallery Templateが用意されています。

1.Responsive Image Gallery(デフォルト)
レスポンシブに対応した、使いやすいデザイン。サムネイルの枠線のテイストや四角い窓は丸い窓か選べます。
サムネイルのサイズも変更できるので、どんなサイトのデザインに合わることが可能です。
2.Masonry Image Gallery
サムネイルの横幅を統一して、希望の表示幅で整頓して表示されます。Masonry(メイソンリー)とは石造建築のこと。
オンマウスで、サムネイルがズームさせるかさせないかも選択可能。スマホ表示も最適化してくれます。
3.Simple Portfolio
シンプルにサムネイル一覧のデザインです。画像アップロード時に、「キャプション」「説明」に書いたテキストが、そのままテキスト表示されるので商品リストに最適です。
4.Justified Gallery
横の列に揃うように自動的に敷き詰めて表示してくれます
5.Single Thumbnail Gallery
ページ上に一覧は表示せず、lightboxで表示させるようユーザーに促します。

Extensionsで追加したGallery Template(無料)

6.Polaroid Template(街並み)Polaroid Template
ポラロイドカメラで撮ったような画枠で表示されます。
7.Qwl Carousel Template(街並み2)Qwl Carousel
クリックすることによりカルーセルの動作で左右に移動します。Carousel(カルーセル)とは回転木馬のこと。

アルバムの作成