ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

ワードプレスのブロックエディターでは画像を全幅表示させる機能があります。画像をDisplayの横幅いっぱいに広げて表示させると、ユーザーに強い印象を与えることができますよね。

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

ただし、この機能はテーマによって対応しているものがまだ少ないのが現状です。本記事では、対応していないテーマと対応済テーマで何が違うかを見てみましょう。

 

目次

前提条件

今回テーマは、

  • 全幅対応していないテーマとしてTwenty Seventeen
  • 全幅対応済テーマとしてTwenty Nineteen

を使用します。どちらもデフォルトのテーマですね。

テーマTwenty SeventeenとTwenty Nineteen

 

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

 

ブロックエディターの基本的な使用方法は以下の記事を参照ください。

 

また、今回は画像の挿入を実施します。ブロックエディターでの画像の挿入方法は、

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

 



テーマTwenty Seventeenで画像を挿入

画像の挿入

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

画像の配置は左寄せ中央揃え右寄せの3つしかありません。中央揃えを選択します。

Twenty Seventeenで画像の挿入

 

 

サイト表示結果

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

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

Twenty Seventeenでサイト表示

 

このように、全幅対応していないテーマの場合、従来のクラシックエディターでもできる画像表示しかできません。

 

 

テーマTwenty Nineteenで画像を挿入

画像の挿入

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

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

Twenty Nineteenで画像を挿入

 

 

サイト表示結果

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

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

Twenty Nineteenサイト表示

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

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

 

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

 

 



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

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

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

 

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

 

 

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

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

 

ただし画像の縦横比は、元画像よりも横長になって、画像の上下は切り取られてしまいます。

元画像の縦横比をキープする方法を以下で紹介していますので参考にしてみてください。

 

 

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

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

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

 

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

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

 

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

 

非対応なテーマではカスタムCSSで可能

私がおすすめしているテーマLuxeritas(本サイトでも使用中)でも、全幅を設定しても表示は画面いっぱいに広がりません。しかし、次の記事ではカスタムCSSを使って画面いっぱいに広げる方法を解説していますので参考にしてみてください。Luxeritas以外でも応用可能です。

 

 



まとめ

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

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

 

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

 

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる