【WordPressでブログ構築⑦】記事作成から投稿までのやり方と注意点(Cocoon編)

Wordpressで記事作成

WordPressでブログ構築講座7回は「記事作成から投稿までのやり方と注意点」について紹介します。

テンプレートはフリーのテンプレートであるCocoon(コクーン)を使用しています。

アフィ子
やっと記事を投稿するところまで来ましたね!
さとやん
うん、長かった・・・。でも言ってみればここからがスタートなんで。
アフィ子
そうですね。記事の書き方って何か注意があるんですか?
さとやん
いくつか守っておきたい注意点があるから、これから詳しく説明するね!

記事作成から投稿までの基本的なやり方

今回は初心者向けコンテンツなので、あくまでWordpressでの記事投稿の流れを紹介します。

(ネタ選定やキーワード抽出、SEOを意識した記事の書き方については、これからたっぷり紹介していくので楽しみにしていてください♪)

記事投稿(公開)までの流れは以下のとおりです。

ここにタイトル

①タイトルを設定する

②見出しを設定する

③記事を書く

③-1文章を書く

③-2文字装飾をする

③-3画像・動画・SNSのタグを挿入

④プレビューで表示確認

⑤カテゴリーを設定する

⑥タグを設定する

⑦サムネイルを設定する

⑧SEO対策項目を設定する

⑨記事を公開する

①タイトルを設定する

新規記事は「投稿」→「新規追加」から作成します。

Wordpressのタイトル設定

タイトルは一番上の入力項目です。

記事タイトルは32文字を目標に設定しましょう。

理由は検索エンジンの検索結果一覧に表示される文字数が概ね32文字だからです。

SEO対策的にというよりかはユーザの視覚的な対応ですね。

Wordpressの見出し設定

②見出しを設定する

記事を書く前に、まずは見出しをすべて書き出しておきます。

そのあと、文章を選択します。

Wordpressの見出しの設定

「段落」の中から「見出し2」を選択すれば見出しの完成です。

Wordpressで見出し設定
Wordpressの見出し設定

見出し2の中にさらに小見出しを作りたい場合には「見出し3」を指定します。

さらに下を指定するには見出し4→見出し5と指定していきます。

③記事を書く

③-1 文章を書く

見出しごとに文章を書いていきます。

1文が長すぎると読みづらいので、ある程度のところで切りましょう。

また、文字だけでワッーっと表現されていると行間がなくてユーザも目が疲れてしまうので、適度に改行を入れます。

Wordpress記事の書き方

あと重要なのがスマホ見え。

PCでは読みやすく感じてもスマホだと文章が長く感じる場合があるため注意です。

GoogleChromeの場合、F12で「開発者ツール」というのが開きます。

で、左上のスマホマークみたいなところをクリックすると、スマホの画面見えを確認することができるので便利ですよ♪

 

あと、改行位置によっても読みづらくなってしまう可能性があるので、1文字2文字で切り替えしてしまっている場合は調整しましょう。

Cocoonの場合、記事の編集画面での折返し位置が実際の画面とほとんど同じなので、改行位置の目安が付けやすいところがいいですね(^^)

 

③-2 文字装飾をする

太字や文字色・背景色などを変更して文章を装飾する。

Wordpress記事作成

ユーザが読んでいてわかりやすいように、強調したい箇所を装飾します。

Cocoonはスタイルの素材が豊富なので様々な装飾が使えますが、黄色のアンダーバーがシンプルでいいんじゃないでしょうか。

あと、おすすめしたいのが箇条書きやポイントなどをまとめる際に使える「ボックス」。

こんな感じでかわいい囲みを作ることができます↓

ボックスの種類はたくさんあるのでいろいろ試してみてください(^^)

Wordpressで文章の装飾

③-2 画像を挿入する

画像を挿入する際にはいくつか意識しておきたい点があります。

それは「ファイル名」と「代替テキスト」。

サーチコンソールのヘルプによると、ファイル名は意味のある名前を、代替テキストには画像の説明をかきましょう、と注意書きがあります。

Google画像検索に関するおすすめ方法

検索エンジン最適化(SEO)スターターガイド

ファイル名はおまじない程度ですが、代替テキストはヘルプで何度も出てくるため、しっかりと意識しておいたほうがいいと思います。

 

まずは画像をアップロードします。

投稿画面にファイルをドラッグアンドドロップすればアップロードできます。

記事に画像を挿入する際は、「メディアの追加」から画像を選択するだけです。

このときに代替テキストを入力しておきましょう。

Wordpressの代替テキスト設定

③-3 動画やSNSタグを挿入する

動画やSNSなどを挿入したい場合には、対象サービスから「埋め込みタグ」を取得してWordpressに貼り付けます。

たとえはYoutubeであれば、動画の「共有」から「埋め込み」をクリックすることでタグを取得できます。

Wordpressの動画埋め込み

あとはそれを「テキスト」モードで貼り付けるだけ。

簡単ですよね(^^)

Wordpressの動画埋め込み

 

ツイッターも同じノリです。

対象ツイートの右上のプルダウンを開いて「ツイートをサイトに埋め込む」を選択。

埋め込みタグを取得後、Wordpressにテキストモードで貼り付けます。

Wordpressにツイッターを埋め込む

画像を中央寄せで統一しているので、動画やツイッターが左寄せだと統一性がないですよね。

なので、ここで一工夫してすべて中央寄せにします。

 

【Youtube用のクイックタグを作成】

以前、プラグインの記事でAddQuickTagというものを入れました。

(動画の36分31秒くらいから解説してます)

【WordPressでブログ構築⑤】これだけは入れとけ!おすすめプラグイン12選!

これを使って動画の中央寄せのボタンを作ります。

追加するクイックタグ

ボタンのラベル:中央寄せ

開始タグ:<div align=”center”>

終了タグ:</div>

使用箇所:すべてにチェック

記事に挿入したYoutube動画を選択した状態で、作成したタグを適用してみてください。

動画が中央によるはずです。

 

【2019/4/23 追記】

Youtubeの中央寄せですが、タグを作らなくてもCSSに以下を追加することで行けましたので試してみてください。

/* Youtube(iframe)を中央寄せにする */
.video-container {
margin: 0px auto;
}

 

【ツイートを中央寄せにするCSS】

ツイートの中央寄せについてはもう少し簡単です。

共通のCSSに中央寄せの設定を追加するだけで、以降は意識しなくても中央寄せになります。

外観 > カスタマイズ > 追加CSS と進みます。

ツイッターの中央寄せ

CSSに以下のコードを設定して「公開」をクリックします。

ツイッターの中央寄せ

/* ツイートを中央寄せにする */
.twitter-tweet{
margin: 0 auto;
}

これでツイッターを埋め込んだ際には勝手に中央に配置されます。

(うまく反映されない場合はキャッシュが残っている可能性があるので、Ctrl + F5で画面リロードをしてください)

④プレビューで確認する

プレビューボタンで記事を確認します。

文章に誤記がないか、装飾が適用されているか、メディア(画像や動画やツイッターなど)が想定どおりに表示されているかを確認します。

⑤カテゴリーを設定する

記事のカテゴリーにチェックを入れます。

カテゴリーは1記事1つとしましょう。

Wordpressのカテゴリー設定

⑥タグを設定する

タグはカテゴリーとは別次元のグルーピングと考えてください。

カテゴリーに該当するものはないけど、今後同じような属性の記事を書いた際に類似グループとして扱えるようになります。

 

Wordpressでタグ設定

タグはカテゴリーと違って、複数設定をしても問題ありません。

カンマ区切りで一度に複数のタグを設定することができます。

⑦サムネイルを設定する

Cocoonの設定で最初の画像をサムネイルに設定するようにしていますが、もしもその記事で別のサムネイルを設定したい場合にここで画像を指定します。

Wordpressのアイキャッチ画像

⑧SEO対策項目を設定する

メタキーワードのみ設定します。

以前は検索エンジンからかなり重要視されていた項目ですが、現在はさほど重要ではないとされています。

ただ、いつまた重要視されるかわからないため一応設定しておきましょう。

Wordpressでメタキーワード設定

⑨記事を公開する

記事を公開する際には、「即時公開」と「予約投稿」の2種類があります。

指定した日付・時間で記事を自動的に公開することができます。

Wordpressで記事の予約公開

記事構成の注意点

上で紹介した内容を含みますが、記事作成時の注意点を確認します。

 

ここにタイトル

①見出しの階層構造は正しい順序で!

②カテゴリーの設定は1記事につき1つまで

③画像には代替テキストを忘れずに!

見出しの階層構造は正しい順序で!

見出しの構造は「見出し2」→「見出し3」→「見出し4」→・・・といったように必ず昇順で途中の抜けがないように構成しましょう。

見出し3→見出し2(入れ子が逆)

とか

見出し2→見出し4(見出し3を飛ばし)

ダメです。

理由は階層構造的にいびつでSEO的にも非推奨だから。

ちなみに、見出し1は記事タイトルで使用されているので、本文で使用するのは見出し2からになります。

カテゴリーの設定は1記事につき1つまで!

カテゴリー・メニュー・ウィジェットでも紹介しましたが、カテゴリーの設定は1つの記事につき1つまでとしましょう。

複数設定することもできますが、それだと「カテゴリー:記事=多:多」の構成となり、サイトの構成が煩雑になってユーザ的にもSEO的にも煩雑化するからです。

例えば、小学校のクラス分けで1人の生徒が複数のクラスに所属していたら、学校や先生は生徒の管理がめちゃくちゃ面倒ですよね^^;

なので生徒は1クラスに所属するのがルールです。

どうしても別のカテゴリーとしてグルーピングしたい場合には「タグ」を使います。

タグは小学校でいうところのクラブ活動のようなものです。

生徒は複数のクラブに所属できるので、クラス分けとは別の概念でグルーピングができます。

(ただし、タグ設定も付け過ぎは注意です)

画像には代替テキストを忘れずに

画像には「代替テキスト」の設定というのがあって、画像が表示されない時に文字列で表示されます。

これ、忘れがちなんですけど最初からしっかりとやっておいたほうがいいです。

なぜかというと、SEO的に結構重要視されていて、画像検索からのアクセスを取り込めるから。

以前自分でツイートしてました。


代替テキストは画像のタイトルみたいに書いてオッケーです。

ちょっとめんどくさいですけどね・・・。

まとめ

というわけで、これにてWordpressでのブログ構築講座は終了です!

お疲れ様でした!(自分に向けても・・・)

 

WordPressは全然難しくはないですが、なれるまで少し時間がかかると思います。

とにかくたくさん記事を書いて覚えていきましょう。

そしていろいろといじってみてWordpressやテンプレート、プラグインの機能を使い倒してみてください。

僕も今回Cocoonの設定をたくさん触ったので、どこに何の設定があるかは把握することができました。

どんなことができるのか、がわかっているだけで今後のブログ運営の糧になると思います!

それでは最後まで読んでいただきありがとうございましたm(_ _)m

22 件のコメント

  • さとやんさん。こんにちは。
    以前も1度、質問させていただきました。

    さとやんさんのYouTubeがとても参考になり、テーマCocoonでブログを順調に書いています。

    今日、記事を更新したら更新日がブログカード?に表示されないんです。

    ワードプレス内のCocoon設定の投稿設定の、投稿関連情報の表示のチェックは、投稿者名の表示以外は全てチェックしております。

    ワードプレスの記事内の設定右側の更新日変更では、更新にチェックが入っています。

    午後からいくら調べても解決できなくて、さとやんさんのYouTubeも拝見しなおしましたが、更新日の表示の事がわからなくて、

    聞いてしましました><

    何か設定間違ってるんでしょうか?

  • 文の途中で送信しちゃいました。

    何かわかれば教えていただきたいです。

    宜しくお願い致します><

    • ともこさん

      こんにちは!さとやんです。
      更新日の件ですが、Cocoon設定のブログカードの設定は変更していますか?
      Cocoon設定 > ブログカードタブ > 日付表示 > 更新日にチェックで更新。

      たぶんこれじゃないかと思われます。
      確認してみて下さい(^^

  • さとやんさんへ

    お返事、ありがとうございます。

    ブログカード設定してませんでした笑泣 (T_T)

    今、ブログカード設定の更新日にチェックを入れて更新しました(ブログも更新)が、

    やはり更新日が表示されないです(>__<)

  • 追記
    ワードプレスの記事内の更新変更のチェッを、更新日を設定に変更してみて、更新しましたが、やはり表示されません。。泣

  • 度々、すいません。
    解決致しました。

    調べてみて今やっとわかりました。

    インデックス、投稿、ブログカード、SEO設定の更新に全てチェックを入れてみたら表示されました。

    いつも、ありがとうございます。

    • ともこさん

      すいません、バタついてて返信が遅れました(^^;
      解決されたようでよかったです。

      自分の方ではブログカードの設定でうまくいったんですけどね。
      もしかしてプレビュー画面見てたり、キャッシュが残ってたりしたのかな?

      結果オーライですが☆

  • 最近本サイトを参考にWordpressでブログを作成しようとしています。本文を記載してみてプレビューボタンを押しても本文がプレビュー画面で表示されず困っています。タイトルは表示されます。上記不具合について何か心当たりありますでしょうか?超基本的な質問で申し訳ございませんが、御教授いただけますと幸いです、

    • こんにちは!コメントありがとうございます。
      この現象について1点だけ心当たりがあります。

      それはURLの設定です。
      ひょっとしてURLに日本語名称が入る形式になっていないでしょうか?

      URLにカテゴリー名を入れているサイトがあるのですが、
      「ストロベリーナイトサーガ」という日本語文字を入れたら
      アッキーさんと同様の現象が発生しました。

      原因特定までは至らなかったんですが
      カテゴリーのスラッグをアルファベットに変更したところ解消されました。

      僕が今回の件で思い当たるとしたらこのくらいです。
      何かのヒントになれば幸いですm(__)m

  • さとやん、こんにちは。さとやんさんのブログを参考にアフィリエイトを始めました。ありがとうございますところで、さとやんさんは記事を外注したことありますか。毎日欠かさずPCに向かいますが、記事が思うように増えていかず、悩んでいます。外注に出すことにメリットはあるでしょうか。さとやんの意見を聞きたいです。よろしくお願いします。

    • ちこさん

      こんにちは、さとやんです(^^
      外注化はしていますよ。

      自分もちこさんと同じように
      会社員時代、仕事が忙しかった時期に
      手を止めたくなくて外注化を始めました。

      外注化のメリットはたくさんあります。

      1.自分が書かなくても記事が更新される
      2.自分よりも得意な人が記事を書いてくれる
      3.ブログが早く構築されるのでデータが集まる
      4.レバレッジがかけられるので報酬がぐっとアップする
      5.外注さんからの書きたい記事の提案をもらえる
      6.仲良くなるとビジネスパートナーとして相談相手にもなる
      (5はこちらでいったん判断しますが基本的にOKを出します^^)

      ぜひ始めてみて下さい。

      ただし、外注化を始める際は1点だけ注意があります。
      それはお願いする仕事に関して「成果の再現性」があることです。

      このやり方でお願いすれば、自分がやった場合と
      同等の成果を期待できる、という確信があるときですね。

      これがないまま外注依頼を出すと
      金銭的なコストと教育時間コストのダブルパンチを受け、
      あげくの果てに外注さんもいなくなってしまうという目に合います。
      ↑これ僕が実際に体験済みです(^^;

      もちろん、外注さんも最初から自分と同じレベルではないので、
      最初は品質が低いとは思います。

      でも、教育していけば今の自分と同等に成果が再現できるノウハウが
      ちこさんの中に確立していることが必要条件だと思っています。

      参考になれば幸いです☆

      • さとやんさん、お返事ありがとうございます。とってもよく解りました!ありがとうございます!

        私は今、会社員をしていまして、平日にPCに向かう時間は平均で1時間くらい。100記事書こうとすると、1年あっても足りないくらいで、悩んでました。

        ココナラで1000文字 10記事で2万円、と言うのを見つけ、頼んでしまおうと思いましたが、さとやんさんの忠告通り、まずはどんな記事を書いてくださるか1記事だけ書いてもらうことにします。

        それでダメなところは教育して、次の記事でパワーアップして貰えばいいのですね!
        (私の教育のノウハウが心配ではありますが。)

        ちなみにライターさんに依頼する際は、具体的にはどんな指示を出すのですか。

        教えて頂ければ嬉しいです。

        よろしくお願いします(( _ _ ))

        (あと気になることが…質問する際、メアドの下にサイトってありますが、自分のサイトのURLを入れるのですか。シロウトで、すみません…)

  • ちこです。すみません、もう1つお伺いしたいことを忘れていました。

    外注さんに依頼した記事を、ワードプレスに直接寄稿してもらうのは何か問題がありますか。

    よろしくお願いします!

    • >まずはどんな記事を書いてくださるか1記事だけ書いてもらうことにします。
      そうですね。
      僕もテスト記事を2記事書いてもらってから採用可否を判断しています。
      ちなみに2000文字で500円(テスト時は400円)です。

      >ちなみにライターさんに依頼する際は、具体的にはどんな指示を出すのですか。
      スプレットシートに記事のタイトル、見出しをまとめてあり、
      No.で指定して書いてもらっています。No100~110までお願いしますーみたいな感じで。

      記事の書き方はエクセルのマニュアルとサンプル記事のURLを見て書いてもらいます。
      その後の添削や雑談はチャットワークで行います。
      (テスト期間はクラウドソーシングサイトのメッセージやりとりで)

      ・・・と、これまではこのやり方でやってきましたが最近は別の方法を考えています。
      本採用になったらZoomを使って直接音声指導。
      マニュアルはエクセルではなく専用動画サイトを用意。
      チェックリストだけはエクセル or スプレットシート。

      直接会話だとこちらの意図が伝わりやすく信頼関係も生まれやすいです。
      信頼関係が築けた外注さんは簡単にやめたりしません。
      以前、自分で作ったできの悪いマニュアルで意識齟齬が乱発して非常にコスパが悪い思いをしました。。

      好き嫌い・得意不得意があるかもしれませんが、可能であれば後者がおすすめです♪
      (もちろん、ていねいなマニュアルがあれば前者でもOKです!)

      >メアドの下にサイトってありますが、自分のサイトのURLを入れるのですか。
      ここは入れなくていいです。不要な項目出しててすいません(^^;

      >外注さんに依頼した記事を、ワードプレスに直接寄稿してもらうのは何か問題がありますか。
      僕はテスト期間を終えた時点からワードプレスでやってもらいます。
      ワードやテキストは転記が面倒なのでなるはやでやってほしいと考えています・・・。

      これまで特に問題が発生したことはありませんが、
      一応権限は「投稿者」までに制限しといた方がいいですね。
      画像のアップロード&自分の記事編集&公開ができます。

      • さとやんさん、おはようございます(╹◡╹)返信ありがとうございます!よく分かりました。やってみます!

        いつも親切にして頂いて、ほんとうに感謝してます。

        今はなんの成果もなく多少の不安もありますが、コツコツ続けて、いつか さとやんと肩を並べるくらい良いブログにして、ゆとリッチになるつもりです。

        ほんとうにありがとうございました!

        さとやん、

  • さとやんさん、こんばんは。何度もすみません。
    ライターさんへの報酬についての質問です。

    ライターさんの発掘はクラウドソーシングサイトでしますよね。
    そこで良いライターさんが見つかったとして、そのあとの取引も規約上、
    クラウドソーシングサイトですることになると思うのですが…。

    初めのテスト記事は良いとして、その後も「2000文字で500円」だと、
    ライターさんの取り分がとっても少ないような気がするのですが・・・。
    (ライターさんがクラウドソーシングサイトへ払う手数料ってありますよね・・・)

    ・・・大量発注で、それなりの報酬が発生するようにしてるのでしょうか?
    それともクラウドソーシングサイトに頼らない何か別の方法があるのですか。

    教えて頂ければ嬉しいです!よろしくお願いいたします!

    • こんばんは!

      >初めのテスト記事は良いとして、その後も「2000文字で500円」だと、
      ライターさんの取り分がとっても少ないような気がするのですが・・・。

      金額に関してはより出せる方がいいライターさんは集まりますね。
      でも僕の場合はこの金額で同意していただけいる方だけを採用しています。

      もちろん、その後いい記事を書いてもらえるようなら昇給もしていますし
      成果や期間に応じてボーナスを出すこともあります。

      あとは、納期がきつすぎないとか、書きたい記事をヒアリングするといった
      「待遇面」もアピールして募集することで結構集まってくれるものですよ♪

  • さとやんさん、おはようございます(╹◡╹)

    そうなんですね!分かりました。やってみます!

    まずは、記事の再現性を確保するため、どういった指示を出せばいいのか考え、今週末にはクラウドソーシングサイトで募集をかけます!

    いつも親切に回答して頂き、ほんとうに ありがとうござます。

    感謝しております!ありがとうございました!

  • 遅くの時間に失礼します。

    さとやんさん今晩は、最近さとやんさんの動画などを観ながら、ワードプレスを始めた監督と申します。
    いつもすごいなと思いながら観ています。

    私はパソコンもワードプレスも初心者なのですが、なんとか動画を観ながら、私のサイトのテーマをcocoonにして地道にやっておりましたが問題が発生しました!

    その問題とは、固定ページでは画像が表示されるのですが、投稿ページではプレビューでは画像が表示されるのですがサイトに入って観てみると、NO IMAGEと表示されていて画像が観れません(T . T)

    色々調べてみたものの初心者なもんで原因が分からずかなり焦っています。

    どうかお助けいただけないでしょうか?
    よろしくお願いいたします(´༎ຶོρ༎ຶོ`)

  • 連投すみません、奥田です。

    先日質問しました投稿した画像が表示されない
    件ですが、色々試してみた結果…

    ・プラグインを1つずつ停止しても投稿画像は表示されず

    ・テーマをcocoonからTwenty Seventeenに
    変えると投稿画像の表示がされる

    以上の事からcocoonの設定がどこかおかしい
    のかなと思ったのですがここからが解決
    できません( ; ; )

    お忙しいところ申し訳ないですが、良き
    解決策があれば教えて頂きたいと思います。

    よろしくお願い致します。

    • こんにちは。さとやんです!

      設定状況がわからないため推測になってしまいますが、
      アップロードした際に大きさごとに変更されたファイル名に
      正しくアクセスできていないのかもしれませんね。

      いくつか確認させてください。
      ・Cocoonに変更してからアップロードした画像が表示されないのでしょうか?
      (それとも既存Cocoon変更前のもののみ?)
      ・画像はどのサイズの画像も表示されませんか?(サムネ、中、大、フルなど)
      ・ファイル名を変更してアップロードしなおしてもダメですか?(全角→半角英数字)
      ・パーマリンク設定を変更してもダメですか?(投稿名→post_idのみ)

  • 早速の返信ありがとうございます!
    私からの情報量が少なくてすみません。

    確認事項ですが

    ・cocoonに変更して初めて画像を投稿画面に
    貼り付けるという作業をしたのでcocoonに
    テーマを変えた時点から画像が表示されません。

    ・画像のサイズはiPhoneで撮った写真を
    圧縮して(1番軽いサイズ)投稿作成画面で
    「メディアを挿入」で、アップロードしています。
    サイズは約 500×500ぐらいです

    ・ファイル名変更に関しては確か半角英数
    のままだったと思います。

    ・パーマリンク設定は何も触ってないです。

    という感じなので、仕事から帰ったらすぐに
    さとやんさんからのアドバイス通り試したい
    と思います!

    本当に丁寧に説明ありがとうございます(ToT)
    また報告したいと思います!

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA