ワードプレス

WordPress写真ブログでスマホ対応のフォトギャラリーページを作る方法

更新日:

写真ブログ

ブログの運営に写真は欠かせなくなっています。当ブログ「自分メディアの育て方」でもこのところ写真・カメラに関する記事が増えてきています。ブログのタイプ的には「写真ブログ」となります。

フォトギャラリー

どこかへ行った時の写真をまとめてギャラリー風に掲載したい。ということもあると思います。旅ログとかグルメレポートとか商品レビューなんかでも使いたい時があります。例えば下のような感じです。

写真にマウスオーバーするとキャプションが表示されます。

マウスオーバー

そしてクリックすると大きめの写真が開きます。

カルーセル

先日も京都 藤森神社の紫陽花まつりのレポートを書きましたが、その時にも使っています。

 京都 藤森神社の紫陽花まつり 2015

レスポンシブルなスマホ対応なのでスマホやタブレットで見ても問題なく表示されます。

WordPress プラグイン JetPack

これを手作業でやろうとすると、とんでもなく面倒です。プラグインを使って簡単に実現できるのです。

 WordPress JetPack は欲しい機能いっぱいの詰め合わせプラグイン。
 WordPressではじめる写真ブログ、おすすめプラグインまとめ。

こちらの記事でもご紹介している「JetPack」というプラグインを使います。JetPackは1つでたくさんの機能が詰まっています。その中の「タイルギャラリー」と「カルーセル」を有効化して使います。

タイルギャラリーの使い方

タイルギャラリーは通常の投稿ページでも固定ページでも使えます。新規追加を開いて[メディアを追加]ボタンをクリックしてください。

新規投稿を追加

開いたら「メディアを挿入」から「ギャラリーを作成」に切り替えます。

ギャラリーを作成

写真ファイルの選択

[ファイルをアップロード]で使いたい写真をアップロードするか[メディアライブラリ]から写真を選択してください。右下の[ギャラリーを作成]ボタンをクリックするとギャラリー編集画面に変わります。

ギャラリー編集画面で写真の並び替えとキャプションを記入します。各写真はドラッグすると移動できます。キャプションの文字はマウスオーバーの時に表示されます。必要なければ無記入でもOKです。

ギャラリー編集

ギャラリーの設定

ギャラリーの表示形式がいくつかあります。どの形式かを設定します。

サムネイルグリッド
サムネイルグリッドは一覧表カタログのような形式です。なぜかうまく表示できないので使っていません。
タイルモザイク
モザイク状に画像サイズを調整して四角く整形してくれます。よく使う形式です。
正方形タイル
正方形の画像にトリミングして整形してくれます。インスタグラムの写真をまとめるのに使えそうです。
丸形
正方形タイルの丸形版です。あまり使うことはないです。
タイルカラム
タイルモザイクと同様ですが、写真サイズの大小の差が大きくなります。写真が小さくなっても良く、コンパクトにまとめたい場合はこちらを使います。

ギャラリー設定

ブログで旅ログ、グルメレポート、商品レビューをよく書くという人は使ってみてはいかがでしょうか。

フォトギャラリーの幅が記事と揃ってなくて困ったひとはこちらの記事もどうぞ

 WordPress JetPack タイルギャラリーの横幅を変える方法。

Webデザイナーでなくても、さっと使える教科書が机に一冊置いてあれば助かるかも。

今日も元気に楽しく♪

ワードプレスを使いこなせるテンプレートWING AFFINGER5|凄い特典付き 5/15迄

WING AFFINGER5

当ブログでも利用しているワードプレス用のテンプレートです。

WING AFFINGER5 をおすすめする理由

  1. ブログへの訪問者増減に大きな影響力を持つグーグルなどの検索エンジンで、上位表示するための対策に効果的な機能がたくさん搭載されています。
  2. 検索エンジンで上位に表示されるだけではなく、収益化に結びつくことを意識しなければブログ運営は成功とはいえません。収益化に効果的な機能が豊富です。
  3. スマホでの表示速度が読者への満足度を左右します。そのために、検索エンジンのグーグルが推奨するAMP化。記事ごとにAMP化を選択可能なのが WING AFFINGER5 の強さでもあります。

WING(AFFINGER5版)

プロフィール

畑本伸一

 奏でる写真作家| 畑本伸一
1969年 大阪市生まれ 京都市在住。写真作家|写真は音を奏でるだろうか。そんな事を考えながら写真を撮っています。デジタル写真教室 講師フォトマスター検定1級写真印刷ツールデザイン制作|写真・カメラ・Webメディアに関する執筆。  共著:Pinterestビジネス講座(翔泳社出版)  詳しいプロフィール
 Facebook  Twitter  Instagram  Google+ RSS Feedly

PickUp

見上げる桜 1

トップページの記事一覧に表示されているサムネイル画像を大きくしたいと思いませんか? 当ブログで利用しているワードプレステーマを WING - AFFINGER5 に変えて数日が経ちます。多くの事が管理 ...

京都 円山公園の桜|2018.3.28 2

当ブログでも採用しているワードプレスのテーマ「AFFINGER」の最新版「AFFINGER5 WING」の公開及び販売が始まりました。今回も大幅に機能アップや高速化が図られている模様です。早速購入。AFFINGER4購入者は期間限定でお買い求め安くなっています。

-ワードプレス
-, , , ,

Copyright© フォトクリエイティブ|写真のある暮らし , 2018 All Rights Reserved.