初心者・独学でもわかる！WordPressカバー画像・カラム編集のコツ-WEBST8動画で学ぶ実践講座 Part3
WordPressをネット動画で作成 Part3
今回は、カバー画像を使っています。文字が分かりにくいので、オーバーレイ設定で不透明度をあげてカバー画像を暗くしています。
背景画像の幅を調整したほうがいいみたいです。
参考動画WEBST8「エディタの総まとめ」から学ぶ
WEBST8の解説動画から得た知識をもとに、今回はカバー画像やレイアウト（カラム）の調整方法を実践形式で紹介します。画像や文字の見え方を改善しながら、より魅力的なページデザインを目指しましょう。
「ぼくら」の失敗談
1.カバー画像の背景幅の調整が上手くいかず、「フル幅」にすると、文字や他の要素と重なってレイアウトが崩れる。⇒右サイドの「レイアウト」設定で“幅”を「中央揃え」や「全幅」で調整する。テーマによって挙動が違うので注意！
2.思った位置にブロックが追加されず、画像や文字を入れたのに、なぜか違う列に表示される。⇒左下の“ブロックナビゲーション”で現在の構造を把握する習慣をつける。
1.カバー画像の設定・調整方法
カバー画像を使うとインパクトが出ます。
テキストが見えにくければ、オーバーレイや背景色の調整は視認性向上に欠かせない工夫です。ただし、背景色を入れるだけではうまく表示されず、幅の設定まで意識しないとレイアウトが崩れてしまうことがあります。
右サイドメニューでパターン画像を全幅で入れると壁紙のようになります。
カバー画像はいろいろな設定ができますが、フルハイライト設定で画面いっぱいに表示させることもできます。
2.画像挿入とテキスト配置の基本
インラインを使うとスマホでも自然に表示できるケースがあります。
文字の間に画像を挿入する場合、インライン画像で挿入します。スマホなど横幅が短い場合、カラムだと縦に表示されますが、インライン画像はブラウズ幅以内ならそのまま横並びで表示されます。
3.文字装飾とタイポグラフィ設定
タイポグラフィとは、文字の見せ方をデザインする技術や考え方のことです。単なる「フォント選び」ではなく、読みやすさ・美しさ・印象づけを目的に、文字の配置・サイズ・間隔・色・強弱などを調整する総合的な手法です。
| 項目 | 調整内容 | 使い所のヒント |
|---|---|---|
| 外観 | 細字／太字／イタリックなど | 強調・タイトルの見せ方 |
| 行の高さ | 各行の余白を広げる | 読みやすい段落に |
| 文字間隔 | 全体の密度を調整 | 情報の整理に最適 |
| 装飾 | アンダーライン／打ち消し線など | 注目／無効化の表現 |
| 大文字小文字 | 英字の見せ方を調整 | 見出し・ブランド名に効果的 |
- 右側メニューの「タイポグラフィ」の右側にある縦三点リーダー（︙）をクリックすると、リスト全体の外観（例：細字、ボールドなど）を変えたり、文字間隔を広げたりすることができます。
- 外観：細字やボールド、イタリックといったフォントの太さ・スタイルを変更できる
- 行の高さ：リストの各行の高さを変更できる
- 文字間隔：リストの各行の文字間隔を変更できる
- 装飾：リストの各行にアンダーラインや打ち消し線を付けられる
- 大文字小文字：リストの各行に書かれた英文字の大文字・小文字を変更できる
- 画像や複数のブロックをグループ化したまま「全幅」を選ぶと右サイドバーとかぶって、レイアウトが崩れが起こりやすいです。
- 特にLightningなどのテーマを使っている場合は、編集エリアの右側サイドメニューと“全幅ブロック”がかぶってしまう現象があるので、独学者はそこでかなり戸惑います。
- 右サイドメニューとかぶってしまいますので、その場合カラム数を２から１にかえましょう。
4.ブロックのグループ化とレイアウト調整
グループ化によってデザインや動作をまとめて調整できます。また、CSSで独自デザインの拡張ができます。（例：枠線消去・フォント変更）
- 複数のブロックをグループ化することができ、2通りのやり方があります。
- ＋/デザイン/グループでグループ化した後中のブロックを作成していくやり方
- 個々のブロックを作成した後にグループ化するやり方
- グループ化したい場所を複数選択した後、オプション/グループ化をクリックします。
- グループ化することで文字や背景色をグループ毎に設定できたり、グループ単位でブロックを移動できたりすることができます。設定する場合、左下のナビゲーションメニューでグループを選びます。（コード上は、グループ化用のdivタグを追加しているだけです！）
- グループ化したものを右サイドメニューでCSS追加すれば、オリジナルのものが作れます。ボーダーを消したりフォントサイズをかえたりできます。
- カラムブロックは外側のブロックと内側のブロックから構成されており、外側ブロックでは列数（カラム数）、内側ブロックでは横幅%など、設定できる項目が異なります。
- 通常は「モバイルでは縦に並べる」のチェックがついているため、スマホの時はカラムは縦に並びます。
- カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるため、場合によっては自分が意図する場所にブロックが挿入されていないということも出てきます。左下のブロックナビゲーションを確認し、自分が追加しようとしているブロックの位置を確認しましょう。
5.VK Blocksで“魅せる”表現を追加
吹き出しやスタッフ紹介など、初心者でも使いやすいレイアウト部品
漫画風のやりとり／プロフィール紹介などに活用
VK Blocks使用例の画像やコードを付けると、より理解が深まる
ブロックのグループ化
クロスオーバー
グルーピングは簡単です。左画像と右段落の別ブロックをグループ化して背景画像を黒にしています。画像ブロックの上と下にスペーサを挿入して余白を作りました。右段落でスペーサを挿入しようとすると画像の上下にはスペーサが入らないのでおかしなことになります。
Lightning VK Blocks / VK Block Patterns
- VK Blocksを利用すると、ホームページで多彩なデザイン・レイアウトを作ることができます。VK Blocks「フキダシ」を利用すると、吹き出しを使った漫画のようなやりとりを簡単にページ上に作ることができます。また、「スタッフ」を利用すると、スタッフ紹介に便利なレイアウトをページ上に作ることができます。他にもたくさんの便利な使い道があります！
