【WordPress】yStandardカスタマイズ、yStandard Blocksで背景を斜めにする

2020年1月24日

今回は、yStandard Blocksプラグインを使って、背景を斜めにしたスタイルを作ってみたいと思います。
使用テーマはyStandardです。

yStandard Blocksを導入する

まずはyStandardの公式ページからyStandard Blocksプラグインをダウンロードします。

  yStandard Blocks yStandard専用のブロックエディター(Gutenberg) ブロックプラグイン。 インライン装飾機能や様々なブロック
wp-ystandard.com

[ys]セクションブロック

新たに[ys]yStandard Blocksが増えていると思います。
その中の[ys]セクションを選択します。

画面の端から端までブロックにしたい場合は、全幅を選択します。

画面右側のサイドバーから背景設定を見てみます。
背景色の濃さを100に設定します。

続いて色設定から背景色を選択、もしくは自分で選んだ色を指定します。
そうするとブロックのエリアが背景色で塗りつぶされます。

そして、区切り線設定で区切りタイプを斜めにすることで背景を斜めにします。
レベルで角度を調整します。このままでは変化はありませんが、色をブロックの前の色に合わせると背景が斜めになったように見えます。ここでは直前の色に合わせて白にしています。

上部、下部ともにレベル-60にして色を白に設定したもの。
これで斜めの背景が完成です。あとはこのセクションの中に他のブロックを作成してコンテンツを入れます。

続けてブロックを作成する場合、区切りの色に注意しましょう。
この画像では、水色ブロックの下部をグレーにするか、グレーブロックの上部を水色にします。

余白などの調整

余白の外側はmarginの設定みたいな感じに、内側の余白はpaddingの設定みたいな感じで設定します。

コンテンツの幅をもっと広く取りたい場合は、コンテンツ幅設定からワイドを選択し、最大幅を指定することができます。

背景を写真に

背景設定で背景画像を指定することができます。
背景色の濃さは、コンテンツの文字が画像と被って見えないときなどにちょっと暗くすると可読性が上がります。この値を0にすると写真がそのまま出てきます。

こんな感じ。背景色の濃さを30にして白いテキストを見やすくしてみました。
固定背景の背景を固定するをオンにすると、スクロールした時にブロックが背景をクリッピングしながら移動します。この設定をオンにする場合は、ちょっと大きめの画像を使うといいと思います。

波線や三角形にも

ブロックとブロックの境界の区切り線は波線にすることもできます。
この場合は、水色ブロックの下部をグレーにするか、グレーブロックの上部を水色にします。

区切り線に三角形を選択すると、順路をナビするのにぴったりな形にできます。
この場合は、グレーのブロックの上部を水色に変えます。

下向きの三角形は常に次のブロックの上部で設定します。

いかがだったでしょうか。
難しいhtmlとcssの設定をすることなく[ys]セクションブロックを使うことで、ブロックとブロックの境界線をアレンジすることができます。

yStandard Blocks、機会があれば是非試してみてください。