ギャラリー作成で記事の見た目をかっこよく!沢山の画像を貼れる設定の仕方 【WordPress編】

ブログ

WordPressには写真を綺麗に表示する機能の「ギャラリー作成」があります。

記事にたくさん写真を貼り付けたい時、そのまま貼り付けていませんか?

 

写真は横方向や縦方向があり、そしてさらにサイズもサイズ比率もあり、そのまま貼り付けると、見た目も並びもバラバラでおかしくなります。色々な方向やサイズなどを一定の表示にすることで、記事の見やすさ、画像の綺麗さが引き立ってきます。

そして、WordPressにはギャラリーの作成がとても簡単できるんです。

 

今日は記事に画像を貼り付けるお話です。

wordpressで画像貼り付けの困った!あるあるの失敗例

写真をたくさん表示したい時があります。

このブログので言えば、「ブログに使うアイキャッチ画像を自分で撮るための写真の被写体と構図【画像多】」です。

構図の説明をするのに、画像を並べてた方がわかりやすいので、画像を多く並べることとなりました。

記事を公開して2日ほどは、残念な表示になっていました。それがこちら↓

 

 

画像の向きが横と縦をバラバラに並べているので、どうしても空白や段差ができます。

調べると、ギャラリー作成というWordPressには標準装備されている機能があります。

 

それでは、ギャラリーを作ってみましょう!

 

wordpressのギャラリー作成の使い方

1.メディアの追加・ギャラリーの作成

 

メディアの追加」 をクリックします。

 

 

 

左上にある「ギャラリーの作成」をクリックします。

 

2.画像を選択する

 

画像を選択します。

ギャラリーに入れたい画像を全て選びます。選択すると、画像一覧の下に表示されていきます。

 

 

全部選択したら、右下の「ギャラリーの作成」をクリックします。

 

3.ギャラリーの編集をする

 

 

選んだ画像の一覧と、右側にはギャラリー設定が表示されます。

 

ギャラリー設定をする

 

リンク先 : 「添付ファイル」「メディアファイル」「なし」

カラム : 1~9 横並び表示での列数の設定です。3にすると、画像が3列に並びます。

ランダム : 画像の表示順がバラバラになります。

サイズ : 「サムネイル」「中」「大サイズ」「フルサイズ」 画像表示のサイズを選びます。

タイプ : 「サムネイルグリット」「タイルモザイク」「正方形タイル」「丸型」「タイルカラム」「スライドショー」から選択します。

 

タイプ別表示例
サムネイルグリット

初期設定されているサムネイルグリットです。

 

タイルモザイク

こちらは「ランダム」設定しています。

画像の方向などで、並びやギャラリーサイズが変わってきます。

 

正方形タイル

画像の縦横が関係なく正方形に表示されています。画像の端が切れます。

 

丸型

画像が丸くくりぬかれて表示します。

 

タイルカラム

タイルモザイクと似ていますが、範囲の中に収まって表示されます。

 

スライドショー

スライドショーで表示します。

 

4.選んだ画像の設定をする

 

 

選んだ画像の設定をします。

画像を選択すると、ギャラリー設定の下に選んだ画像の詳細が表示されますので、入力していきます。

 

タイトル : アップロードした時の画像名。入力しなおします。

キャプション : 画像下など一覧表示の時に表示されるテキスト。

代替テキスト : 何かの問題で画像が表示されなかった時に表示されるテキスト。

説明 : 画像の説明です。

 

全てきちんと入力することで、ギャラリーが見やすくなります。

どこで撮影したのか、どういう意図で撮影したのかなどを説明に入れると、撮影者の気持ちが伝わります。

 

 

全ての入力が終わると、「ギャラリーの挿入」をクリックします。

 

5.ギャラリーの変更や修正

 

 

ギャラリーを設定した後に、編集や変更をしたい場合は、ギャラリーの上にカーソルを持ってきてクリックします。

「編集」「×(削除)」のボタンが表示されるので、編集をクリックします。

 

注意

テーマにより表示が変わります。

サムネイルグリットが一番分かりやすいですが、画像に枠があったり、影が出来たりとテーマの仕様により変わるのでご注意下さい。

 

まとめ

プラグインを入れないと、写真を綺麗に公開することはできないのか・・・と思っていましたが、WordPressでは標準で綺麗に画像を表示する機能があります。

タイプを変えるだけで、イメージもぐんと変わります。

簡単で綺麗に画像を表示できるので、色々と使っていきたいですね。

 

 

 

コメント