自由自在!WordPress上級

標準ギャラリーを使う

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
WordPressに標準で用意されているギャラリーはさまざまなカスタマイズが可能です。ギャラリーのカスタマイズについて解説します。
講師:
07:13

字幕

このレッスンでは WordPress の 標準ギャラリーの使い方について学習します WordPress には 標準のギャラリー機能というのが付いています ギャラリー機能を使えば複数の画像を ひとまとめにして表示することができます それでは管理画面から 設定してみたいと思います 「投稿」の一覧画面から 編集する投稿を選びます 「メディアを追加」をクリックすると 「ギャラリーを作成」という メニューがありますのでクリックします そうするとアップロードされている 画像が表示されますので このように選択をしていって ギャラリーを作成していきます プルダウンからは この投稿でアップロードした 画像だけを選択することもできます 二回クリックすれば 選択が解除されます ギャラリーに追加した画像は 下に表示されますので ここから並び替えを行うこともできます 画像が選択できたら 「ギャラリーを作成」をクリックします ここでも画像の並び替えができます またそれぞれの画像に キャプションを付けることもできます こんな感じですね 「ギャラリーの設定」では 画像をクリックした時に どこにリンクさせるかと カラムの数を選択することができます また画像をランダムで 表示したい場合には 「ランダム」にチェックを 入れることができます すべての設定ができたら 「ギャラリーを挿入」ボタンをクリックします そうすると 本文欄にギャラリーが追加されます この独特な技法を ショートコードというふうにいいます ビジュアルエディターにした場合には ギャラリーが追加されてることがわかる アイコンが表示されます ギャラリーの前後には 普通にテキストを入力することもできます このように追加できます それでは実際に 表示を確認してみたいと思います このように自動的にサイズも縮小されて ギャラリーが表示されます キャプションも自動的に表示されます このギャラリーの部分がどのような HTML で 出力されているのかを確認してみます この部分ですね gallery というクラス名のついた div の中に dl タグで一つ一つの画像が 表示されているのがわかります それぞれの dl タグの中には 画像とキャプションが dt タグと dd タグで表示されています この部分に対する CSS を書いていけば デザインなどを変更することもできます さきほど ギャラリーを追加した時に見た ショートコードなんですが いくつかオプションを設定することもできます 日本語の公式サイトで見てみます ギャラリーショートコードの使い方 というページに ギャラリーのショートコードに関する 様々な説明が書いてあります 例えば columns というのを指定すれば ギャラリーのカラム数が変更できます それから size というのを指定すれば 表示する画像のサイズが指定できます 今 ちょうど画像は サムネイルの サイズを使って表示されていますので これを変更してみたいと思います この中にスペースを空けて size="medium" としてみます これで中サイズの― 画像が表示されます 中サイズで指定した画像が表示されました ただし 今カラム数が多いので 自動的にそれぞれ 縮小されて表示されています これは twentytwelve の スタイルシートに書いてある この max_width というところで 設定されています ここですね このようにスタイルを切ると 実際にミディアムのサイズで表示されました このようにギャラリーと スタイルシートを組み合わせることで 画面の大きさや画像のサイズに関係なく デザインした通りの 表示を行うこともできます ギャラリーは 本文欄に ショートコードを入れて表示するのですが テンプレートタグを使って 表示することもできます テンプレートファイル内で 直接ギャラリーを出力する方法として do_shortcode というタグを使って ギャラリーのショートコードを直接書いて 画面に出すようにすることもできます このようにすれば本文欄に ギャラリーのショートコードを 記入する必要がありませんので WordPress にあまり慣れてない人が サイトを運用する場合にも ギャラリーだけを作成して 置いてもらえれば 出力の部分はテンプレートファイル上で 行うようにすることができます このレッスンでは WordPress のギャラリー機能を使った 画像の表示について学習しました

自由自在!WordPress上級

このコースではWordPressを利用したさまざまな種類のサイトを構築しながら、より実践的なテクニックを解説します。コースの前半はカスタムフィールド機能などについて説明しながら、後半では自由度の高いサイト構築が可能になるマルチサイトについても学習します。

3時間17分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年03月05日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。