投稿の実践編

このページの概要

ページを見やすくするためのブロックの使い方や、画像の事前準備など実践的な内容を説明しています。

WordPress 投稿の実践編

ここでは下記の内容を説明しています。

  • EXIFや画サイズなどの画像の事前準備
  • 見出しタグの種類と注意点
  • 見やすく表示するための余白の付け方
  • 枠線や背景色を指定できる「Outerブロック」の使い方
  • 横並びにする「カラムブロック」の使い方
  • アイキャッチ画像についての説明

画像の準備

WordPressに画像をアップするにはあらかじめ、「EXIFデータ」や「画像サイズ」などの処理を行っておく必要があります。

  • 投稿に使用する画像は「ピクチャー」ホルダーに保存するのではなく、「SSNC WP画像」といったフォルダーを作成し保存しておくと作業がやりやすいと思います。

1.「EXIF」データの削除

下記の手順で、写真の撮影日時や位置情報などの個人データーを削除します。

  • 投稿に使う画像ファイルを右クリックします。
  • 「プロパティ」を選択します。
  • 「詳細」タブを選択します。
  • 「プロパティや個人情報を削除」をクリックします。

2.画像サイズの最適化

投稿する写真や画像はそのままでは大きすぎ、容量的にWordPressの負担になることがあります。
適切な画像サイズに修正します。
WordPressではアップした画像サイズの他に、自動で6種類前後の画像サイズを作成保存します。
横幅が1200pxより大きい場合は、下記の方法で修正を行います。

  • 投稿に使う画像ファイルを右クリックします。
  • 「ペイント3Dで編集する」をクリックします。
  • 上部メニューの「キャンパス」をクリックします。
  • 右側メニューの「キャンパスサイズの変更」の「横幅」に所定の数値を入力します。
  • 左上メニューの「名前を付けて保存」→「画像」を選択し所定のフォルダーに保存します。
  • クラブで使用しているWordPressのテーマは「Lightning Pro」です。
    このテーマのコンテンツの最大幅は1140pxです。
    従ってアップ画像のサイズは最大1200px程度で充分ですが、
    容量削減のため必要最小限のサイズをアップするようにします。

3.画像のファイル名の付け方

WordPressにアップする画像のファイル名は下記のルールで設定してください。

  • ファイル名は英数小文字とハイフン( – )及びアンダーバー( _ )の組み合わせとします。
  • トップページに記載する画像の場合
    「top」+「アンダーバー( _ )」+「01から始まる2桁の数字」
    例 top_01 top_02
  • サブページに記載する画像の場合
    「ページのスラック名」+「アンダーバー( _ )」+「01から始まる2桁の数字」
    例 basics_01 wp-manual_02
  • アイキャッチ画像専用の場合は
    「ic」+「ハイフン( – )」+「ページのスラック名」+「アンダーバー( _ )」+「01から始まる2桁の数字」
    例 ic-basics_01 ic-wp-manual_02
  • 画像のファイル名は画像の管理上重要ですので厳守願います。

見出しタグについて

1.見出しとは

見出しとは、記事内容の要点を章や節ごとに簡潔にまとめた題名を言います。
見出しタグは記事を階層し、ページの内容を閲覧者にわかりやすく伝えるのに役立ちます。

見出しタグにはH1からH6までの6種類があります。
H1はタイトルで使用しますので、記事中で利用できるのはH2からH6までです。
見出しを付けると、ページトップのような「目次」を自動で生成できます。

それぞれのデザインはデフォルトで下記のように設定済みです。
デザインはサイトによって異なります。以下は当サイトの例です。

・「H2見出し」

・「H3見出し」

・「H4見出し」

・「H5見出し」

・「H6見出し」


2.見出タグの注意点

  • H1タグは1ページに1回しか使えません。
    その他のタグは何回でも繰り返し使えます。
  • H2からH6へ規則的(階層構造的)に使っていきます。
    良い例 H2➡H3➡H4➡H4・H3➡H4➡H4
    悪い例 H3➡H2➡H4➡H4・H4➡H3➡H4

余白を付ける

1.ブロックの上下に余白を付ける

単純にブロックを追加していくと、上下に余白がなく見づらくなります。
グロックの間に余白を付けて見やすくデザインします。
下記の例では、画像と画像の間に余白が少ないので矢印の位置に余白を広げます。

  • 右下の「+」マークをクリックします。

2.レスポンシブスペーサーの挿入

  • ブロックパネルより「レスポンシブスペーサー」をクリックします。

3.余白の高さを調整します

  • 設定パネルの「デバイス毎の高さ」で余白の高さを設定します。
  • 左下の「上矢印」をクリックして、余白ブロックを画像の間に移動します。

4.プレビュー画面で確認

矢印の余白が広くなりました。

  • 画面右上の「プレビュー」➡「新しいタブでプレビュー」でプレビュー画面を開き、実際の余白を確認します。
    必要に応じて余白の高さを調整します。

「Outer」ブロックを使う

1.「Outer」ブロックの機能

「Outer」は文章などを見やすく整えるブロックで、主な機能は次の通りです。

  • 上下左右の余白を設定できる
  • 背景色を指定できる
  • 枠線を指定できる
  • 参考(管理者向け忘備録)
    本文を「Outer」ブロックで囲むと、「最近の投稿」一覧表示の抜粋部分が
    本文ではなく、本文前の「見出し(h2)」の内容が表示される

2.ブロックの挿入

  • 右下の「+」マークをクリックしてブロックパネルを開きます。
    又は、挿入したい位置にマウスのポインターを移動し、「+」マークが出たらクリックします。

3.「Outer」ブロックの挿入

  • ブロックパネルの「Outer」をクリックします。

4.「Outer」ブロックの設定

  • 「Outer」ブロック内に文章などを記入します。
  • 設定パネルの「背景設定」「レイアウト設定」「枠線の設定」などの設定項目を開き、希望のデザインに設定します。

「カラム」ブロックを使う

1.「カラム」ブロックの機能

カラムは画像やテキスト、動画などを横並びにするブロックです。
2カラムから最大6カラムまで設定できます。
ここでは画像を2個並べてみましょう。

  • 挿入したい位置で、ブロックパネルの「カラム」をクリックします。

2.「カラム」ブロックの挿入

  • 挿入するカラムのスタイルを選びます。

3.「カラム」ブロックの中にブロックを挿入

  • 「+」から画像のブロックを挿入します。

4.「カラム」ブロックの完成

画像が横並びに2個並びました。

アイキャッチ画像

1.アイキャッチ画像とは

アイキャッチ画像とは「最近の投稿」などで投稿内容を紹介するときに表示される画像です。
記事のタイトルや内容に合ったアイキャッチ画像をつけることで、ユーザーの興味を引き、記事が読まれやすくなる効果があります。


2.「アイキャッチ画像」の設定

  • 設定パネルの「設定」タブを開きます。
  • 「アイキャッチ画像」の「アイキャッチ画像を設定」より所定の画像を選択します。
  • アイキャッチ画像のサイズは、最大横1200p×縦630px(比率1:1.91)ですが、
    容量削減のため必要最小限のサイズにします。

前の記事

投稿の基礎編

次の記事

固定ページの作成