ブロック枠の設定

クラフトマスターイメージイラスト

ブロック枠は、レイアウト枠の中にパーツ類を配置する際に、いわば額縁や本棚のような役目を果たします。

レイアウト枠の中にいくつ棚仕切りを作って並べるかを決めたり、額縁のようにパーツ類の後ろや周りを装飾したりといった使い方ができます。意識するしないにかかわらず、パーツを配置した場合は必ずブロック枠の中に格納されます。

設定は、ブロック枠内が空の場合は左上の「このブロック枠の調整」アイコンから。パーツが配置されている場合は、パーツ上にマウスポインタを重ねた際に表示されるアイコンから行います。

スタイル

ブロック枠幅(複数ブロック枠構成の場合のみ設定可)

各ブロックごとに幅を細かく設定できます。全体幅を100%としたときに、どのぐらいの割合にするかを%で指定します。

ブロック枠の幅設定について

ブロック枠の高さを自動で合わせる(複数ブロック枠構成の場合のみ設定可)

Yesを選択すると、横に並んでいる各ブロック枠の一番高さのあるものにほかのブロック枠の高さを合わせます。

ブロックの高さ自動調整の例

上下の位置合わせ(複数ブロック枠構成でブロック枠の高さを自動で合わせた場合のみ設定可)

  • 上 → 各ブロック枠内にあるパーツを、上合わせで表示します。
  • 中央 → 各ブロック枠内にあるパーツを、上下の中央合わせで内容を表示します。「詳細」で設定している「余白」の上下値は優先されません。
  • 下 → 各ブロック枠内にあるパーツを、下合わせで表示します。

文字

そのブロック枠の中に置かれたパーツすべての基本文字色を、まとめて設定できます。
このブロック枠があるレイアウト枠で文字色の設定を行っている場合でも、こちらの設定が優先されます。

ブロック枠内の文字の基本色を決めます。

リンク文字の色

リンクが設定されている部分の文字の色を指定します。

マウスオーバー時のリンク文字色

リンク設定部分にマウスポインターを合わせたときに色を変化させる場合は指定します。

見出し文字色

ブロック枠内で見出しを使用したときの文字色を設定します。「見出し」パーツだけでなく「文章編集欄」や「セット表示」パーツなど、見出しを指定できるすべてのパーツに適用されます。

背景指定

いずれかを選択

このブロック枠内に使用する背景を選びます。選択したものによって、下に表示される設定項目の内容が変わります。

  • なし → 背景に何も指定されません。ページの下地を背景に文章や画像のみが表示されます。
  • 色 → 「背景色」設定で背景に色をつけることができます。
  • 画像 → 選択した画像を背景にします。枠内での画像の配置方法を細かく設定できます。

バックに置く画像(背景指定「画像」選択時のみ)

画像

使用する画像を選びます。「画像を選択」をクリックしてWordPressのメディアライブラリから、あるいは画像をアップローダーを使用して新規アップロードのあと「画像を選択」ボタンを押します。決定したあと現れる画像サイズのプルダウンメニューも忘れずに確認・設定してください。
ここで背景に置いた画像は、ページ全体の縦幅が大きくなったり、端末ごとにサイズが変化したりする可能性があります。画像のサイズ設定にご注意ください。

繰り返し

背景画像を表示する際の方法を設定します。通常は「なし」が選択されています。
小さな画像で広い面積の背景を埋める場合には同じ画像を敷き詰める必要が出てきます。

  • なし → 選択した画像をひとつだけ表示します。
  • タイル状 → 縦と横両方向に選択画像を繰り返すことでブロック枠全面に敷き詰めます。
  • 水平方向 → 水平方向だけ選択画像を繰り返して敷き詰めます。
  • 垂直方向 → 水平方向だけ選択画像を繰り返して敷き詰めます。

位置

背景が表示されるエリア全体の、どこを基準にして画像を配置するかを選択指定します。

取り付け方

ページをスクロールしたときに、背景にした画像がどのように反応するかを指定します。

  • スクロールする → 画像はページのスクロールとともに移動します。
  • 固定 → 背景画像の上を内容の文章や画像だけがスクロールするようになります。

縮尺設定

画像が背景内で表示される際の大きさを設定します。

  • なし → 画像はそのままのサイズで使用されます。
  • 全体表示を優先 → ブロック枠の中で使用画像の全体を表示させることを優先します。
  • 常に背景を埋める → ブロック枠に合わせて画像を拡縮して全体を埋めます。

背景色(背景指定で「なし」以外選択時)

背景に画像や動画を使用する場合も、そのトーンに合わせた背景色を同時に設定しておくことをお勧めします。
どうして? → 文字やアイコンなどの大きさや色は、背景に指定した画像や動画の状態に合わせて調整されているはずです。もし指定した画像や動画が何らかの理由で表示されなかった場合、内容が読みづらくなってしまう危険性があるからです。

このブロック枠の背景にしたい色を決めます。

透過度

引いた背景色の透過度を設定します。0を指定すると完全に透明になります。

重なり効果(背景指定で「なし・色」以外選択時)

背景に設定した画像や動画により、上に置いた文字内容などが見えづらくなるのを防ぐために、フィルターのように色を重ねて置くことができます。

重ねる色

重ねる色を決めます。背景画像や動画をただ暗めにしたいなら黒(#000000)、明るめにしたいなら白(#ffffff)を選んでください。

重ねる際の透過度

背景に対し、どのぐらい色を乗せるかを調整します。0だと色は乗らず、100にすると背景の画像や動画は完全に隠れてしまいます。

境界線

ブロック枠の最外周に境界線を表示させることができます。

いずれかを選択

以下から境界線の線種を選びます。

  • なし
  • 単線
  • 傍線の繰り返し
  • 点線
  • 二重線

使用したい線の色を選びます。

透過度

境界線の透過度を設定します。0を指定すると完全に透明になります。

上部の線

ブロック枠最上端の線の太さです。二重線を選択している場合は最低3px以上が必要です。

下部の線

ブロック枠最下端の線の太さです。二重線を選択している場合は最低3px以上が必要です。

左側の線

ブロック枠左端の線の太さです。二重線を選択している場合は最低3px以上が必要です。

右側の線

ブロック枠右端の線の太さです。二重線を選択している場合は最低3px以上が必要です。

詳細

こちらの共通ページで説明しています

©2015-2018 eufonia inc.