Gutenberg の alignwide / alignfull に対応してみよう

alignwide / alignfull に対応してカバー画像を活用しよう

こんにちは、みみです。

今日はGutenberg の特徴であるコンテンツ幅を広げたりフルにしたりする機能について。これは良い機能だと思うのですが、元がシングルカラムで無いと中々活かせない機能です。

かく言う当ブログのテーマは、他サイトで使った2カラムを適当に流用したママだったので、この機会に個別ページをデザインからやり直すことにしました。

そんな訳で、現在、アチコチ改修中（というかやっと作り出しただけ）です。

alignwide / alignfull に対応するには

add_theme_support( 'align-wide' );

を追記して、いくつかCSSを編集するだけです。

CSSの当て方はまちまちだと思うのですが、例えば記事全体にmargin: 0 3vw;とか設定してある場合は、

.alignwide {
    max-width: 70vw;
}
.alignfull {
    width: 100vw;
    margin-left: -3vw;
    margin-right: -3vw;
}

とか書けば良いです。

後は、.wp-block-image、.wp-block-cover、.wp-block-cover-image辺りにこそこそスタイルを当てれば良いだけなので、Reactに触れる必要は一切ないです。

どーんとフル幅の画像を置いたり、

画像ブロックフル。乱用はオススメしない。

こんな感じでカラムを使って、左右にフルで配置も可能です。（モバイルではシングルにしています）。

猫は正義。

トルコの猫ちゃんコレクション一部。また行きたいなー！

ワイド幅でももちろんできます。フル幅よりワイド幅の出番の方が多そうかなー。

ワイド幅の設定はカスタムに入れたら良さそう。

・・・ただの技術ブログにこの機能はオーバースペック気味ですが、あるならあるで表現の幅が広がって良いかも知れません。

今年中にキリの良い処まで作りたかったのですが、まだギャラリーのスタイル調整もしてないし、マージンの整理もできてないし。作れば作るほど気になるところが増えるけれど、今年はココまでかなあ。

ソースはGitHubに公開しています。来年もどうぞ生暖かく見守ってやってください。