レイアウト枠の設定
ページ内に設置したレイアウト枠は、数々のオプション設定を行えます。
表示幅や背景の設定を活用すると、オーソドックスなデザインから、最新の動きの出るスタイルにまで対応できます。
スタイル
表示幅の設定
背景を含めたレイアウト枠全体の表示幅を選択します。「全幅表示」を選んだ場合は、下に「内容の幅」の設定項目が現れます。
- 固定 → 「全体設定」あるいはWebサイトのシステムで指定された幅を最大値として表示します。
- 全幅表示 → ブラウザの表示幅に合わせていっぱいまで広がります。
内容の幅（「表示幅の設定」で「全幅表示」指定の場合のみ）
レイアウト枠の中に置かれたブロック枠やパーツ類の最大表示幅を設定します。
- 固定 → 「全体設定」あるいはWebサイトのシステムで指定された幅を最大値として表示します。
- 全幅表示 → 内容もブラウザの表示幅に合わせていっぱいまで広がります。
高さ指定
- 全体設定値 → レイアウト枠の余白と中に置かれたパーツ類の高さを合わせた状態で表示されます。
- 高さを表示状態に合わせる → 訪問者が表示させているブラウザの縦幅を取得し、その高さいっぱいなるように表示します。
上下の位置合わせ（「高さ指定」で「高さを表示状態に合わせる」指定の場合のみ）
- 上 → 表示されているスペース内に、上合わせで内容を表示します。
- 中央 → 表示されているスペース内に、上下の中央合わせで内容を表示します。「詳細」で設定している「余白」の上下値は優先されません。
色
レイアウト枠の中に置かれたパーツすべての基本文字色を、まとめて設定できます。
文字色
レイアウト枠内の文字の基本色を決めます。
リンク文字の色
リンクが設定されている部分の文字の色を指定します。
マウスオーバー時のリンク文字色
リンク設定部分にマウスポインターを合わせたときに色を変化させる場合は指定します。
見出し文字色
レイアウト枠内で見出しを使用したときの文字色を設定します。「見出し」パーツだけでなく「文章編集欄」や「セット表示」パーツなど、見出しを指定できるすべてのパーツに適用されます。
背景指定
いずれかを選択
このレイアウト枠内に使用する背景を選びます。選択したものによって、下に表示される設定項目の内容が変わります。
- なし → 背景に何も指定されません。ページの下地を背景に文章や画像のみが表示されます。
- 色 → 「背景色」設定で背景に色をつけることができます。
- 画像 → 選択した画像を背景にします。枠内での画像の配置方法を細かく設定できます。
- 動画 → 選択した動画を背景にします。
- スライドショー → 複数の画像を組み合わせたスライドショーを背景で再生します。
- 視差効果 → ページをスクロールさせた際に背景の画像に動きの効果が加わります。
バックに置く画像（背景指定「画像」選択時のみ）
画像
使用する画像を選びます。「画像を選択」をクリックしてWordPressのメディアライブラリから、あるいは画像をアップローダーを使用して新規アップロードのあと「画像を選択」ボタンを押します。決定したあと現れる画像サイズのプルダウンメニューも忘れずに確認・設定してください。
ここで背景に置いた画像は、ページ全体の縦幅が大きくなったり、表示端末によってサイズが変化したりする可能性があります。画像のサイズ設定にご注意ください。
繰り返し
背景画像を表示する際の方法を設定します。通常は「なし」が選択されています。
小さな画像で広い面積の背景を埋める場合には同じ画像を敷き詰める必要が出てきます。
- なし → 選択した画像をひとつだけ表示します。
- タイル状 → 縦と横両方向に選択画像を繰り返すことでレイアウト枠全面に敷き詰めます。
- 水平方向 → 水平方向だけ選択画像を繰り返して敷き詰めます。
- 垂直方向 → 水平方向だけ選択画像を繰り返して敷き詰めます。
位置
背景が表示されるエリア全体の、どこを基準にして画像を配置するかを選択指定します。
取り付け方
ページをスクロールしたときに、背景にした画像がどのように反応するかを指定します。
- スクロールする → 画像はページのスクロールとともに移動します。
- 固定 → 背景画像の上を内容の文章や画像だけがスクロールするようになります。
縮尺設定
画像が背景内で表示される際の大きさを設定します。
- なし → 画像はそのままのサイズで使用されます。
- 全体表示を優先 → レイアウト枠の中で使用画像の全体を表示させることを優先します。
- 常に背景を埋める → レイアウト枠に合わせて画像を拡縮して全体を埋めます。
背景動画（背景指定「動画」選択時のみ）
使用素材
- メディアライブラリから → WordPressのメディアライブラリから動画を選択、あるいは新たにアップロードしたものを選択します。
- URL → ネット上の動画をURL指定で表示させます。
- YoutubeやVimeoから → 動画配信サービスにアップされている動画の短縮URLを使用してページ内に表示させます。
mp4形式動画（「メディアライブラリから」選択時）
もっとも多くの環境で再生できる動画形式です。通常はこちらだけを使用します。「動画を選択」をクリックし、開いたメディアライブラリまたはアップローダーを使って目的の動画を選択します。
WebM形式動画（「メディアライブラリから」選択時）
FirefoxやOperaの2013年リリース以前の旧バージョンに対応させるための動画形式です。利用者は少ないので、神経質になることはないかもしれません。
MP4形式動画のURL（「URL」選択時）
もっとも多くの環境で再生できる動画形式です。通常はこちらだけを使用します。動画のURLを直接指定します。
WebM形式動画のURL（「URL」選択時）
FirefoxやOperaの2013年リリース以前の旧バージョンに対応させるための動画形式です。動画のURLを直接指定します。
YouTubeかVimeoの動画URL（「YoutubeやVimeoから」選択時）
動画配信各サービスの動画ページなど取得できる共有用URLをコピーし、この欄に貼り付けます。
代替画像
動画が何らかの理由で再生されない場合に、代わりに表示場所を埋めるための画像を設定します。
背景スライドショー（背景指定「スライドショー」選択時のみ）
使用素材
使用画像を以下から選択できます。
- メディアライブラリから → WordPressのメディアライブラリにアップロード、登録した画像を使用する場合に選択します。通常はこちらです。
- SmugMug → 画像共有サービスの「SmugMug（日本語未対応）」でつくったギャラリーを引用します。
画像（「メディアライブラリから」選択時）
「画像ギャラリーをつくる」をクリックし、メディアライブラリの一覧から使用したい画像を複数選択します。選び終わったら「ギャラリーを更新」をクリックします。
新たに画像をアップロードしながらギャラリーを作成する場合は、「ファイルをアップロード」からアップロードし、メディアライブラリに登録後、ギャラリーに追加します。
「画像を追加」より新たな画像を選び「ギャラリーの更新」を行うと画像を追加できます。「画像ギャラリーを編集」より表示の順番変更や一部削除、入れ替えができます。
RSSフィードURL（「SmugMug」選択時）
SmugMugで作成したギャラリーのURLを取得し、ここへ入力します。（こちらを使用する場合はSmugMugと契約し、自身のアカウントを開設してる必要があります。）
表示スピード
１つの画像の表示時間を設定します。
表示入れ替わり効果
画像が入れ替わる際の効果を以下の中から設定します。
- 指定なし
- フェード
- ケン・バーンズ風
- 左にスライド
- 上にスライド
- ブラインドカーテン風
- 縦バー 左から右
- 縦バー ランダム
- 正方形 左から右
- 正方形 ランダム
- 長方形の膨張
表示入れ替わり効果の速度
画像の入れ替わりにかかる時間を設定します。
再生の順番をランダムに
画像の表示を設定した順番に関係なくランダムに行いたい場合には「Yes」を選択します。
視差効果設定（背景指定で「視差効果」選択時のみ）
画像
このレイアウト枠全体の背景として使用できる画像を選びます。
表示スピード
スクロール量に対して背景の動く量を決めます。速いを選ぶと背景の動く量が大きくなります。
背景色（背景指定で「なし」以外選択時）
背景に画像や動画を使用する場合も、そのトーンに合わせた背景色を同時に設定しておくことをお勧めします。
どうして？ → 文字やアイコンなどの大きさや色は、背景に指定した画像や動画の状態に合わせて調整されているはずです。もし指定した画像や動画が何らかの理由で表示されなかった場合、内容が読みづらくなってしまう危険性があるからです。
色
レイアウト枠全体の背景にしたい色を決めます。
透過度
引いた背景色の透過度を設定します。0を指定すると完全に透明になります。
重なり効果（背景指定で「なし・色」以外選択時）
背景に設定した画像や動画により、上に置いた文字内容などが見えづらくなるのを防ぐために、フィルターのように色を重ねて置くことができます。
重ねる色
重ねる色を決めます。背景画像や動画をただ暗めにしたいなら黒（#000000）、明るめにしたいなら白（#ffffff）を選んでください。
重ねる際の透過度
背景に対し、どのぐらい色を乗せるかを調整します。0だと色は乗らず、100にすると背景の画像や動画は完全に隠れてしまいます。
境界線
レイアウト枠の最外周に境界線を表示させることができます。
いずれかを選択
以下から境界線の線種を選びます。
- なし
- 単線
- 傍線の繰り返し
- 点線
- 二重線
色
使用したい線の色を選びます。
透過度
境界線の透過度を設定します。0を指定すると完全に透明になります。
上部の線
レイアウト枠最上端の線の太さです。二重線を選択している場合は最低３px以上が必要です。
下部の線
レイアウト枠最下端の線の太さです。二重線を選択している場合は最低３px以上が必要です。
左側の線
レイアウト枠左端の線の太さです。二重線を選択している場合は最低３px以上が必要です。
右側の線
レイアウト枠右端の線の太さです。二重線を選択している場合は最低３px以上が必要です。