まずはじめに【スタートアップガイド】ブロックエディタ編

ここでは初心者でも簡単にできる『ブログの書き方』についてご説明していきたいと思います。

とはいっても…

「どこから初めていいのかよく分からない…」

と思いますよね。

ですが大丈夫です。

ぴと

私の方ででしっかりマニュアルとスカイプでサポートしていきますので、初心者の方でも迷うことなく進めることができますのでご安心くださいね。

ライター様の多くは、家事や育児・仕事と両立しながら作業される方がほとんどかと思います。

スキマ時間を上手に活用するためにも、記事の書き方の基本を知っておきましょう！

『ブログの書き方』簡単な流れにつ2いて

添削依頼前の見直しチェックの仕方は後ほど詳しくご説明します。

『ブログの書き方』実践編

編集画面が少し違いますが、操作方法は同じなので、ご安心ください。

テストライティング時の文字装飾については、ディレクターの指示をお待ちください。

作業は必ずGoogleのブラウザを使います。

一連の流れについて

記事作成の簡単な構成・ポイントをお伝えさせて頂きます。

以下のポイントは必ず押さえて執筆して下さいね。

情報収集はネットでも構いませんが、『書籍』や『雑誌』などでもOKです。

ぴと

情報を集めて「自分の言葉で書き直す」「自分の感想を交えながら書く」といいですよ。

初心者の方でも簡単なリライト方法についてはこちらの記事も参考にしてみてくださいね♪

≫初心者の方でもできるリライト方法

始める前に（ブロックエディタ画面）

ワードプレスにログインしてからの操作方法について解説します。

1. こまめに下書き保存
2. プレビュー表示のやり方

※モバイルでプレビューするとXやマップは表示されません。

ぴと

慣れないうちは「書いていたのが消えてしまった…」なんてよくあるので、こまめに下書き保存をするように癖をつけていきましょう

【注意！！！】

くれぐれも公開は押さないでください。

万が一公開してしまった場合は、そのままの状態でディレクターへ報告をお願いします！

下書き保存ができない場合(2024.2追記)

ブロックエディターで下書き保存ができない場合、特殊記号、または特殊文字が入っていると保存できないことが分かりました。

実際どんな風にアラートが出たりするのか動画にまとめましたので参考にしてください。

①ワードプレスのログイン情報をお渡しします

まずはじめに、以下のワードプレスのログイン情報をお渡しします。

受け取りましたら、実際にログインできるか確認してください。

ぴと

ユーザー名やパスワードを入力して無事にログインできたら教えてくださいね。

②「タイトル」と「キーワード」をお送り致します。

次に、あなた宛てに「タイトル」と「キーワード」をお送り致します。

「タイトル」と「キーワード」を元に、その内容に沿った記事作成をして頂く流れになります。

ぴと

慣れないうちは、見出しもセットでお渡ししますね。

③ 構成（大事ですので必ず一読してください）

※アイキャッチ画像の設定（記事の表紙みたいなもの）

【冒頭文】

100文字から200文字程度（キーワードを2回含む）

>>効率のいい冒頭文・まとめ文の書き方について

※吹き出しに使用したキーワードはカウントしません。文中で使用しましょう。

【見出し2】※1回目

(画像つきXの挿入)※URLが付いているもの・動画が入っているもの・リツイートのものはNGです。

本文

【見出し3】

※2つくらい設置

(画像つきXの挿入)※URLが付いているもの・動画が入っているもの・リツイートのものはNGです。

※内容を深堀していくときは、さらに「見出し4」を使います。

【見出し2】※2回目

(画像つきXの挿入)※URLが付いているもの・動画が入っているもの・リツイートのものはNGです。

本文

【見出し3】

※2つくらい設置

(画像つきXの挿入)※URLが付いているもの・動画が入っているもの・リツイートのものはNGです。

※内容を深堀していくときは、さらに「見出し4」を使います。

【まとめ】
(画像つきXの挿入)※URLが付いているもの・動画が入っているもの・リツイートのものはNGです。

100文字から200文字程度（キーワードを2回含む）

>>効率のいい冒頭文・まとめ文の書き方について

※吹き出しに使用したキーワードはカウントしません。文中で使用しましょう。

全体の文字数は3500文字以上のボリュームになるように仕上げてください。

2024.2　追記【注意】顔文字［(*´꒳`*)　m(_ _)m　^ ^　など］の使用は禁止です。

基本的な形として、この順番で書いていきます。

※所々に「吹き出しタグ」を用いると、文章にメリハリが出ますので併せて使っていきましょう。

≫吹き出しタグの使い方

※冒頭まとめのキーワード2回が使われているかは、後ほどお伝えするチェックリストにある便利ツール『単語カウント』を使って、必ず確認しましょう。

文中での「現在進行形」の文言を禁止します　2024.3追記

あくまで例ですが、↑こういった文言は、その時が過ぎてしまうと読んでいるユーザーは違和感を感じてしまいます。

※半年後や1年後まで読む人もいます。

なので、執筆の際に今一度ご確認いただきますようお願い致します。

ブロックのメニューバーについて

ここからはブロックを使いながら、実際の執筆画面で説明していきます。

若干画像と配置が異なる場合もありますが、操作は同じです。

ぴと

何度か呼び出しているうちに慣れてきます。

書き始める前に設定する事

作業を始める前に

• アイキャッチ
• パーマリンク（記事のURL）
• カテゴリー

は必ず設定するように徹底しましょう！

意外と忘れる人が多いので、記事を書く前に設定しておく”癖をつけておく”のがおすすめです(^^)

アイキャッチ画像の挿入方法

アイキャッチ画像は、サイトごとにテンプレートを準備します。

そのテンプレート内に文字入れを行っていただくようになります。

→サイトごとのテンプレート一覧

※必ず執筆サイトのテンプレートを使ってくださいね。

また、アイキャッチ画像はタイトルを文字入れした状態で完成となります。

下記、ツールをご使用ください。（ブクマしておきましょう）

>>バナー工房

1. 画像を選択する
2. 画像が選択されたことを確認
3. 画像を加工する→下記のフォント色やサイズに設定→文字設定を変更・反映
4. 文字を真ん中に移動
5. 現在の位置で文字を確定
6. 確認
7. 保存

• フォントサイズ
• 書体
• タイトルは真ん中に1・2列で表記

設定は統一なので、よろしくお願いします(^^)

「代替テキスト」「タイトル」「説明」の欄には、僕が送ったキーワードをコピペして貼り付けてくださいね。

★画像に入れるキーワードについて　

すべてのKWは入れずに「1語目と2語目」のみ入力していただくようお願いします。

ムッタ

画像の中央揃え＆フルサイズ設定も忘れずにね！

よくある間違い

添削していて、修正がもっとも多い点は以下になります。

• 画像が中央揃えになっていない
• 「代替テキスト」「タイトル」「説明」の欄にキーワードが入っていない

修正回数を減らすためにもぜひ覚えておきましょう。

パーマリンクの設定方法

パーマリンクとは、ブログ記事ごとに設定されるURLのことです。デフォルトでは記事タイトル（日本語）が設定されているので、これを英語表記に修正しましょう。

右側メニューバー「パーマリンク」をクリックして、URLスラッグを英語表記に書き換えます。

ぴと

入力の際は「半角英数字」で入力しましょう。

単語と単語の間には「-（ハイフン）」を入力して区切ってあげてくださいね。

ちなみに、英語表記にしないと、日本語URLの場合以下のように文字化けしてしまい、まるで信頼性のないページのように見えてしまいます。

こうなってしまうとGoogleは分からなくなってしまうんですね…

Googleにしっかり伝えるためにも半角英数字で英語表記してあげてください。

設定したパーマリンクは絶対にいじらない事

パーマリンクは「その記事のURL」で、実はとても重要な要素がたくさん含まれています。

したがって、一度設定したパーマリンクは絶対にいじらないようにしてください。

記事を公開後に、変更せざるを得ない状況であれば必ず担当のディレクターに相談してくださいね。

カテゴリーの設定方法

 

カテゴリーは、関連記事をひとまとまりにするためのもので、「フォルダ」と例えられることも多いです。

原則1記事につき「カテゴリーは1つ」だけチェックと覚えておいてくださいね。

見出し設定のやり方

見出しにしたいテキストを入力して、ブロック変換で見出しにします。

また段落の文頭に、見出しの数値に応じた「#」を入力することで、すばやく見出しを呼び出すこともできます。

ムッタ

使いやすい方を選んでくださいね。

見出しの上には必ず「行間」を設定しましょう！

 

【2024.2追記】

スペーサーではなく「フレキシブルスペーサー」を使いましょう。

リストの挿入方法

 

「番号あり」と「番号なし」リストの作成方法について解説していきます。

リストは箇条書きだけでなく、番号付きのリストにもできます。

項目によって使い分けましょう！

↓③④のインデントも見やすくなるので使っていくのもいいでしょう。

ムッタ

ユーザーにとって読みやすい記事を意識しましょう！

ボックスの挿入方法

注意：アイコンボックスは使用しないでください。

※動作に不具合が起きるため

画像を挿入する方法

 

左上の「＋」アイコンをクリックし、「一般ブロック」から「画像」をクリックします。

画像ボックスを追加すると、3つのボタンが表示されます。

新たに画像をアップロードする場合は「アップロード」、すでにアップロードしているファイルを利用する場合は「メディアライブラリ」をクリックします。

画像URLを直接指定したい場合は「URLから挿入」をクリックしてください。

画像をアップロードすると、エディタ上に画像が表示され、画像の位置や大きさの調整もできます。

ムッタ

大きいサイズを小さくするのはいいですが、小さい画像を大きくする（ピンぼけ画像）の使用はNGです。

また、Altテキスト（リンク切れなどで画像表示できない時の代替テキスト）の設定ができますが、ここはいじらなくてOKです！

画像挿入時の注意点

画像挿入時、以下の3か所にはKWを入力してください。

キーワードは左から2語だけでOKです。（すべて入れる必要はありません）

• タイトル
• 代替テキスト
• タイトル

ムッタ

ここはしっかり覚えておいてくださいね。かなり重要です！

Xの埋め込み方法

 

埋め込みたいツイート投稿で「･･･」をクリック

Twitter（web版）にログインして、埋め込みたい投稿右上の「･･･」をクリックしましょう。

「埋め込み」のコードをコピー

「Embed Tweet」の選択肢をクリックしましょう。

そうすると

「Copy Code」の選択肢が出てきます。コピーしておきましょう。

「カスタムHTML」のブロックに貼り付ける

先ほどのコード、WordPressにそのまま貼り付けても、コードがそのまま表示されてしまいます。

うまく貼り付けるには「カスタムHTML」のブロックを取り出して、その中にコードを貼り付けましょう。

すると「カスタムHTML」のブロックができるので、

こんな感じになったら完成！

ページを公開すると、Twitterの埋め込みがうまくできていることが確認できます。

インスタの埋め込み方法

インスタグラムも埋め込み可能ですが、埋め込みブロックはないので、代わりに「カスタムHTMLブロック」を使用します。

ムッタ

ちょっと難しい話で何言ってるかよく分かんないですよね！？早い話、前は埋め込みできたようなんですが、現仕様では「カスタムHTMLブロック」を使ってインスタを表示させていきます、って話です！

 

XやInstagramが表示されない不具合が起きたら

『マニュアル通りにXやInstagramを挿入したけど表示されない。』また、『挿入直後は表示されたのに時間が経つと（下書き保存を押すと）表示されない。』という不具合が起きることがあります。

その場合は、下記の方法を試し、添削依頼時にX（Instagram）が表示されず、こちらの方法で表示させたことをディレクターに伝えてください。

XやInstagramが表示されない原因として、コードが消えてしまうことが考えられます。

コードの最後に手動でコードを入れ、表示されるかお試しください。

★Xが表示されない場合に手動で貼り付けるコード

<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

★Instagramが表示されない場合に手動で貼り付けるコード

<script async src=”//www.instagram.com/embed.js”></script>

Googleマップの挿入方法

1. 上記方法で、コードを取得
2. Twitter等と同じ操作方法でHTMLに貼り付ける
3. 新しいタブでプレビューで確認

引用タグの使い方

第三者のコンテンツを引用するときは、最低限のルールを知っておく必要があります。

他人の著作物を自分の著作物の中に取り込む場合，すなわち引用を行う場合，一般的には，以下の事項に注意しなければなりません。

（1）他人の著作物を引用する必然性があること。
（2）かぎ括弧をつけるなど，自分の著作物と引用部分とが区別されていること。
（3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）。
（4）出所の明示がなされていること。（第48条）
（参照：最判昭和55年3月28日 ｢パロディー事件｣）

（引用：文化庁「 著作物が自由に使える場合 (注5)引用における注意事項」）

このことを踏まえて、第三者のコンテンツ内から文章を引用する際は、

1. 引用元を記載
2. 引用先のリンクを貼ること
3. 2～3行の短い文章を引用すること

を必ずやっていきましょう！

ムッタ

やり方、注意点は↓こちらの動画でも説明しています。

 

※左側の「ボックス」以外にも、「/ボックス」で呼び出すこともできます。

2024.2追記ブロックエディターの引用タグについて

/BOXで呼び出した中に入っているので、今後はこちらを使ってくださいますようお願いしますm(__)m

一通り記事を書き終えたら

記事が完成したら、最後は必ずプレビュー（モバイル）で出来栄えを確認しましょう。

エディタ上と実際のブログでは、レイアウトが違っていることがありますので、イメージ通りに仕上がっているか必ず確認してくださいね(^^)

「プレビュー」は以下の3ステップで行います。

1. 画面の右上にある「プレビュー」のボタンをクリックします。
2. 表示されるメニューの「デスクトップ」「タブレット」「モバイル」の中から、表示を確認したい媒体を選択します（選択されている媒体にチェックマークが付きます）。
3. 最後に「新しいタブでプレビュー」をクリックすると、プレビューが表示されます。

ムッタ

確認する時は「小声」に出してみて読んでみると違和感に気づきやすいのでおすすめです。

文字数の確認も忘れずに！

依頼した文字数に達しているかどうかは以下の手順で確認します。

執筆後は必ず依頼文字数を満たしているか必ず確認をお願いします。

①左上の3本線をクリック

②「アウトライン」をクリック

そうすると「文字数」「所要時間」などが表示されます。

下へスクロールすればタイトルや見出しの階層も確認できますので、一通り書き終えたら確認するようにしましょう！

文字装飾のルール

文字装飾は、ユーザーの滞在時間や離脱率などに影響する、とても重要な作業です。

ポイントをおさえて、よみやすい文字装飾を意識しましょう。

また、過剰な装飾は重要度がさがってしまうので、注意が必要です。

文字装飾が多すぎることで、かえって読みにくくなってしまわないように、ルールに沿って装飾してみてくださいね！

文字装飾の種類

 

★黒文字・太字・24px ＋マーカー１太字（赤）
タイトルの答えになる場所、記事内に1か所だけに使用すること。

★黒文字・太字・24px
見出し『2つ』に対して『文字装飾1つ』くらいでOK。

★赤文字・太字(カラーテキスト1太字)
※文字サイズは16pxで変更なし
危険や否定となるところがあれば、記事内1か所だけに使用すること。
※テンプレがあるもので、赤文字で「※この記事にはネタバレが含まれます」の指示があるものはそのまま進めてくださいm(__)m

★出典元明記は11px

文字装飾の数

文字装飾は見出し『1つ』に対して『文字装飾1つ』もしくはなくても良いです。

見出し『2つ』に対して『文字装飾1つ』くらいでOK。

タイトルや見出しのアンサーになる部分を中心に文字装飾をしていきます。

文字装飾の範囲

なるべく短く端的（1.2語）に、長くなりすぎないように気を付けましょう。

長すぎは、読者の方が読みづらいと感じてしまうので注意です^^

文字装飾をたくさんつけてしまうと、そこにしか目が行かなくなるので、最も伝えたい部分に絞りましょう！

【装飾範囲のNG】

繋ぎ文字や記号には装飾を付けないでください。

装飾範囲の正しい例)

• ○○や○○。
• ○○・○○！

上記の部分に装飾したい場合、○○の部分だけ強調してください。

繋ぎの文字や記号は装飾せず、伝えたい文字だけ強調しましょう。

※LP記事の文字装飾のルール変更はありません。

添削依頼の前に確認すること（必須）

マニュアルにもあります、基本的なところをご自身で簡単に確認できるチェックシートを用意しています。

添削に出す前に、毎回必ず下記のチェックシートを使い全て確認してから提出しましょう。

記事管理チェック表

こちらでは記事の管理もできますので、コピーしてお使いください。

添削を依頼する際は、チェック表にあるコピペチェックツールで前半・後半に分けて(無料版は文字制限があるので)類似度と一致率が30%以下になっていることを確認し、前半◯◯%、後半◯◯%という形で一致率の報告もあわせてお願いします。

いつでも使えるようにブクマしておきましょう♪

修正の回数が減れば、投稿数（＝納品数）も増えるので、セルフチェックは毎回お願いします。

ディレクターへ添削依頼をする

お疲れさまでした！これで投稿前の作業は完了です！

最後にディレクターへ添削依頼をだしてくださいね(^^)

↓こちらのテンプレを使って報告ください。

記事が完了したので添削をお願いします。

1. ユーザー名：
2. サイト名：
3. 記事タイトル：
4. キーワード：
5. コピペ率：前半◯◯%、後半◯◯%

よろしくお願いします。

ムッタ

原則24時間以内に添削してお返ししますが、連絡がない時は再度連絡をいただけますと助かります。

その他の便利機能①：表作成のやり方

 

Flexible Table Block(フレキシブルテーブルブロック）プラグインで表を作成する方法を紹介します。

ムッタ

元から標準で「テーブルブロック」から表を作成することもできますが、Flexible Table Blockで作成する方が自由度が高いのでおすすめです。

【Flexible Table Blockの呼び出し方】

①WordPressの投稿画面左上にある「＋」ボタンをクリックします。

②メニューの中に「Flexible Table」が追加されているので、こちらをクリックしてください。

③投稿画面にFlexible Table Blockが追加されますので、左下にある「カラム数」「行数」の数値を変更して「表を作成」をクリックすれば完了です。

ムッタ

「カラム数」「行数」で何列・何行の表を作成するか決めます。最初は実際にいじってみて感覚を掴んでみるのが早いです。

ちなみに、毎回「＋」ボタンをクリックするのが面倒な方は、投稿画面上で「/」を入力した後「fle」と入力することでも簡単に呼び出せます。

ムッタ

慣れてくるとこっちの方が早いですね。一応こういった「呼び出し方法もある」ことは知っておきましょう！

セルの結合と分割

 

はじめに統合したいセルを選択します。

1. Shiftキーを押しながら統合したいセルをクリック
2. テーブルマークをクリック
3. 「セルの統合」をクリック

上記の手順でセルを統合できます。

今回は試しに結合したセルに「セルの統合」と文章を入力してみます。

プレビューで確認すると、下画像のようになりました。

ムッタ

①~③の手順を何回か繰り返せばすぐに覚えますので、実際に触ってみるところから始めていきましょうね！

セルの文字色や背景色を変更する方法

 

①セルのテキストを装飾する際は、右上の設定ボタンをクリックします。

※歯車マークが別なマークになっている場合もあります。

②メニューが表示されます。

セルごとのテキストを装飾する場合は「セル設定」をクリックしてください。

ムッタ

画面右下にある「色」からテキストや背景色では操作しないでくださいね！ここで設定すると、テーブル内の全てに適用されることはを覚えておきましょう。

③「セル設定」にある「セルのテキスト色」と「セルの背景色」を変更すると、選択したセル内のテキストを装飾可能です。

④各項目の色をクリックすると、詳細が表示されます。

細かく色をカスタマイズしたい時は、「カラー名をクリック」「マウスで任意のカラーに設定」で決めることができます。

マウスで任意のカラーに設定するか、カラーコードを入力する方法もあります。

注意点として、基本的なカラーは以下の通りになります。

ムッタ

ユーザーが読みやすくなるので、こういった細かい部分にも配慮していきましょうね。

⑤最後にプレビューで変更が適用されているか必ずチェック

ムッタ

あまりこだわらず、シンプルで見やすい表作りを意識しましょう！

また、Flexible Table Block(フレキシブルテーブルブロック）プラグイン公式では日本語でも対応していますので、もっと知りたい方はこちらも参考にしてみてくださいね。

他にも便利な機能はたくさんあります！

≫Flexible Table Block公式（日本語マニュアル）

その他の便利機能②：吹き出しの使い方

 

①吹き出しを挿入する場所を選択します。

②呼び出したい場所に：「/」＋ 「吹き出し」 と入力

③あとは好きなキャラを選んでコメントを入れるだけで完了です。

不明な点はそのままにせず、担当のディレクターに確認して進めましょう！

検索機能の活用

当マニュアルには検索機能がついております。

最初はマニュアルを確認しながら進めていただきたいので、お困りのことがありばマニュアルの検索機能を使って調べてみてくださいね。