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

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に以下を追加することで行けましたので試してみてください。


.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