初めてのワードプレス(13)WordPressを使った写真ブログの作り方

各画像(9枚)の上を「クリック」してみて下さい。詳細を大サイズでご覧頂けます。(なおサイトの仕様上、右クリックで画像を選択できませんのでご注意下さい。)

今回はこんな感じの画像ギャラリーの作り方を中心に、WordPress特有の画像にまつわる話について掲載します。

WordPressを使った写真ブログの作り方のご参考になれば幸いです。

 

目次
1.画像の挿入方法
2.画像の配置
3.キャプションをつける
4.WordPress特有の問題
4-1.色々なサイズの画像が自動生成される
4-2.FTPを使ってアップロードしたメディアをメディアライブラリに認識させる
5.画像ギャラリー(Jetpackを使用)
6.ポートフォリオ

 

1.画像の挿入方法

方法1:新規投稿を追加(または新規固定ページを追加)→メディアを追加

media-1

メディアライブラリ画面が出るので、アップロードするファイルをドロップまたは選択
media-3

投稿に挿入(※お使いのテーマによって掲載例と若干異なる場合がありますが、手順は同じです)
media-4

 

方法2:メディアライブラリ→新規追加
media-2


新規の場合は「メディアをアップロード」(後は方法1と同じ)
既にメディアライブラリーに入っている画像を選択することもできます。
media-5

 

方法3:外部から画像を読み込む場合(メディアライブラリは使わない)

  • 外部の写真共有サービスのソースを張り付ける場合
  • 別サーバーに画像だけ置く場合
  • 写真専用のドメイン(サブドメインimage.example.com等)から読み込む場合

 

2.画像の配置

<img class>で指定します。

配置位置  左:alignleft
例:<img src=”example.gif” alt=”琵琶湖の写真” class=”alignleft” />

配置位置  中央:aligncenter
例:<img src=”example.gif” alt=”琵琶湖の写真” class=”aligncenter” />

配置位置  右:alignright
例:<img src=”example.gif” alt=”琵琶湖の写真” class=”alignright” />

配置位置  なし:alignnone
例:<img src=”example.gif” alt=”琵琶湖の写真” class=”alignnone” />

設定したい画像を選択することで、配置位置を指定することができます。

gazo-haichi

 

3.キャプションをつける

公園の向こうに果てしなく広がる琵琶湖
写真:「堅田で過ごす夏」(2010年8月掲載)より、「夏の色 ~琵琶湖」 
撮影地:滋賀県大津市本堅田、おとせの浜

観覧車
内湖大橋の夕暮れとイーゴス108(2013年9月撮影・滋賀県大津市本堅田2丁目33)

gazo-caption

画像ソースの前後に上記のように captionを指定することで表示させています。

 

4.WordPress特有の問題

4-1.色々なサイズの画像が自動生成される

WordPressは標準(デフォルト)の設定だと、3サイズの画像が自動で作成されます。自動生成を止める場合は、設定→メディア→画像サイズで全て0に設定して保存します。

※テーマによっては、「大サイズ」の「幅の上限」が、テーマで設定されている画像最大サイズの数字を選択しないといけない(0設定できない)場合があります。
media-settei

画像ファイルのサイズ選択
https://www.adminweb.jp/wordpress/media/index8.html

メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Sizes」の設定方法
http://requlog.com/self-branding/wordpress/simple-image-sizes/

 

4-2.FTPを使ってアップロードしたメディアをメディアライブラリに認識させる

FTPを使ってアップロードされた画像等はメディアライブラリとして認識されない問題への対処法です。

FTPを使ってアップロードしたメディアをWordPressに認識させる
http://qiita.com/hyperkinoko/items/0315193188749fdc90f0

※FTPの設定方法(レンタルサーバー毎)については初めてのワードプレス(10).htaccess/TeraPad/FTPソフトで掲載しています。

 

5.画像ギャラリー(Jetpackを使用)

第7回でご紹介した高機能プラグインJetpack(Wordpress.comが配布している公式プラグイン)を使って、ここまでのことができます。

 

WordPressギャラリー(Carousel/カルーセル)

冒頭に掲載したのがこちらです。下記画像の詳細は、画像の上を「クリック」するとご覧頂けます。(サイトの仕様上、右クリックで画像を選択できませんのでご注意下さい。)

***

WordPressギャラリー(Tiled Galleries/タイルドギャラリー)

rectangular(長方形)、square(正方形)、circle(円)などが選べます。先程のカルーセル機能と併用することで、詳細ページへリンクさせることも可能です。

[ gallery type = “rectangular”] rectangular(長方形)

jetpack-gallery-1-1

[ gallery type = “square”] square(正方形)
jetpack-gallery-1-2

[ gallery type = “circle”] circle(円)

jetpack-gallery-1-3

WordPressギャラリー画像の出典:https://en.support.wordpress.com/gallery/クリエイティブコモンズ表示 – 継承 4.0 国際(CC BY-SA 4.0)による許諾を受けて、日本語解説用として使用)

***

Tiled Galleries/タイルドギャラリーの作り方

※Jetpackの機能の一つであるPhotonを有効化することが必要になります。

1.Jetpack⇒設定⇒Writing⇒メディア

  • 「画像と写真をスピードアップ」(いわゆるPhoton)をオン。
  • 「豪華なフルスクリーンのブラウジング体験で画像とギャラリーを表示」をオン。

jetpack-gallery-2-1

jetpack-gallery-2-2

※httpsサイトの場合:Photonはhttps環境下で動作しないため、いずれかの修正が必要です。

 

2. 投稿または固定ページを開きます。新しい投稿や固定ページの場合は、ギャラリーやスライドショーを挿入する前にタイトルを追加して少なくとも一度は保存して下さい。

3. メディアライブラリーに画像を追加します。既にメディアライブラリーに入っている画像を選択することもできます。

4. 画像のアップロードが完了したら、ギャラリーには含めたくない画像をクリックして選択解除することができます。もう一度クリックすると、再び選択できます。
Screen Shot 2015-11-09 at 4.31.13 PM

クリックすると画像に表示される数字は、ギャラリーに表示される順序を示します。

5.すべての画像を選択したら、[ 続行 ]をクリックします。右下にあるギャラリー設定に進みます。

6.次画面に、ギャラリーのプレビューが表示されます。レイアウトドロップダウンを使ってレイアウトを変更し、ライブプレビューを表示することができます。
Screen Shot 2015-11-09 at 4.51.38 PM

7.編集タブを選択して画像を削除し、別の場所にドラッグして順序を変更したり、キャプションを追加することができます。現在選択されているレイアウトに基づいて使用できる次のオプションを編集することもできます。

  • リンク先 :スライドショーには適用されません。
    • 添付ファイルのページ:選択したテーマの画像を表示する、ブログ内の特別なページ。
    • メディアファイル:アップロードされたフルサイズの画像への直接リンク。
  • 列数:表示するサムネイルの列数。 テーマの選択によって影響を受ける可能性がありますので、現在のテーマで少し試してみてください。 このオプションは、スライドショーには適用されません。
  • ランダムオーダー:ギャラリーまたはスライドショーの画像の順序をランダムにするには、このチェックボックスをオンにします。 ページが読み込まれるたびに順序がランダムに変わります。
  • レイアウト:ギャラリーのタイプを指定します。 サムネイル画像のデフォルトギャラリ、長方形タイルのギャラリー、正方形タイルのギャラリー、円形タイルのギャラリー、またはスライドショーです。

8.ギャラリーの編集が終わったら、[ 挿入 ]をクリックします。

※投稿ページのビジュアル編集モードでギャラリーをクリックし、編集アイコン(下記の鉛筆マーク)をクリックしてギャラリーの設定を行うこともできます。

Screen Shot 2015-11-09 at 4.52.28 PM

応用編:ギャラリーのショートコード

ギャラリーショートコードを含む投稿または固定ページを公開または更新した後、ビジュアルエディタはショートコード自体を表示しなくなります。

すでに入力されているショートコードを編集するには、 テキストエディタに切り替えて、コードを表示および編集できるようにします。

タイル張りのギャラリーを挿入するには、「ギャラリー」の後に適切なショートコードの追加を追加します。
type= “rectangular”
type = “square”
type = “circle”

スライドショーギャラリータイプを挿入するには、このショートコードを使用します:
[ gallery type = “slideshow”]

オプション 説明 選択肢デフォルト(標準)設定
イメージを表示するために使用される列の数0より大きい整数(デフォルトの長方形のグリッドには有効ではありません)3
タイプ表示する画像配置のタイプ「サムネイル」、「長方形」、「正方形」、「円」、または「スライドショー」長方形
並べ替え画像の並べ方ID、順序(menu_order)、乱数(ランダム)、タイトル+昇順(ASC)、降順(DESC)順序(menu_order)昇順, ID 昇順
サイズ表示する画像のサイズサムネイル、中、大、フル(デフォルトサムネイルグリッドでのみ有効)サムネイル
自動再生 ページの読み込み時にスライドショーを開始する自動再生する、しない自動再生する
idギャラリーには、その投稿に添付されている画像が表示されます。画像が添付されている投稿IDまたはページIDギャラリーポストを表示
挿入ギャラリーに特定の画像が挿入されますコンマ区切りの添付ファイルID – include = “23,39,45”該当なし (N/A=not applicable)
除外ギャラリーは特定の画像を除外します。 このオプションを使用している場合、他の添付画像はギャラリーに追加されません。カンマ区切りの添付ファイルID – exclude = “24,30,43”該当なし (N/A=not applicable)

注:画像の添付ファイルIDを取得するには、 メディアライブラリに移動して、必要な画像のタイトルをクリックします。 URL( post=後の数字post= )でIDを見つけることができます。
link-image-id

※手順2.以降の日本語訳は、自動翻訳を元に、当サイト管理人(兼松)が用語を中心に修正・補完を行い掲載しました。

※手順2.以降の出典:https://en.support.wordpress.com/gallery/クリエイティブコモンズ表示 – 継承 4.0 国際(CC BY-SA 4.0)による許諾を受けて、日本語解説として使用)

 

6.ポートフォリオ

ここも応用編になるので、導入方法と解説ページをご紹介しておきます。Jetpackが入っていれば、WordPressでポートフォリオを体系的に管理できます。

◆導入方法:Jetpack⇒設定⇒Writing⇒メディア

カスタム投稿タイプの「ポートフォリオ」をオンにする。
jetpack-gallery-2-1

jetpack-gallery-2-3

◆解説ページ サポート<ポートフォリオ|WordPress.com(日本語訳)

◆他にもギャラリーやポートフォリオに対応しているプラグインやテーマがあります。
・プラグイン⇒ Portfolio  Gallery で検索(※機会があれば後日紹介します)
・ポートフォリオ対応テーマ⇒サポート<ポートフォリオ|WordPress.com(日本語訳)で紹介されています。
・ギャラリー対応テーマ・・・機会があれば後日紹介します。


 

次回(第14回)以降は、写真の盗用対策(プラグインおよびサーバーの設定)について掲載していきます。

 


◆初めてのワードプレス(全20回)目次

1)独自ドメイン取得
2)レンタルサーバーの選び方(必要な条件やスペックを考えてみた)

3)サーバーを借りた後、何をどうすればいいか(手順)
4)WordPressをインストールする

5)Edit Author Slugでユーザー名を非表示にする
6)メンテナンス中表示にするComing Soon Page & Maintenance Mode by SeedProd

7)高機能プラグインJetpackの設定方法
8)Akismet Anti-Spamの設定とAPIキー取得方法

9)ワードプレスの設定とテーマの変更・カスタマイズ
10).htaccess/TeraPad/FTPソフト

11)WordPressをドメイン直下に表示する方法
12)固定ページの作り方/レイアウト/メニュー表示(問い合わせページを例に)

13)WordPressを使った写真ブログの作り方(今回)
14)訪問者に配慮しつつ画像文章の盗用対策になるプラグイン3選

15)画像の直リンク禁止と自動コピーサイト作成阻止法(.htaccessで出来る盗用対策)
16)検索に表示したくない画像がある場合の対処法(robots.txtの作成と設置方法)

17)検索エンジンに登録する方法(XMLサイトマップとGoogle Search Console活用法)
18)入れておくといい基本的プラグイン20選

19)圧縮とキャッシュの設定、ログイン画面にアクセス制限をする(.htaccessで出来るSEOとセキュリティ対策)

20)今後の注意点6選(更新・PHPバージョン・バックアップ・パーミッション変更・WordPressの基本形・データベース接続確立エラー)

 

◆番外編(画像4600枚超える写真ブログ、10年目の試行錯誤)

写真ブログの画像だけMixHostから別サーバー(スターサーバー)に移してみました(2017/9/5)

スターサーバーで無料の独自SSLを設定した手順(ネットオウル提供のサブドメインでも可能)(2017/9/5)

レンタルサーバーの話(2017年夏):ロリポップ!無料独自SSL対応、エックスサーバーSSD採用、そしてスターサーバー統合(2017/8/11)

写真サイトに使えそうな新しい独自ドメインが次々登場~.camera.photoから.studioまで(2017/7/3)

10年続く写真ブログ、サーバーをファイアバードからmixhostへお試し移転中です(2017/6/30)

 

◆無料ブログからワードプレスへの移転(無料ブログ側の設定)

無料ブログからWordPressへの確実な引越し~リダイレクトできない無料ブログで行った3つのこと

 

 



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)