【記事作成編】これくらいまでは使いこなしたい WordPress と Cocoon の使い方

よく分からないまま自分流で使っている人もいるかと思いますがちょっとした使い方を覚えるだけでも効率的に記事の質を上げることが出来ます。

この記事では使いやすく効果の高いところをメインで紹介していくので基礎知識として覚えておいて使いこなしていきましょう。

後回しでもなんとかなりますが、これぐらいは知っておかないと後からやり直すハメになって面倒なので一通りは理解しておくのがおすすめです。

関連 アフィリ戦略トップページ

[重要] いらない改行などの削除の仕方：ブロック削除機能を使う

いらない行やリストなどをBackspaceやDelキーで削除すると前後のタグ構造が壊れてデザインが崩れてしまうことがあります。

そういうときは「ブロック削除」機能を使うとブロックごときれいに削除できます。

やり方はエディターの上のほうにあるツールバーの右のほうの縦に点々 々 となっているオプションアイコンから選ぶかショートカットキーのCtrl＋Alt＋Zを使う方法があります。

これを知らないといろいろ面倒くさいので自分用のメモなどに書いてでも覚えておいたほうがいいです。

ツールバーはいろいろな便利機能のショートカットになっているので他の機能も理解して使えるようにしておきましょう。

WordPressはたまに壊れる：F5でリロードしてみよう

WordPressはいろいろなブラウザ上で動くCMSなので多くのブラウザに対応する必要がありバグが出やすい宿命にあります。（WordPressではなくブラウザに問題があることもある）

動きが遅くなったり、ちゃんと動かなくなってきたら、ページを読み直すかブラウザを再起動すると直ることがあります。

自動保存の最中に手動保存(Ctrl+S)しても壊れることがあるようです。

完全に動かないときはレンタルサーバーがメンテナンスなどで止まっていることがあるのでサーバー会社からのメールなどを確認しておきましょう。

プラグイン同士の相性で不具合が起こりやすい

今回の記事は記事編集中の話を主に扱っていますが、一番危ないのはプラグイン同士の相性による不具合です。

例えばヘッダーを編集するプラグインはいくつもあるのですが、同時に入れてしまうと複数のプラグインが別々に同じファイルを変更することになり不具合が起きやすくなります。

基本的には同じ部分に影響を与えるプラグインを複数入れるのは危ないのでNGです。

個々のプラグインが All in One SEO Pack などの総合プラグインと衝突する恐れもあるので総合プラグインも要注意です。（※総合を使うか個別を使うかちゃんと選ぶこと）

不具合は予想が難しいのでプラグインを入れる前は面倒でもサイト全体のバックアップを取る習慣を付けておきましょう。

ネット記事は見出しを付けるのがルール

ブログなどのHTML文書は本の目次のように章・節などに分けた入れ子のツリー構造にするルールがあります。（守らなくてもエラーなどにはならない）

この項目だと「見出し（Hタグ）を使う」が見出しでその下にあるこの文章などが内容になります。

このように「見出し＋内容」というセットで作っていくのがネット文章の作法です。

Googleはもちろんのことその他の検索エンジンもこれを前提にページを解釈しているはずなのでSEO的な必須対応項目になります。

見出し（Hタグ）の設定の仕方

今回使っているWordPressとCocoonのどちらの仕様かわかりませんが、見出しタグを使うと自動で目次を作ってくれるので便利です。（表示しない設定にも出来る）

何よりもブログを見てくれる人にとって便利なので記事の量が増えてきたら使ったほうがいいです。

Googleなどの検索エンジンもこの構造を解析しますので記事の内容は見出しを使って中身の分類がわかるようにしておいたほうがSEO的に少し有利になります。

見出しを挿入すると、見出しを選択したときに上のツールバーのH２などの部分か、ウィンドウの左上の段落を選択すると１～６の見出しが設定できるようになります。

H１はページタイトルが使うの自分では設定せずに、H2から見出し、H3が小見出し、といったように小さい数字から使っていきます。

このルールを守らないとGoogleから、

という感じで少しマイナス評価されてしまいます。

ですが、アクセスさえ多ければ別に問題にはならなかったりもします。

細かいSEOルールを守ることがすべてではないということですね。

とはいえ、アフィリではSEO評価が最重要課題のひとつになります。

出来ることはすべてやるべきでなので必須対応と考えたほうがいいです。

参考 h1～h6タグとは？見出しタグのSEOを意識した正しい使い方

各見出しに最低ひとつは太字・色などの装飾を入れたい

これはライティングやデザインテクニックでもありますが、見出しというのはテーマに区切って伝えたいことがあるときに使うものです。

少ない文字数で念のため書いてあるくらいならかまいませんが、たいていは伝えたいことがあるはずですから、最低１か所くらいは太字などで装飾してユーザーにアピールすべきです。

ある程度の文字数があるのに装飾するポイントがないようなら文章構成に問題がないか記事の質を見直したほうがいいです。

たぶんそこにはあまり必要ないことが書いてあるはずです。

逆に使いすぎるとカラフルすぎてうるさいデザインになってしまうのでピンポイントで使うのが基本です。

記事内容にもよりますが、１ページに１か所くらいは装飾してしまっていいだろうと思います。

今はスマホファーストなので表示文字数は１ページ20×20前後です。

WordPressをPCのHD(16:9)モニターで全画面表示で編集するときのデフォルトサイズだと６割くらいが表示範囲になります。

（※スマホ表示の確認方法：編集画面のプレビューをモバイル設定にするか、WordPressにログインした状態にして公開URLで上スクロールすると下に表示されるレスポンシブテストをクリックすると確認できる）

今のささやライフのようにモノクロベースのデザインでいきなりカラフルな装飾を入れてインパクトを出すような手法もあるので、そのあたりは工夫してみてください。

装飾のイメージは、太字 < アンダーラインマーカー < マーカー < 文字色くらいの順でユーザーに与えるイメージが強くなります。

組み合わせて使うことも出来るので自分のサイトデザインに合ったものを工夫して使って効果を高めていきましょう。

太字の注意：strongタグとboldタグの違い（SEO）

ツールバーの「A」アイコンで設定するのがboldタグで、「B」アイコンで設定するのがstrongタグです。

表示の見た目は同じ太字ですがHTMLタグ上は別データになっています。

boldタグはただの飾りなのでいくら使っても自由ですが、strongタグはSEO的に強調表現として解釈されるので大量に使うとマイナス評価を受ける恐れがあります。

ですから、読者へ強調するにはboldで検索エンジンに強調するにはstrongと覚えておいてください。

SEO効果は低いとみられていますが、strongは検索エンジンが注目しているキーワードや関連語を含む文章に使ったほうが有利だとみられています。

（※検索キーワードにならない言葉だとあまり意味がなく、検索されすぎるビッグキーワードだと記事の差別化の邪魔になる恐れがあるので指定しないほうが無難）

strongタグを使う太字は見出し１つにつき３回までなどと自分でルールを作って制限していくのがおすすめです。

効果的な文字数や組み合わせなどの詳細はGoogleが公開していないのでよく分かりません。

私の予想だと、たぶん減点法で足切り条件に使っていると思うので多すぎなければ問題ないだろうと思います。

少ないからといってマイナス評価にはならないはずです。

改行の入れ方

HTMLでは見るブラウザによって画面表示サイズが違うのでデザイン崩れを防ぐためにタグで改行を入れます。（タグはエディターが入れるので通常は意識する必要はありません）

WordPressのブロック（ビジュアル）エディターだと、Enterキーで段落（パラグラフ）変更（追加）、Shift＋Enterキーで段落内での改行になります。

リストを使わずに自作で箇条書きにしたり、段落だと隙間が空きすぎてデザインがいまいちといったときにShift＋Enterで改行を入れると便利です。
例）このように改行すると行間の隙間が小さくなる！

編集画面で見出しリスト（目次）を確認する

一番上のツールバーに「i」を丸く囲んだ「詳細」アイコンから確認できます。

見出しの総数や総文字数、総ブロック数なども見れるのでページの規模を確認するのにも便利です。

編集画面のSEO設定

記事編集画面の下の方にSEO設定ウィンドウがあります。

最初はとりあえず、

• SEOタイトルに記事タイトル
• メタディスクリプションには導入文
• メタキーワードには自分が狙う検索キーワード
• サイドバーの投稿タブの投稿タブの新規タグにも自分が狙う検索キーワード（３つが基本）

をそれぞれコピペしておけばいいでしょう。

他にも設定しておいたほうがいいことはありますが、まずはこれくらいにして次の作業に進めばいいでしょう。

初心者が説明サイトや動画を全部見たり、すすめられている作業を全部やるのは時間が足らないので無理です。

選んでやっていくしかありません。

自分のアフィリ活動を前進させるために効果的な作業やその時間をどう使うかといったことはちゃんと意識して作業を効率化していってください。

いろいろ手を出すと全部中途半端に終わるのでタスクを管理して一転集中で進めたほうが効率的です。

ショートコードを使いこなそう

Cocoon のショートコード機能を使うと記事や商品リンク、新着記事一覧などを簡単に表示させることができます。

どんな機能があるのか覚えておいてうまく使っていきましょう。

公式 記事作成時に利用できるショートコード集

投稿タブで追加したタグはサイト内リンクに使われる

記事編集画面のサイドバーにある「投稿」タブの「タグ」に「新規タグを追加」という項目があります。

これはタグクラウドと言ってタグにはカテゴリー以外の方法でページをまとめるリスト表示機能を設定する項目です。

デフォルトだと下の画像の赤枠のように投稿記事の下に黒と白の小さな四角で表示されます。

上の画像の「アフィリ成長戦略」がカテゴリーで「手順」「戦略」「スキルアップ」がそれぞれのタグが付いている記事の一覧ページへのリンクになっています。

カテゴリーとは違って全記事の中から同じタグが設定された記事の一覧が自動で表示されます。

例えばこのサイトで「基本」というタグを設定しておくとアフィリ関連の「基本」だけでなく雑記記事の「基本」タグが設定された記事のリストが表示されます。

ですから、雑記ブログで使うときは気を付けた方がいいです。

便利なタグクラウド機能ですが、残念なことにユーザーにはあまり知られていないらしく使わないひとが多いです。

もちろんこの説明もあまり重要ではないのでこの先は読まずに次の見出しに進んでも大丈夫です。

（補足 そもそもタグクラウドの存在を知らない人が多い。カテゴリーリンクの隣にあるので分かりにくい。「外観→ウィジット→投稿本文下」にカスタムHTMLで説明文を追加するとPC／モバイル両方で表示されて便利。）

ユーザーが記事を見る順番は、記事作者のおすすめ記事、システムが表示する関連記事、カテゴリー内の記事ときてその次にやっとタグクラウドとなることが多くなります。

タグクラウドをうまく設定すればメリットはあるがあまり大きくはないということです。

WordPressでは１つの記事にカテゴリーを複数登録することも出来ます。

ですがが、ユーザーから見ると別々のカテゴリーに同じ記事が表示されるのでどちらがメインのカテゴリーなのか分かりにくくなってしまいます。

自分で管理するときに、カテゴリーごとの記事数を数える場合などに邪魔になります。

カテゴリーを使わずにつながりだけ持たせることが出来るのがタグクラウドの便利なところです。

ちなみに、１記事に複数カテゴリーを登録出来る仕様はWordPress以外ではそもそもあまり採用されていません。

１記事に複数カテゴリーを登録するなら親かカテゴリーを設定して分類し直すか、そもそも複数登録はしないほうが無難です。

実際のタグは編集画面の右のサイドバーの投稿タグに「タグ」メニューがあって「新規タグを追加」から追加出来ます。

タグリンクの先のページでは同じタグの付いたページがカテゴリーリストのようなリストになって表示されます。

ですから、同じタグでページがまとめられることを意識してタグを付けたほうがいいです。

その記事とあまり関係のないタグをやたらと追加してしまうと、あまり関係ないページがまとめられた役に立たないリストページが出来てしまうので気を付けましょう。

キーワードと同じでタグも３つまでを目安にしてちゃんと記事内容と関連のあるものだけにするようにしておけばユーザーにとって便利なリストが出来るので閲覧数が増えSEO的に有利になります。

それとカテゴリー名とタグクラウド用のタグを同じにしてもあまり意味がないのでさけたほうがいいです。

ちゃんと選んでメタキーワードと同じものを設定しておけばいいでしょう。

参考 知っておきたいWordPressのタグの基本と付け方｜ferret
参考 プロが教えるWordPressのタグ設定！正しくメリットを生かして順位アップ！｜mixhost サーバーコラム

自動保存データがあるというメッセージ

WordPressには記事の自動保存機能があります。（このサイトではさらにプラグインでの自動バックアップをすすめている）

記事の編集画面を開いていると定期的に自動保存してくれるのがその機能です。

内容を変えたけど保存しないで編集ウィンドウを閉じてしまったときなどに、自動保存されたものがあるとメッセージが表示されます。

オンラインツールなので停電などで作業が強制終了してしまったときにも役立ちます。

記事は世代管理されていてそれをリビジョンといいますが、それを比較する機能があるので違いを見て確認することが出来ます。

メッセージが出たら一応は毎回比較しておいがほうがいいです。

変更がなくても自動保存データがあるとメッセージが出る

自動保存データがあると表示されても何も変更点がないこともあります。

変更点がないなら自動復元してもしなくても同じなので復元する必要はありません。

難度もメッセージが出て面倒なら復元しても別に大丈夫です。

バグといえばそうとも言えるのでそのうち直るかもしれません。

記事編集と保存の注意

基本的には同じページを複数のウィンドウで編集すると内容が食い違う恐れがあるのでやめたほうがいいです。

WordPressはオンラインで複数の人が編集できるシステムになっているのでひとりでも同じ記事を複数ウィンドウで別々に編集できるようになっています。

ですが、ひとりでやる意味はありません。

あとは編集画面を開いたままにすると自動保存データがどんどん作られてしまうので面倒でも毎回閉じておくと無駄な保存データが増えることを防げます。

自動保存の設定は切ってもいい？

自動保存にはデメリットがあります。

それはデータが増えて表示速度の低下を引き起こす恐れがあることです。

パフォーマンスを上げるため自動保存をしないようにしたり、無駄なリビジョンデータを削除することをすすめている人もいます。

PC歴が長い人などで自分で何度も保存する習慣のある人なら各記事の自動保存はなくても大丈夫です。

そもそもプラグインでサイト全体を毎日自動バックアップしているならあまり必要のない機能です。

普通は記事を間違って削除しても自分で気付ければ「元に戻す（Ctrl＋Z）」機能で何回か元に戻せます。

ではどうして自動保存機能があるのかというと、WordPressは複数人での編集が可能なので別々の人が同じ記事を編集してしまったときに差分を取り込めるようするためです。

WordPressを使う人がひとりの個人アフィリエイターなら特に必要ありません。

共同編集や記事を外注したりするようになったら、もしものときのための保険として使えます。

必要ないなら自動保存をしない設定に変えてしまえばいいのかというと、それはそれで少しリスクが高まります。

設定を変えるなら「WordPress 自動保存 無効」などでちゃんと調べてバックアップをとってからやりましょう。

自動保存データとリビジョン

先にも説明してますが、同じ記事を複数のウィンドウで別々に書いて保存するとデータが食い違ってしまうことがあります。

その違う部分を比較したり取り込んだりできるのがリビジョンを比較する機能です。

基本的にはひとりで同じ記事を別ウィンドウで編集するメリットはありません。

むしろ修正に手間がかかり面倒なのでやめましょう。

記事編集画面に自動保存された新しい内容があるなどと警告が表示されることがあります。

WordPressでは記事が自動保存され、それぞれのバージョンが別リビジョンとしてデータベースに保存されています。

リビジョンは世代管理されていて記事を前に保存された状態に戻すことができます。

編集画面で表示されているものよりも自動保存された新しい内容があるときに出るのがその警告です。

自動保存されたリビジョンは一時的に保存されたものなので復元しないと消えてしまいます。

念のため毎回確認しておいたほうが安全です。

自動保存は本来は間違って内容を消してしまったときなどに過去の状態に戻すために使う機能なので覚えておいてください。

WordPress管理画面：投稿一覧でタイトルが縦長、表示件数も少ない

表示枠の横幅が足りないとタイトル名が縦長になることがあります。（改行がたくさん入るので縦長表示になる）

一覧画面の右上にある「表示オプション」の設定を変えると見やすくなります。

下の参考記事は仕様が少し古いよいうですが2021年の仕様なら「投稿者」「ID」「日付」は一人でブログを書いているなら非表示にしてもあまり問題ないです。

一覧画面のデフォルトの表示件数は20件ですが足りない人は増やしてしまいましょう。

総記事数より多く設定しておくと一覧に全記事が表示されるので自分でタイトル名などを検索するときに便利です。

参考 【WordPress】投稿一覧でタイトルが縦長に表示されて見づらくなった時に、通常の横長の表示に戻す方法

ツールを使いこなすといえばショットカットキー

覚えなくてもいけますが覚えたほうがサクッと編集できます。

疲れにくくスタイリッシュな記事作成を目指すならチャレンジしてみてください。

一応、初心者用に Windows 共通の基本キー操作を説明しておきます。

• Ctrl + C … 範囲選択などしてからのコピー
• Ctrl + V … コピー済のデータをペースト（貼り付ける）
• Ctrl + X … 範囲選択などしてからの刈り取り（コピー＆削除）
• Ctrl + Z … やり直し（１回前の状態に戻す、何回か出来る）

これを知らないとWordPressだけでなくPC作業全般の効率が悪いので全部覚えて使いこなしてください。（PC作業の常識）

次に WordPressの操作ですが、これは説明サイトがあるので各自で確認しておいてください。

記事作成のストレスは少し減りますが、画像設定などでどうせマウスも必要なのですごく大きな違いがあるというほどではありません。

個人的には Ctrl + K のリンク追加くらいしか使っていないので人におすすめするほど便利という訳でもありません。

Ctrl + B の太字は Strong タグになってしまうのであまり使わないし、 Alt + Shift + 3 などの見出し追加は動かないしイマイチ使い道がありません。(※私がRealForceのキーボードを使っている影響？)

緊急バックアップ方法

WordPressはオンラインツールなのでサーバーのメンテナンスや不具合でサーバーにアクセス出来なくなるとせっかく作った記事が保存できなくなってしまいます。

そんなときは Ctrl + A キーなどで全体を選択してからコピペでテキストなどに保存しておくと簡易的なバックアップが取れます。

サーバーが復帰した後にそのデータをまた Ctrl + A などで全選択してペーストすれば元の状態に戻すことが出来ます。

再利用ブロック

一度書いた記事やリンクなどをまとめて登録することで同じブロックのセットとして複数の記事で使いまわすことができます。

例えば人気ランキングTOP3のような記事は３位までのリストと詳細記事などへのリンクを入れたセットを作っておいて再利用ブロックに登録しておきます。

それを別の記事で設定しておくと同じ表示にすることが出来るようになります。

元の再利用ブロックの内容を変更するとすべての表示に反映されるので別々に編集する必要がなくなり便利です。

元の再利用ブロックとは違う内容にしたいときはブロックを追加した後にブロックを選択して「□」が重なったアイコンから「通常のブロックへの変換」をすると普通のブロックに戻って編集できるようになります。

ブロックのテンプレートとしても使えるということです。

書いた記事のブロックを選択して縦の「…」アイコンから「再利用ブロックの追加」で追加できます。

使うときは「＋」の「ブロックを追加」アイコンから設定した名前で検索するか、「すべて表示」から「再利用可能」タブで出てくる一覧から選びます。

変更は「再利用ブロックを管理」から行えます。

一度登録した後の編集は普通の記事編集ではなく再利用ブロックの編集画面から行う仕様になっています。

「ブロックのリカバリーを実行」ではリカバリー出来ないことがある

青い四角がボタンになっていて押すと修復できたかのように見えます。

ですが、直っていないことがあります。

その部分を作り直すかコードを修正するかすると直せます。

記事を表示させてちゃんと意図した動きをしていればあまり問題ないですがコードが間違っているので直しておいたほうが無難です。

ちなみに上のメッセージが出たところをコードエディアターで見ると次のようになっていました。

見にくいので改行を入れて整形したのが次です。

a(アンカー)タグの中に同じリンク先のaタグが入れ子になっていてHTML的に意味のないコードになっています。

赤色の部分が要らないので削除すれば正しいコードになって警告が出なくなります。

コードをいじるのが怖いという人はこの部分を削除してからリンクを作り直してもいいです。

他のエラーや警告的なメッセージもだいたいHTMLコードがおかしくなっているときに出るので作り直しかコード修正すれば直ります。

ちなみにリカバリーを実行したら次のようになりました。

赤い部分はアンカーとなる文字がないのでクリックできないスパム的なコードになってるので削除していいです。

おまけコラム：エディターの感想

記事を編集するエディターは主に３つあります。有料テーマなどで少し機能が変わります。ベテランのみなさんの中にはクラシックエディターを使い続けている人もそれなりにいるようです。

私はビジュアルエディターを使ってます。PCの性能のせいかもしれませんが速度が遅いのが少し気になりました。それと上のほうで説明してますがおかしな改行が入って消せなくなって困りました。（解決済）

それ以外は慣れてしまえば別に問題なく使えます。細かいデザインを気にしなければHTMLを自分で書くよりも楽です。バージョンアップで少し性能が上がり便利になりつつあるので今後に期待です。

しいて言うと行数とかを表示してると助かりますが、スクロールバーを見ればだいたいの位置は分かるので何とかなります。5000文字以上の長文記事になってくるとやや不便でしたが、詳細ボタンからジャンプできるようになったのでこれも解決済です。

あとは検索がブラウザ依存だったり文字列の置換ができないとか、そのあたりは仕方ないことですが、書くだけなら普通のテキストエディターのほうが早いです。

画像や広告のリンクなどWordPressのシステムやテーマと連携したほうが楽なものはビジュアルエディターを使って、普段は簡単なタグしか使わないなら他のテキストエディターをHTML対応にして使ってコピペするという使い方もできます。

別に難しくはないのですがHTMLタグを調べたり覚えるのは少し面倒なのでWordPressのエディターを使っていくのでいいと思います。

他の記事作成のコツ

関連 これくらいまでは使いこなしたい WordPress と Cocoon の使い方（デザイン編）

関連 記事作成【初級】 やっておいたほうがいい作業や考え方

関連 記事作成【中級】 よりよい記事を目指し調査・作成・更新・確認を繰り返す

関連 記事作成【上級】 質を上げる戦略

目次 アフィリトップに戻る

参考

参考 【2021年】あずきのワードプレスブログ「完全初心者」ガイド【初めてのWordPress開設からアフィリエイト広告による収益化まで全9章】