ワードプレス ブロックエディターで画像を全幅表示させる

ワードプレスのブロックエディターでは、従来のクラシックエディターになかった新しい機能が使えます。その中で、今回は画像を全幅表示させてみます。

特に、”カバー”ブロックとの併用では、サイトの1stビューの雰囲気を変えるのに威力を発揮します。

ただし、この機能はテーマによって対応しているものがまだ少ないのが現状です。

前提条件

今回テーマは、Twenty SeventeenとTwenty Nineteenを使用します。どちらもデフォルトのテーマですね。

テーマTwenty SeventeenとTwenty Nineteen

 

また、エディターの編集機能に影響を与えるTinyMCE Advancedなどは何も有効化していない状態です。

 

ブロックエディターの基本的な使用方法は

記事:ワードプレス 初めてのブロックエディター(編集画面の各機能)

 

また、今回は画像の挿入を実施しますので、その方法の解説として

記事:ワードプレス Gutenberg(ブロックエディター)で記事作成

の中の、画像の挿入 についてご確認ください。

 

 

テーマTwennty Seventeenで画像を挿入

画像の挿入

記事の投稿でブロックエディターを使って、画像を挿入してみましょう。

画像の配置は中央揃えを選択します。

Twenty Seventeenで画像の挿入

 

 

サイト表示結果

ではサイト表示させてみましょう。

以下のようにパソコン表示では2カラム、スマホ表示では1カラムで表示されます。

Twenty Seventeenでサイト表示

 

 

 

テーマTwenty Nineteenで画像を挿入

画像の挿入

ではテーマをTwenty Nineteenに変更してみます。

すると、画像の配置の中に、全幅というのが選択できるようになりました。この全幅を選択してみます。

Twenty Nineteenで画像を挿入

 

 

サイト表示結果

ではサイト表示させてみましょう。

以下の通り、画像が全幅で表示されるのがわかります。同じコンテンツ(画像)なのに、これだけでサイトの雰囲気が全く変わりますね。

 

Twenty Nineteenは元々1カラムレイアウトのテーマですが、Twenty Seventeenもスマホ表示では1カラム表示です。

スマホ表示どうしを比較すると、同じ1カラムでも中央揃えと全幅の差がはっきりわかりますね。

Twenty Nineteenサイト表示

ちなみに、パソコン表示の画像の下が切れているのは、パソコンのモニターで表示が切れているだけで、スクロールすると画像はすべて表示されています。

 

 

 

全幅表示でヘッダー画像を作成する(”カバー”ブロックとの併用)

ヘッダー画像を全幅で表示させるサイトが多いですが、これを作成してみましょう。

画像の上にテキストを重ねるべく、”カバー”ブロックを使用して、その際画像を全幅で指定してやれば可能です。

 

カバーブロックの使用方法は、以下の記事を参考にしてください。

記事:ワードプレス ブロックエディターで簡単に画像に文字を重ねる方法

 

 

トップページにして表示してみました。なかなかよい雰囲気です。

全幅画像+”カバー”ブロックでヘッダー画像を作成

 

 

 

全幅画像を表示できるテーマはまだ少ない

このように、全幅画像を利用すれば、簡単にヘッダー画像なんかも作れてしまいます。

ただし、残念なことに、この全幅画像を使用できる(または表示できる)テーマは、まだまだ少ないのが現状です。

 

ブロックエディターがリリースされて以来、有名どころのテーマは、基本的にはブロックエディター対応をしていっています。

独自のブロックを使用できるように機能を追加しているテーマのあるのですが、そうしたテーマでも、なぜかこの全幅画像に対応していない場合の方が多いように思います(全幅を指定できるようになっていても、実は全幅で表示されない、とか)。

 

Twenty Seventeenがそうであったように、2カラム方式のレイアウトのテーマはまず対応していませんし、1カラム対応のテーマだからといって対応しているとは限らないようです。

 

このあたりは、更にブロックエディター対応のテーマが増えてくることを願いたいですね。

 

 

まとめ

ブロックエディターの画像配置で、全幅が使用できるテーマであれば、簡単に全幅の画像をサイト表示できます。

特に、”カバー”ブロックとの併用で、ヘッダー画像のように、全幅でかつテキストを重ねた画像を設置するのに威力を発揮できます。

 

ただし、全幅画像をうまく表示できるテーマはまだまだ少なく、今後そのようなテーマが増えていくことを期待します。

 

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!

オンラインで開催して好評だったセミナー”ワードプレス100分体験セミナー(ブログサイト制作)”をamazonキンドルにて書籍化しました。

amazonページはこちら