ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

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

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

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

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

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

詳細はこちら

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

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

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

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

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

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

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

 

前提条件

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

テーマTwenty SeventeenとTwenty Nineteen

 

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

 

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

 

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

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

 

 

テーマTwenty Seventeenで画像を挿入

画像の挿入

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

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

Twenty Seventeenで画像の挿入

 

 

サイト表示結果

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

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

Twenty Seventeenでサイト表示

 

 

 

テーマTwenty Nineteenで画像を挿入

画像の挿入

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

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

Twenty Nineteenで画像を挿入

 

 

サイト表示結果

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

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

 

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

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

Twenty Nineteenサイト表示

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

 

 

 

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

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

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

 

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

 

 

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

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

 

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

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

 

 

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

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

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

 

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

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

 

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

 

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

 

 

まとめ

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

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

 

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

 

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

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

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

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