ワードプレスの画像を横幅いっぱいに作成しよう。「ブロックエディター」を使って、画像(コンテンツ)を横幅いっぱいに作成してみよう。今回は、ワードプレスの画像を横幅いっぱいに作成しようについて書いていきます。
画像など、コンテンツが横幅いっぱいに広がるようにし、ダイナミックなブログを作成してみましょう。また画像を横幅いっぱいに広げられる他、左右にスペースのあるワイドな幅に広げることもできます。
| 結論を先に話ししておきます |
| ワードプレスのテーマを「ブロックエディター(Gutenberg)」を使って「幅広」と「全幅」に対応させる方法について図解を用いて解説していきます。やり方はとても簡単なので心配はいりません。
またワードプレスのテーマが「ブロックエディター(Gutenberg)」に対応していない場合、画像挿入時に、設定可能な「幅広」と「全幅」が表示されません。「ブロックエディター(Gutenberg)」を利用するのであれば、使いたい機能ではないでしょうか。
と言うことで、この章では「ブロックエディター(Gutenberg)」で画像を挿入した際「幅広」と「全幅」を表示させて使えるようにする方法を紹介していきたいと思います。それでは見ていきましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
【ブロックエディターとは(動画付き)】
「ブロックエディター」は「ブロックシステム」を採用し、コンテンツ同士を組み合わせていきます。「ブロックエディター」は、冒頭でも説明している通り「Gutenberg/グーテンベルグ」と言います。
また「ブロックエディター」は、ブログやデジタル製品用にリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
フリーフォームテキストに「メディア」「オブジェクト」「ショートコード」などを埋め込む方法とは異なっています。また、念の為書いておくと「ショートコードブロック」とも言います。
| 「ブロックエディター」のブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「WordPressブロックエディターの使い方 基本編」です。
【クラシックエディターとブロックエディターの画面の違い】
既にお分かり頂いていると思いますが、まず初めに「クラシックエディター」と「ブロックエディター」の画面の違いについて図解を用いて説明していきます。分からない方は、図解を参考にしてみて下さい。
「クラシックエディター」と「ブロックエディター」の詳細について、ここでは割愛させて頂きます。現在「クラシックエディター」で記事を書いている場合「ブロックエディター」に変更しておきましょう。
| 「ブロックエディター」に変更するやり方ですが、下記の図解を参考にしてみて下さい。とても簡単です。 |
- サイドメニューの「黄色枠」で囲まれている「設定」にマウスを移動すると、プルダウンメニューが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- すると投稿設定画面へ移動します。すべてのユーザーのデフォルトエディターで「オレンジ色枠」で囲まれている「ブロックエディター」側を選択し、最後に左下にある変更を保存を押しましょう。
![]()
- 「ブロックエディター」を選択後、投稿もしくは固定ページの新規追加を開くと、下記のような画面が表示されます。
- 念の為、載せておきますが、下記の図解は「クラシックエディター」を選択した場合の新規追加画面です。
| 「クラシックエディター」と「ブロックエディター」の新規追加画面は、上記の図解を見てもお分かりのように異なっていることが分かります。 |
【ブロックエディターのカバーブロックを使用する】
「ブロックエディター」におけるカバーブロックについてですが、この場合「ブロックエディター」を開いてみないと分からないと思うので、まずは幅広又は全幅の広い画像を挿入するところから始めてみましょう。
「クラシックエディター」から「ブロックエディター」に変更する為には「設定」→「投稿設定」→「すべてのユーザーのデフォルトエディター」→「ブロックエディター」の順番に開いてみて下さい。
- 「ブロックエディター」に変更したら、投稿もしくは固定ページを開き、新規追加を押しましょう。すると「赤色枠」で囲まれている「+」を押してみよう。
- +を押すと、メニューが開きます。「緑色枠」で囲まれている「カバー」を押してみましょう。
- カバーを開くと「黄色枠」で囲まれている「カバー」が開きます。その中に「オレンジ色枠」で囲まれている「アップロード」と「水色枠」で囲まれている「メディアを選択」があります。
ここでは「アップロードして画像を読み込む」のか「メディアの中から画像を選択」するのか、どちらかを選択して下さい。
- こちらの方では、メディアを選択側を選択しました。すると「紫色枠」で囲まれている「プルダウンメニュー」が表示されます。次に「緑色枠」で囲まれている「メディアライブラリ」を開いてみます。
- するとメディアの選択またはアップロード画面が開きます。ここでは「赤色枠」で囲まれている「当記事のアイキャッチ画像」を選択してみます。画像を選択したら、右下にある「選択」を押しましょう。
- 次の画面では、選択した画像がタイトル名の下に表示されました。画像は、カーソルで選択した箇所に表示されます。
- 画像が表示されたら「桃色枠」で囲まれている画像を選択してみて下さい。すると左上の方に「緑色枠」で囲まれた各種アイコンが表示されるようになります。
- 各種アイコンの中の「水色枠」で囲まれている「アイコン」を選択すると「赤色枠」で囲まれているようにプルダウンメニューが表示され、その中の「黄色枠」で囲まれている「幅広」と「全幅」があります。
下記の図解では、表示されている画像は、ノーマルの場合であり「幅広」もしくは「全幅」は選択されていません。
- 下記の図解は「赤色枠」で囲まれているように「幅広」を選択した場合です。
- 「幅広」を選択した場合を例に、トップページから確認してみましょう。まずは「赤色枠」で囲まれている「下書き保存」を押します。次に「緑色枠」で囲まれている「プレビュー」を押してみましょう。
すると「水色枠」で囲まれている「プルダウンメニュー」が表示されるので、その中の「紫色枠」で囲まれている「新しいタブでプレビュー」を押してみて下さい。
- 「幅広」に選択した状態でトップページから確認すると「オレンジ色枠」で囲まれているように左右を少し空けた状態で表示されていることが分かります。
- では続いて「紫色枠」で囲まれているように「全幅」で選択した場合も見てみましょう。
- 「全幅」を選択した場合を例に、トップページから確認してみましょう。まずは「紫色枠」で囲まれている「下書き保存」を押します。次に「水色枠」で囲まれている「プレビュー」を押してみましょう。
すると「緑色枠」で囲まれている「プルダウンメニュー」が表示されるので、その中の「桃色枠」で囲まれている「新しいタブでプレビュー」を押してみて下さい。
- 「全幅」に選択した状態でトップページから確認すると「黄色枠」で囲まれているように左右に隙間はなく、表示されていることが分かります。
| 「ブロックエディター」を使うと、このように画像を「幅広」にしたり「全幅」にしたりすることが簡単にできる訳です。また「ブロックエディター」に関する他の設定方法については、以前投稿した「ワードプレス「ブロックエディターの使い方」」をご覧下さい。 |
今回は以上となります。ワードプレスの画像を横幅いっぱいに作成しようについて、理解して頂けたでしょうか。画像を大きくすることで、ユーザーに対し、大きくアピールすることができます。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
