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

好評セミナー”ワードプレス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以外でも応用可能です。

まとめ

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

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

ただし、全幅表示するにはテーマ側の対応が必須です。未対応のテーマの場合は、カスタムCSSで対応しましょう。

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

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

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