a-siteの提供するフォトギャラリーを利用する際の画像の追加方法などをお知らせいたします。
下記の手順に従って、画像を追加してください。
なお、本マニュアルは、ギャラリーページトップに、カテゴリーごとのサムネイルと簡単な説明文を表示させ、「続きを読む」を押すことで、各ギャラリーに移動させる作りとしております。
ご自身の環境に合わせて、該当する部分をご利用ください。
なお、ワードプレスへの投稿の追加は、「ビジュアルモード」と「テキストモード」がありますが、今回は「テキストモード」でご説明いたします。
- ワードプレス管理画面の左にある「投稿」をクリックし「新規追加」をクリック
- 投稿画面が表示されたら、サムネイル画像を追加
投稿画面が表示されたら、ギャラリーの名前を入力し「メディアを追加」ボタンとクリックし、画像を追加してください。ここで追加した画像が、ギャラリートップのサムネイル画像となります。 - サムネイル画像をドラッグ＆ドロップ
上部の「ファイルをアップロード」のタブが選択されると、ドラッグ＆ドロップボックスが表示されます。サムネイルに使う画像を一つドラッグ＆ドロップしてください。
なお、ここで使用する画像は、他のギャラリーのサムネイルと同じ縮尺の画像を選択した方がキレイに作ることができます。縦横比を４:３など、あらかじめ決定して画像を追加してください。
ここでは、横長の画像を選択して、追加するようにします。 - 「投稿に挿入」ボタンを押して追加完了
画像のアップロードが完了すると、右下に「投稿に挿入」ボタンが出てきますので、アップロードしたファイルにチェックがあるか、また投稿する際の設定が正しいかを確認して「投稿に挿入」ボタンを押してください。
タイトル・説明・キャプションなどの情報は、入力する必要はありませんが、入力するとより多少検索に強くなりますので、お時間があれば、記入しても良いでしょう。
また、表示設定は、「配置：左」「リンク先：メディアファイル」「サイズ：中」に設定してください。
なお、サイズに関しましては、サイトのデザインによって、若干変わりますが、「中」を選択していただければ良い様に、作るようにいたします。 - 挿入されるHTMLを確認
正しく画像が挿入されると、上記のようなHTMLが追加されます。 - 画像の説明文章を入力し、「続きを読む」で分ける部分を設定する
画像挿入のHTML直後より、ギャラリーを装飾する文章を入力していただきます。そして、ギャラリートップで「続きを読む」を表示させたい部分に「more」ボタンによって、タグを挿入します。 - 「メディアを追加」からギャラリー画像を追加
装飾文章が書き終わったら、ギャラリーのサムネイルを追加したい部分にカーソルを合わせて「メディアを追加」ボタンを押して、画像を追加してください。 - ファイルをアップロードを選択する
「メディアを追加」を押した後、表示される画面が「ファイルをアップロードする」画面でなかった場合は、「ファイルをアップロードする」を選択し、ドラッグ＆ドロップ画面を表示させてください。 - ギャラリーに追加したい画像をドラッグ＆ドロップする
ギャラリーに追加する画像をドラッグアンドドロップしてください。その際、サムネイルで使用した画像は、後ほど選択できるので、アップロードする必要はありません。 - アップロード確認後、左上の「ギャラリーを作成」を押して、ギャラリー追加画面へ
全ての画像のアップロードを確認したら、左上の「ギャラリーを作成」を押して、ギャラリーを作成してください。画像それぞれの細かい設定は、必要ありませんが、入れることで多少のSEO効果があるかも知れません。 - 右下の「ギャラリー追加」ボタンを押して、基本ギャラリーを作成
ここでも各画像の詳細情報の入力が可能です。ここでの「タイトル」を入力することで、画像がポップアップ表示された際の、画像の説明が入るようになります。特に必要なければ、そのまま「ギャラリーを作成」ボタンと押して、次に進んでください。 - 画像の並べ替えをして、「ギャラリーを挿入」を押す
ギャラリー挿入の最終画面です。レイアウトは後ほど設定するので、ここではそのまま進んでいただいて結構です。ここでのキャプションは、ポップアップ時に表示されます。また、画像を表示させる順番を変更される場合は、画像をドラッグ＆ドロップして、順番を変更してください。 - ギャラリーのパラメータの確認
ギャラリー画像を表示させるパラメータを確認してください。こちらの内容では、先ほどアップロードさせた画像がサムネイルとして表示される設定になっております。確認して次に進んでください。 - カテゴリーを選択して「公開」、そして確認
ギャラリーを表示させるパラメータが正しい場所に出ているかを確認して、「公開」します。公開前に「カテゴリー」にチェックを入れることで、ギャラリートップにの所定の場所に表示されるので、本番環境より確認してください。
この状態で公開されたギャラリーは、それぞれの写真をクリックすると、各ページにジャンプする作りになっておりますので、この後ギャラリーの環境を設定します。 - ギャラリーのプロパティの変更
本番環境での確認が終わったら、ギャラリーのプロパティの設定を行います。先ほど設定したパラメータ部分をドラッグし、反転させた状態で、左の「チェックボタン」を押して、全ての画像にチェックを入れます。チェック確認後、青い「Insert a gallery」ボタンをクリックすると、パラメータが変わります。「full画像ファイルにリンクさせ、画像は１行６個配置する」設定になっているか確認できたら「更新」ボタンを押して作業終了となります。 - 本番環境で、ギャラリーがしっかり表示されているか確認
正しく設定されると、上のようにサムネイルが表示されます。この場合、１行６列の設定になっていますが、デザインによっては、数や大きさが変わる可能性があります。 - ポップアップの確認
ギャラリーの表示の確認が出来たら、ポップアップの確認をしてください。画像に直接リンクされる設定になっていると、上の画像のように、画像がポップアップ表示されます。
画像の左右の端にポインターを合わせることで、画像を移動することが可能です。 - 全ての設定が完了
これで、すべての設定が完了です。
