・・・などなどワードプレスを使ったサイト制作やコーディングのみも承ります。お気軽にお問い合わせください。itLinkedInPocketCopyワードプレスのブロックエディターでは画像を全幅表示させる機能があります。画像をDisplayの横幅いっぱいに広げて表示させると、ユーザーに強い印象を与えることができますよね。”カバー”ブロックとの併用では、サイトの1stビューの雰囲気を変えるのに威力を発揮します。この機能はテーマによって対応しているものがまだ少ないのが現状です。本記事では、対応していないテーマと対応済テーマで何が違うかを見てみましょう。Nineteenを使用します。どちらもデフォルトのテーマですね。Editorなどのプラグインは何も有効化していない状態です。ブロックエディターの基本的な使用方法は以下の記事を参照ください。...https://web-children.com/2020/11/18/gutenberg-guidelines/また今回は画像の挿入を実施します。画像ブロックで画像を挿入・加工する方法ワードプレスのGuntenberg(ブロックエディター)の画像ブロックの使い方を解説します。ついてご確認ください。記事の投稿でブロックエディターを使って、画像を挿入してみましょう。画像の配置は左寄せ・中央揃え・右寄せの3つしかありません。中央揃えを選択します。サイト表示結果ではサイト表示させてみましょう。以下のようにパソコン表示では2カラム、スマホ表示では1カラムで表示されます。このように、全幅対応していないテーマの場合、従来のクラシックエディターでもできる画像表示しかできません。Nineteenに変更してみます。Seventeenにはありませんでしたが、画像の配置の中に、全幅というのが選択できるようになりました。この全幅を選択してみます。サイト表示結果ではサイト表示させてみましょう。以下の通り、画像が全幅で表示されるのがわかります。同じコンテンツ(画像)なのに、これだけでサイトの雰囲気が全く変わりますね。Seventeenもスマホ表示では1カラム表示です。スマホ表示どうしを比較すると、同じ1カラムでも中央揃えと全幅の差がはっきりわかりますね。ちなみに、パソコン表示の画像の下が切れているのは、画像が大きくなった分パソコンのモニター内で表示が切れているだけで、スクロールすると画像はすべて表示されています。全幅表示でヘッダー画像を作成する(”カバー”ブロックとの併用)ヘッダー画像を全幅で表示させるサイトが多いですが、これを作成してみましょう。画像の上にテキストを重ねるべく、”カバー”ブロックを使用して、その際画像を全幅で指定してやれば可能です。カバーブロックの使用方法は、以下の記事を参考にしてください。カバーブロックで画像に文字を重ねる方法ワードプレスのGutenberg(ブロックエディター)のカバーブロックの使い方を紹介します。...https://web-children.com/2019/09/13/cover-of-block-editor-in...トップページにして表示してみました。画像の縦横比は、元画像よりも横長になって、画像の上下は切り取られてしまいます。元画像の縦横比をキープする方法を以下で紹介していますので参考にしてみてください。...https://web-children.com/2020/10/21/cover-block-image-aspect...全幅画像を表示するにはテーマ側の対応が必要このように、全幅画像を利用すれば、簡単にヘッダー画像なんかも作れてしまいます。全幅画像を使用するにはテーマ側の対応が必要です。Seventeenがそうであったようにテーマ側が未対応だと全幅表示することができません。ツールバーで全幅を指定できるようになっていても、実は全幅で表示されない、というテーマもあります。Seventeenのように2カラム方式のレイアウトのテーマはまず対応していませんし、1カラム対応のテーマだからといって対応しているとは限らないようです。私がおすすめしているテーマLuxeritas(本サイトでも使用中)でも、全幅を選択はできますが表示は画面いっぱいに広がりません。次の記事ではカスタムCSSを使って画面いっぱいに広げる方法を解説していますので参考にしてみてください。Luxeritas以外でも応用可能です。Luxeritasで全幅画像を表示する方法(他テーマでも応用可)ブロックエディターでは、画像の配置の中に全幅を選択することができるようになってます。...https://web-children.com/2021/01/11/luxeritas-all-width-imag...まとめブロックエディターの画像配置で、全幅が使用できるテーマであれば、簡単に全幅の画像をサイト表示できます。”カバー”ブロックとの併用で、ヘッダー画像のように、全幅でかつテキストを重ねた画像を設置するのに威力を発揮できます。全幅表示するにはテーマ側の対応が必須です。未対応のテーマの場合は、カスタムCSSで対応しましょう。...WordPressブロックベースのウィジェット使用方法【version5.9追加機能含む】ワードプレス5.8から、ウィジェットがブロックベースとなりました。最近Googleタグマネージャーをこのウェブチルサイトに導入しました。管理者のプロフィールウェブチルこと内田智士です。50歳を超えてワードプレスに初めて出会い、ブログ歴は4年です。このウェブチルサイトは私にとって4つ目のサイトですが、ワードプレスをもっと深く勉強してわかりやすくお伝えできたらと思います。初心者向けにセミナーも開催してますので興味があれば声をかけてください。