Photo Galleryの使い方の解説 【前回の続き】

スポンサーリンク

前回、Photo Galleryでポートフォリオを作ってみる!フォトギャラリーを作ってみる?PhotoGallalleryの機能についてお話しましたが、

実際の使用方法については全く触れなかったですし、
ネット検索をしてもわからない部分もあったので
実際に使用して使い方の解説をしてみます(`・ω・´)ゞ

スポンサーリンク

主に使うのは2つの項目!

前回も言いましたが、主に使うのは
ダッシュボードに表示されたPhotoGalleryカテゴリーの

  • AddGallerise/Images
  • GenerateShortcode

です。

 

Albums、Tags、Optionsなども使うかもしれませんが、
とりあえずこのページでは触れません(次回以降に書きます(`・ω・´)ゞビシッ)

 

新しいギャラリーを作成しましょう

3.フォトギャラリーのカテゴリーAddGalleries/Imagesをクリックすると

4.ギャラリー新規作成ギャラリー新規作成画面になるので「Add new」をクリックして新しいギャラリーを作成しましょう!

 

まずはギャラリーの初期設定!

5.新しいギャラリー作成画面PhotoGalleryとは新しいギャラリーを作成する為のCreate new galleryという画面が開きましたが、
色々項目があって難しいですね(´ε`;)

Name:
ギャラリー名を入力します。
登録したい画像に関連する名前にすると良いかもしれませんね。

Slug:
ギャラリーURLに反映される文字です。
入力する必要はないと思いますが、どうしても入力したいならアルファベットにしましょう。

日本語を入力すると記号になってしまいます(´ε` )

Gallerycontenttype:

  • Standard
  • Instagram only

から選べますが、「Instagram only」はインスタグラムの画像を共有できる有料版で使える機能です。

Description:
フォトギャラリーと一緒に公開されるテキスト内容です。
記入しなくてもOKです!

Author:
ユーザー設定で入力したあなたの名称です。

Published:
公開・非公開の設定です。

Preview image:
ギャラリーを作成した際に、どのギャラリーにどんな画像が入っているかを識別する為の画像です。
画像を入力(選択)しなくても大丈夫です♪

 

いよいよギャラリーに画像を挿入します。

「Adding Images」をクリックすると画像を挿入する為のウィンドウが開きます。

6.Uploadfilesで画像を挿入

開いたウィンドウの「Upload files」をクリックした後、

7.画像をドラッグ&ドロップで挿入

Drag files here or click the button below to upload files
の画面になるので、

クリックして画像を選ぶか、ドラッグ&ドロップをする事で画像をアップロードしましょう。

8.アップロードした画像をギャラリーで使うかどうか

必要な画像をアップロードしたら・・・

必要な画像が少ない場合は
必要な画像をダブルクリック

全ての画像が必要な場合は
左下の「Select All(全てを選択)」をクリックしてから
「Add selected images to gallery」をクリック

これでCreate new galleryに画像が挿入されて、

14.元々はCreatenewgalleryだったのに 下赤矢印 14.Editgalleryに変化していますCreate new galleryだった文字がEdit galleryになりましたね。

 

画像をアップロードする前にフォルダを作成すると便利だよ

画像をアップロードする方法を説明してしまいましたが、
画像をアップロードする前にフォルダを作成しておいた方が断然便利です。

画像をアップロードする前にフォルダを作成しておかないと後々の管理でかなり不便ですからね( ̄▽ ̄;)

 

私は2時間ほど無駄にしました゚(゚´Д`゚)゚

 

画像をアップロードする前に

  • フォルダ作成
  • 画像の名前の変更

くらいはしておきましょう。
(後から名前を変更するのも、かなり大変です(´Д`;))

 

PhotoGalleryのフォルダ作成方法

Create new galleryAdd Imageを選ぶ所まではアップロードするときと同じです。

9.photogallery内のフォルダ作成

左上のフォルダマークをクリックすると

10.photogalleryの名前を入力

Enter directory name(フォルダ名)の入力画面が出ますのでフォルダ名を入力してOKをクリックします。

11.photogalleryでフォルダを作成できました

フォルダが出来ました。

 

12.作成したフォルダに画像を追加できました

画像の格納フォルダを変えるとURLも変わってしまうので
投稿ページや固定ページを作成した後にフォルダを変えると閲覧者からは画像が見えなくなりますヽ(´Д`;)ノ
(サーバーからは消えないけど、サイトからは消えます)

 

なので、フォルダを作成してから画像をアップロードするか、
フォルダを作成せずに画像をアップロードするかは、
後々のフォルダ移動作業の事を考えた上でアップロードしましょう!

ギャラリーに表示される画像一覧が表示されました

アップロードした画像(ギャラリーに使いたい画像)を選んでAdd selected images to galleryをクリックすると、

13.ギャラリーの為に選んだ画像一覧が表示された

Edit galleryに選択した画像一覧が表示されました。

ここでもある程度の編集が出来ます。

Crop:トリミング
Edit:画像編集
Reset:編集した画像を元に戻す

Alt/Title
表示されるタイトルの変更が出来ます。

Description
撮影についての説明(カメラ情報など)が表示されますが、変更も出来ます。

Tags
事前に作成したタグを設定する事ができます。
もちろん後からも変更出来ます。

Published
クリックするだけで公開・非公開の設定ができます。

Delete
ギャラリーに追加した画像を消す事が出来ます。

Cropはさくらサーバーとは相性が悪いんですかね?
私は使えませんでした(;´∀`)

Add Images以外の機能

Edit galleryページではAdd images以外にもいくつか機能があります。

Embed Media
YouTube、Vimeo、Instagram、Flickr、DailymotionなどのメディアをURLで埋め込む事が出来ます。

Bulk Embed
インスタグラムなどから複数の画像を追加出来る有料版の機能です。

Select All
追加した画像の左にあるチェックボックス全てにチェックを入れる事が出来ます。

Show order column
Hide order column
クリックすると「Show」と「Hide」が入れ替わるんですが、「Show」の状態だと追加した画像の左に十字の矢印が表示されます。
この状態だとドラッグ&ドロップで画像の順番を変える事が出来るようになります。

Hideだと表示されないし、ドラッグ&ドロップで動かす事も出来ません。

何の為にある機能かわかりません( ̄◇ ̄;)

Set Watermark
ダッシュボードのPhotoGalleryにOptionがありますが、
3.フォトギャラリーのカテゴリー
このOptionで設定したウォーターマークを、選択した画像に付ける事が出来ます。

※ウォーターマークとは?
右クリックで画像が保存された時に自動で付く“すかし”のような物です。

Resize
選択チェックした画像のサイズを変える事が出来ます。

Recreate Thumbnail
選択チェックしたサムネイルの、編集設定を元に戻せます。

Reset
選択チェックした画像の設定を全てリセット出来ます。

Add tag
選択チェックした画像すべてに事前に作成したタグを付ける事が出来ます。

Publish
Unpublish
選択チェックした画像すべての公開・非公開が設定出来ます。

Delete
選択チェックした画像すべてを削除することが出来ます。

 

準備が出来たら右上のSaveをクリックしましょ

それではさっそく、
15.seveしましょうギャラリー画像の登録準備が出来たら右上にあるSaveをクリックしましょう!

16.ギャラリーズに追加

ギャラリーが追加されました!

 

あとはショートコードを作成して貼り付けるだけ!

あとはショートコードを作成して固定ページや投稿ページに貼り付けるだけです。

あとは3.フォトギャラリーのカテゴリーGanerate Shortcodeをクリックして、

様々な設定を後に左下のGenerateをクリックするとショートコードが表示されるので、
そのショートコードを固定ページや投稿ページに入力すると、ギャラリーが公開されます。

 

 

あまりにも長文になってしまったので、
詳しいお話はまた次回以降の更新で紹介します(*´∀`*)/

PhotoGallery使用例はこちら

ブログランキングに参加しています。

共感できればクリックお願いしますm(_ _)m

3 Responses to “Photo Galleryの使い方の解説 【前回の続き】”

  1. はじめまして。検索からたどり着きました。
    photo galleryのギャラリーをスマホに対応させる方法がわからないのですが、どのように設定をされてますか?
    どうしても横幅がはみ出てしまい困っています;;
    なにとぞご教授願います。

コメントを残す

*