【スタートガイド06】さまざまな投稿方法
さまざまな投稿方法
写真や表の挿入、文字の簡単な装飾方法について説明します。大きく3つの項目があります。
1. メディアの追加（写真の挿入方法）
1-1 写真のアップロードと挿入（写真をパソコンから取り込む方法です。）
1-2 アイキャッチ画像の追加（記事の上部の大きな写真の入れ方です。）
1-3 ギャラリーの設定方法（画像を複数並べるギャラリーの使用方法です。）
1-4 写真の配置位置／写真サイズの変更（写真の配置する場所やサイズの変更方法です。）
1-5 写真の縮小とトリミング（写真そのものを調整する方法です。）
2. 表の入力方法
2-1 表の挿入方法
2-2 表の幅の変更/高さが入ってしまった場合
2-3 ヘッダーの設定
2-4 トップヘッダーの設定
3. 投稿パーツの使い方
各項目の中で細かい作業の説明を行ってますので、確認したい項目へ進んでください。
全ての操作に共通していますが、実施した後でも「操作の取り消し」 = 「一つ前の作業状態に戻る」ことができますので、あまり考え過ぎずに使ってみてください。
※投稿パーツの使い方
こちらのサンプルページにアクセスいただくと、挿入できるデザインリストがございます。
ぜひご覧ください「。
操作の戻り方
取り消し‥クリックすると、一つ前の作業状態に戻ります（最新の一つ前に戻ります）
やり直し‥クリックすると、取り消しで戻った状態を元に戻せます（最新の状態に戻ります）
1. メディアの追加
1-1 写真のアップロードと挿入
トップページから入れる場合。
左のメニューからメディアを選択して「メディアを追加」をクリックします。
「ファイルをアップロード」をクリックします。
自分のパソコンの写真フォルダを開きます。必要な写真をドラック＆ドロップします。
ブログや固定ページから入れる場合。
編集画面を開き、写真を入れたい位置にカーソルを移動します。「メディアを追加」をクリックします。
ファイルのアップロードをクリック、写真のドラック＆ドロップまでは先程と同じです。
「投稿に挿入」をクリックします。
1-2 アイキャッチ画像の追加
トップページやカテゴリーページで記事を一覧化した際、表示される写真がアイキャッチ画像です。アイキャッチ画像が入っているとユーザーの興味を引きやすくなります。
「アイキャッチ画像を設定」をクリックします。
写真を選び、「アイキャッチ画像を設定」をクリックします。
1-3 ギャラリーの設定方法
ギャラリーの作成
写真を複数並べて表示したい場合は、「ギャラリー」を使います。
ブログや固定ページの編集画面を開き、写真を入れたい位置にカーソルを移動します。「メディアを追加」をクリックします。
（パソコンから写真を取り込みたい方は、「ファイルをアップロード」から取り込みます。）
左側の「ギャラリー作成を」クリックすると写真を複数選べるようになります。
写真を選択していきます。選択済みになると右上に✅がつきます。
写真を選び終えたら「ギャラリーを作成」をクリックします。
こちらに進んだら、右のギャラリーの設定を確認します。
サイズで写真サイズ、カラムで写真を並べる数を確認し、「ギャラリーを挿入」をクリックします。
ブログや固定ページの中でこのように表示されます。
ギャラリーの写真追加
写真の周辺をクリックすると「編集ボタン」が表示されます。「編集」をクリックしてください。
左にある「ギャラリーに追加」をクリックするとこちらの画面に移動するので、追加したい写真を選択してください。選び終えれば、右下の「ギャラリーに追加」をクリックしてください。
ギャラリーの写真編集（並び替え・横の並び数・サイズ変更）
写真の周辺をクリックすると「編集ボタン」が表示されます。「編集」をクリックしてください。
左の枠内で写真の並べる順は、写真をドラッグ＆ドロップで移動させるか、「順序を逆にする」をクリックすれば変更できます。
右の枠内の「サイズ」で写真のサイズを変更できます。並べる個数を変更したい場合は「カラム」で変更できます。
1-4 写真の配置位置／写真サイズの変更
写真の配置位置の変更
「文章に対して左側に画像を置きたい」「大きな画像を中央に表示したい」など写真をどの位置に配置するかを調整する際に、こちらを使ってください。
写真の周辺をクリックすると「編集ボタン」が表示されます。好きな画像位置を選択してください。
写真サイズの変更
変更したい写真をクリックして「編集ボタン」を表示します。編集をクリックします。
左側に「サイズ」という項目があります。選択して「更新」をクリックします。
※元の写真サイズが小さい場合は、中・大・フルサイズを選んでも大きさが変わらないことがあります。
1-5 写真の縮小とトリミング
写真の縮小
編集ボタンを押して編集画面に移動します。
オリジナルを編集をクリックします。
まずは縮尺の変更をします。変更前の写真と変更したい写真のサイズを比較して、縦横の大きい方から作業します。※縦1000×横300の画像を縦500×横120に変更したい場合、まずは縦500に変更することからはじめます。横120に変更すると縦が500以下になってしまいます。サイズが決まったら「縮尺変更」をクリックします。
そのまま次の作業をすると変更が反映されないので、必ず一度「戻る」をクリックしてから再度「オリジナルを編集」をクリックします。
同じように横を変更してください。
トリミング
選択範囲の部分でサイズを見ながら、写真をドラッグアンドドロップしてトリミングする範囲を決めます。選択後は左端のトリミングマークをクリックします。
トリミングが完了したら「戻る」ボタンをクリックします。
2. 表の入力方法
何かを列挙・比較したい場合、こちらのように表にすると見やすいページを作ることが可能です。
2-1 表の挿入方法
テーブルを開き、一覧の「テーブル」をクリックするとマス目が現れます。
作成したい表の行列数に合わせてマス目を指定してクリックします。
このように、表を挿入するができます。（画面は「2×3」で表を組み込んでいます。）
2-2 表の幅の変更／高さが入ってしまった場合
表の幅の変更
表の幅を調整します。セルを縦に選択し「セルのプロパティ」をクリックします。
幅に「50%」のように半角で数字を入力をして「OK」をクリックします。
※2列の場合 50%と50%, 3列の場合 40%と30%と30%のように、全列幅の合計が100%になるようにします。
高さが入ってしまった場合
表を別サイトなどからコピーしてWPのビジュアルエディタで挿入した場合、勝手に表の高さや幅の値が入る時があります。プレビュー画面で表の長さが上手く収まっていない場合は、テキストエディタに変更し、高さ(height)のところにautoと入力してください。
2-3 ヘッダーの設定
表の中に「見出し部分」を作成したい場合、ヘッダーセルに変更します。セルの種類で「ヘッターセル」を選択して「OK」をクリックします。
ヘッダーセルに変わると背景に色がつき、文字も自動で太字になります。
2-4 トップヘッダーの設定
テキストエディタで設定が必要になります。テキストエディタに切り替え、thやtdにclass=”header”を入力してください。
3. 投稿パーツの使いかた
簡単に投稿の雰囲気を調整できるのが「投稿パーツ」です。こちらの画像を見てください。
「商品をリスト化する」「会話形式で表示する」など、ご自身では調整が難しい設定をボタン一つで呼び出すことを可能にしたのが【投稿パーツ】です。
3-1 投稿パーツの設定方法
はじめに、右上のタブが「ビジュアル」になっていることを確認してください。
文章入力欄のすぐ上にある「Quicktags」をクリックします。
使いたい投稿パーツを選択して、クリックします。
| リード文 | 文章の概要や導入文を入力する際に使います。 |
| 背景付引用 | 文章を枠で囲って表示します。 |
| 水平スクロールテーブル | 3×3の表をボタン1つで作成できます。 |
| 価格カード | カードのように表示され、商品・業務情報などの入力に使えます。 |
| フロー図 | 行程や手続きの流れを手順に沿って図式化できます。 |
| イメージボックススタイル | 商品説明や業務説明などの入力に使えます。 |
| 料金プラン | 商品の特徴など比較したり、詳細ジャンプ機能付きの表です。 |
| ポイント説明 | 企業ポイントや理念など、見やすく表示できます。 |
挿入したら、すでに入っている仮の文章や画像を削除して、情報を入れてください。
始めにもお伝えしましたが、間違えた場合は「↶(取り消し)」で戻せます。はじめは不安かと思いますが、まずは使ってみて慣れていってください。