新編集方法

新編集方法の解説を始めます。

概要

まず簡単にこれまでの編集方法との違いをまとめます。

これまでは、ただ文章を打ち込んでいくだけでした。
そして公開した後、ページを開いて確認し編集し更新しページを開いて…
の流れですね。

新編集画面は
「ブロックごと」に積み木のように、コンテンツを積み重ねていきます。

見出し、本文、画像などをブロックごとに編集可能なので、入れ替えも簡単です。
加えて、殆ど公開画面と同じですので、イメージを掴みながら作成しやすいのが特徴といえるでしょう。
動作も軽く、慣れるととても使いやすいエディタだといえます。

ですので、基本的には直感で操作できるように作られております。
始めて編集する際には、「ツアー」という簡単な操作方法の解説がはじまります。

こちらでも、操作の基本について、実際に具体的なやり方の解説を始めてまいりましょう。

前置き

前置きとして、新規作成後「タイトル」と「パーマリンク：スラッグ（URL）」を決定します。
右下の「カテゴリ」も忘れずにチェックを入れておきましょう。

続いて「ページビルダー」のタブをクリックします。
すると編集画面が切り替わりますので、真ん中の「ページビルダーを起動」をクリックします。

すると新しく画面が開きます。
新規作成したばかりの場合、真っ白の画面です。

まずは右上の「+」をクリックしてみましょう。

すると次のような画面が開きます。
まずは記事冒頭部分の要約を書くために「テキストエディタ」を使ってみましょう。

ドラッグアンドドロップで、真ん中に持ってきます。
次の画面が開きますので、右上の小さな□をクリックしてみましょう。

拡大画像に切り替わりますので、編集しやすくなります。

この画面はいつもの編集画面と使い方は同じです。

本文を書きましたら、右下の「保存」をクリックすると保存されます。

では次に、見出しを追加してみましょう。

先程と同じように右上の「+」をクリックします。

「見出し」を先程のテキストブロックの下へ「ドラッグアンドドロップ」してみましょう。

すると、見出しが入れられる画面が表示されました。
「見出し」の部分へ文章を記載します。

次に上部の「スタイルタブ」をクリックします。
「タグ」の部分から見出しの種類を選択しましょう。
例「h3」など

選択しましたら先程のように、右上の「保存」をクリックすることで保存されます。

更にその下へ「テキストエディタ」で追加すると、このようになりました。

このブロックにマウスを持っていくと左上に記号が表示されます。
これは左から「ドラッグアンドドロップで移動」「スパナのマークは編集」「２重の□は複製コピー」「×は削除」
がそれぞれクリックすることで可能です。
一通りコンテンツを作成ましたら、大本の画面右上の「終了」をクリックしましょう。

そうすると次のメニューが表示されますので、
「Publish」をクリックすることで、保存されます。
保存されると同時に公開後のページに切り替わりますので、
わざわざ確認のために別にクリックする必要はございません。

ちなみにメニューの左から「削除」「下書き保存」「公開：更新」「キャンセル」となります。

切り替わり表示されたページを編集したい場合には、
上部のメニューに「ページビルダー」がありますので、そちらをクリックすれば
先程の編集画面に切り替わり戻ります。

はい。
基本的な操作方法は以上です。

あとは見出しとテキストエディタを使うだけでもスイスイと作成できます。
画像を入れたい際には、「画像」をドラッグアンドドロップするだけです。
基本的にはこれだけでも作成できます。
慣れてきたら、他もモジュールも挿入しながら試しつつ慣れていってください。

ここではもう１つだけ、基本的なブロックの大元となる
「列：カラム」につきまして添えておきましょう。

右上から「列のタブ」をクリックします。

すると「カラム一覧」が表示されますので、
こちらから、ブロックごとに自由にカラム数を選択可能です。

例えば、２カラムをドラッグアンドドロップして、
左のブロックに画像、右のブロックにテキストエディタでコンテンツ
というデザインも簡単にできます。

これを交互に置いていくだけでも、文章だけのコンテンツより
かなり読みやすくなるかもしれませんね。

新編集画面の基本的な使い方の解説は、以上です。

コンテンツの作成が完了しましたら、
「投稿一覧」の該当するコンテンツの編集画面を表示し、仕上げを行いましょう。

仕上げとは、右下の「アイキャッチ画像」の設定と、
SEOのタイトルとディスクリプションの設定ですね。

最後に「公開or更新」をクリックすると完了です。

補足

そうなると見栄えをよくするために、
もっと画像を欲しくなるかもしれません。

一般的には、フリー素材のサイトをご紹介することで、
自分で探すように促すのでしょうが、
それすらももったいないので、こちらでサポートを用意しました。

NFSサポートセンターより、
「他に何か追加情報があれば」
の欄より、ご希望の画像の大まかなイメージをお知らせくださいませ。
例：可愛い犬または迫力のある犬、山、川、幻想的な画像など

数枚ご用意しダウンロード専用ページをお知らせいたしますので、
ご用意したものはそちらのページから受け取れるようにいたします。
※こちらは随時追加してまいります。
NFS内のみで使える画像としてダウンロードできるページとなります。

チェック事項

最後にまとめとして、流れとチェック事項を添えておくことにしました。

1. タイトル記入
2. パーマリンク変更
3. 該当するカテゴリにチェック
4. 概要⇒見出し⇒本文⇒見出し⇒本文作成
5. SEOタイトルとディスクリプションをチェック
6. アイキャッチ画像（右下）へ挿入

雛形を保存し活用する方法

ページビルダーで予め「２カラム　見出し+コンテンツ左+画像右」など
雛形として保存し、次から使用することが可能です。
※気に入ったデザイン構成などが出来ましたら、保存機能を活用していきましょう

１，スパナのマークをクリックして編集画面を表示させます

２，下にある「名前をつけて保存」をクリック

３，自分で分かる名前を付け、全体では「いいえ」を選択し「保存」をクリックします

４，次からは右上の「+」から「Saved」を選択し、保存した雛形を
ドラッグ・アンド・ドロップすることで簡単に使用できるようになります。

基本構成

次のような基本構成が読みやすいといえます。

１，「列」で２カラムを設置　

２，見出し①+コンテンツ左②+画像右③を
それぞれドラッグ・アンド・ドロップ

コンテンツと画像はドラッグ・アンド・ドロップで
簡単に入れ替えて逆にすることが可能です。

見出しはH3がデフォルトですので、h4に変更もできます。

雛形の使用方法

雛形を作ってありますので、その使い方です。

ページビルダーの右上「Saves」から
「雛形（見出し+コンテンツ+画像）」をドラッグするだけです。
内容と画像を差し替えるだけでお使いいただけます。

アイキャッチ画像の大きさとリンクの色につきまして