WPギャラリーの作り方

NO IMAGE WordpressTips

WordPressギャラリーの作り方[1]メディアの追加

「メディアを追加」を選びます。 新規投稿画面で「メディアを追加」を選びます。 左メニューで「ギャラリーを作成」を選び、右のタブを「ファイルをアップロード」に切り替えます。 写真をドロップして追加します。 ギャラリーに入れる写真を(複数枚)選んでドロップします。 追加した写真にチェックが入っていることを確認し、「ギャラリーを作成」ボタンを...
2018.10.17
NO IMAGE WordpressTips

WordPressギャラリーの作り方[2]ギャラリーを挿入

ギャラリーを挿入ボタンをクリック 設定を終えたら「ギャラリーを挿入」ボタンをクリックします。 コードを確認 本文を書き込む箇所にギャラリーを挿入するコードが入っていることを確認します。 「[gallery」から始まり「"]」で終わるのがギャラリーのコードです。 内容は書き換えたり、削除しないよう注意してください。 投稿を確認 念の...
2018.10.17
NO IMAGE WordpressTips

WordPressギャラリーの作り方[3]CSSを追記

CSSを追記 写真の左右に余白がないため窮屈な感じです。そのためCSSに追記して設定を上書きします。 カラム5のギャラリーに関する設定を上書きします。 style.cssの最後に追記します。 レイアウトを確認 CSSが反映されているか確認します。 使用しているテーマによってはCSSの設定が重複して、レイアウトが反映されない場合があります...
2018.10.17
WordpressTips

WordPressギャラリーの作り方[4]fancyboxを組み込み

fancyboxを組み込んで見栄えを良くします。 デフォルトのままだと、写真(サムネイル)をクリックすると、大きい写真が別ページで表示されるだけの仕様です。 そのためjQueryのfancyboxを組み込んでポップアップウインドーで写真が表示されるようにします。 fancyboxをダウンロードします。 公式サイトよりfancybox一式をダウンロードし...
2018.10.17
WordpressTips

WordPressギャラリーの作り方[5]fancyboxのサンプル

fancyboxを動かしたWordpressギャラリーのサンプルです。 Copyright 2016 Vision and Design Inc.
2018.10.17