[初心者向け]これだけ読めばOK！WordPress記事投稿の全工程まとめ
2017/01/01
こんにちは、okutani(@okutani_t)です。本記事では、WordPress初心者向けに『WordPress上での記事の投稿方法や、最低限のモラル』などの全工程をまとめています。
主に「WordPress運用のメディアで記事を書かれるライターの方」「WordPressを使ってブログを運用したい初心者ブロガーの方」向けの記事です。
メディア運営側の方も、本記事のURL（http://vdeep.net/wp-how-to-first-post）を外部のライターさんにお伝えすれば、わざわざマニュアルを用意する必要がなくなり便利かと思います。ぜひ活用してください。
また、WordPressの初期設定をあらかじめ済ませておくことをオススメします。メディア運営者は下記記事を参考にしてください。
※WordPressで利用しているテーマやバージョンによって、設定や表示の仕方が本記事の内容と違う場合があります。その場合はお使いのテーマに合わせて進めるか、そのバージョンに置き換えて読み進めてください
では、記事の投稿方法や最低限のモラルなどなどを見ていきましょう。
スポンサーリンク
もくじ
WordPress管理画面へのログイン方法
はじめに、WordPress管理画面のログイン方法を見ていきましょう。
WordPressへのログインURLが分からない場合、メディア運営者に尋ねてみてください。
ログイン画面へのURLにアクセスし、「ユーザー名またはメールアドレス」「パスワード」を入力して、ログインをクリック。「ログイン状態を保存する」のチェックはお好みでどうぞ。
WordPressの管理画面へ入れました。次のような画面が表示されることを確認してください。
無事ログインできました。次は記事の投稿方法を見ていきましょう。
新規記事の投稿方法
新しく記事を投稿する方法を見ていきます。WordPress管理画面の左サイドメニューから「投稿」→「新規追加」をクリック。
「タイトル」「本文」を入力していきます。このとき、右端にあるタブが「ビジュアル」モードになっていることを確認してください。
なぜビジュアルモードで記事を書くかというと、テキストモードでは「HTMLの知識が必要」になってくるからです。
HTMLの知識がある方であればテキストモードでもOKですが、HTMLがよく分からない場合は、必ずビジュアルモードになっていることを確認してから記事を書きましょう。
タイトルと本文を入力したら、右側の「公開」ボタンを押せば、記事が公開されます。
公開ボタンを押すと、文字通り記事が全世界に公開され、誰でも見れる状態になります。確認してみます。
この方法だとすぐに記事が公開されてしまいますが、次に紹介する「下書き保存機能」を使えば、「記事を公開せず一時的に保存」することができます。
一度下書きで保存し、メディア運営者の確認後に公開する、なんてこともできますね。
下書き保存機能を使ってみる
下書きとして一時保存する方法について見ていきましょう。WordPressの下書き保存機能を使えばかんたんです。
「公開」ボタンを押すのではなく、「下書きとして保存」ボタンをクリックすればOKです。
下書きで保存した記事をプレビュー（プレビュー: 実際に記事がどのようにWebサイト上で見れるか試し見すること）をするには、次の「プレビュー」ボタンをクリックすることで確認することができます。
プレビュー機能はすでに公開されている記事でも使うことができるので、覚えておくと便利です。
すでに公開されている記事は「ステータス: 公開済み 編集」→「下書き」を選択し、更新をクリックすれば、下書きに変更することができます。
間違ってうっかり公開してしまったときでも、下書きに戻せるので便利ですね。
タイトル、本文の書くときの注意事項
タイトル、本文を書くときに注意するポイントがあります。ここでは3つ紹介します。
1. タイトルは32文字以内
まずタイトルは「32文字以内」に極力収まるようにします。
なぜ32文字以内に収まるようにするかというと、Googleなどで検索した場合に32文字でタイトルが見切れてしまうからです。
それ以外にもSNSのシェア時に、見出しが短い方がシェアされやすい傾向もあり、極力32文字以内に収まるようにするのが好ましいです。
文字数を数えるツールはWeb上にたくさんあります。稚拙ながら僕も作ってるので利用してみてください。ブラウザ上に勝手に保存される機能がついてます。
2. リード文を書く
本文を書き始める場合、まず先に「リード文」を書いてあげると良いです。
本ブログでは、次のような形でリード文を書いています。
リード文は「本文へ入る前の導入文」と言うと伝わりやすいでしょうか。リード文を入れると、すっと本文に入りやすくなってGoodですね。
目安としては、だいたい「200文字前後」書いてあげると良いです。ただ、運営メディアによって、リード文がない場合もあるので要確認です。
当ブログでは、リード文下に広告と目次を挿入しています。メディア運営者の方は参考にしてください。
3. 直接WordPressに書き始めない
これは好みが別れるかと思いますが、直接WordPressの投稿画面から文を書き始めるのではなく、メモ帳などに一度書いた文章を貼り付けて投稿するのがオススメです。
というのも、WordPressに直接書き始めてしまうと、ブラウザが何かの拍子で閉じてしまったり、うっかり記事を削除してしまった場合に元に戻せないからです。
WordPressには「自動保存」や「リビジョン」といった機能がありますが、それらは機能を停止させることもできます。自動保存のタイミングも60秒に一度なので、完全ではありません。
私はクラウドのメモ帳「Evernote」を使っています。Evernoteに一度記事を作成し、コピーしてWordPressに貼り付けて投稿しています。
一度Evernoteに書くという一手間が加わってしまいますが、なるべく安全に記事を書きたい場合はこちらの方法がおすすめです。
画像（キャプチャ）の貼り付けもかんたんで便利です。以下の記事を参考にしてみてください。
参考[Mac]Evernoteでキャプチャ貼り付けを便利に使ってみよう | vdeep
見出し（段落h2, h3など）の使い方
記事内で使える「見出し」の使い方を見ていきましょう。
見出しってなに？
Webで記事を書くとき、「見出し」は非常に重要です。見出しはHTMLで「h1タグ, h2タグ, h3タグ…」などと呼ばれています。
適切に見出しを設定すれば、記事が読みやすくなりますし、Googleなどの検索エンジンからも上位に表示されやすくなります。よく「SEO対策」などと呼ばれているもののひとつですね。
番号が小さいものがより重要度が強く（なのでh1が一番強い）、その下にh2, h3…と配置していきます。
WordPressではタイトルにh1が使われているので、本文ではh2から順に使っていきます（WordPressのテーマによって違うことがありますが、ほぼタイトルはh1固定）。
例えば、本ブログvdeepでは、h2, h3は次のようなスタイルになっています。
ここで重要なのは、「h1の次にh3、h2の次にh4」などといった、「hタグの順番を飛ばして使うことはNG」ということです。
必ず、h2タグの次はh2, h3のいずれかが来るようにしましょう。ちなみに、h4の後にh2がくるような逆の場合はOKです。
ちょっとややこしくて理解しづらいですが、OKとNGの例をいくつか紹介します。以下を参考にしてください（ちなみに記事タイトルがh1の場合です）。
上記の例では、左下がh3から始まっているのでNG、右下がh2のあとにh4がきているのでNGです。
見出しの付け方のポイントとして、レイアウト目的のみで使うのではなく、見出しだけ流し読みすれば記事の内容がざっと把握できるようにつけることです。
さらに深く知りたい方は、「hタグ 使い方」などで検索してみましょう。
見出しを実際に使ってみよう
見出しがどんなものか分かったので、実際にWordPressの投稿画面で見出しを使ってみましょう。
一例として、「北海道のおすすめスポットまとめ」という記事の見出しをつけてみます。
まずは、見出しにしたい文をマウスで選択。「『札幌』のおすすめスポット」を選択してみました。
「段落」→「見出し2」をクリックして、h2の見出しにします。
「『札幌』のおすすめスポット」が見出しh2になりました。
次に、札幌のセクション以下の見出しをh3に設定していきます。同じ手順でh3の見出しをつけていきましょう。
「雪印パーラー」と「サッポロビール博物館」がh3になりました。
このように、適切に見出しを設定していけば、ユーザーにも検索エンジンにも分かりやすく記事の構成を伝えることができますね。
h2やh3の見た目は運営メディアのレイアウトによって変わります。そちらも確認しながら見出しをつけていきましょう。
画像の挿入方法
次は、画像の挿入方法について説明します。
記事投稿画面から、画像を挿入したい場所にカーソルを合わせ「メディアを追加」をクリック。
「ファイルをアップロード」→「ファイルを選択」をクリック（もしくは画像ファイルをドロップ）、画像を選択します。
これでWordPress上に画像がアップロードされました。アップロードされた画像が表示され、選択状態になっていることを確認してください。
挿入画像の情報を設定していきます。
- タイトル: 画像名を入力。デフォルトでは画像のファイル名が自動的に入力されている。今回はそのまま利用
- 代替テキスト: どのような画像なのか説明文を入力。今回は「女性がバイオリンを見つめています。」と設定
- 配置、サイズ: お好みで変更。今回は「配置: なし」「サイズ: 大サイズ」に設定
設定が済んだら「投稿に挿入」をクリック。
これで記事に画像が挿入されました。ビジュアルモード上でも確認できますね。
また、運営メディアにもよりますが、画像の大きさは「横幅600px以上」のものを利用するようにしましょう。それより小さいと見にくくなってしまうので注意してください。
WordPressを使うと、画像の挿入もかんたんでGoodですね。
プチ知識: 画像の挿入場所について
画像を挿入する場所は、本文中のどこでも構いません。
ただ、よくある挿入方法として、以下の場所に画像を貼り付けると記事にメリハリがついて、ユーザーが記事を読み進めやすくなるのでオススメです。
- 記事タイトルのすぐ下（メイン画像）
- h2, h3タグのすぐ下
一例として、ブロガーのたもつさん（@tamotsu39）が運営する「たもトピ」の記事を上げておきます。
記事に画像がうまく挿入されることで、コンテンツにリズムがついて読みやすくなっていることが分かります。
もし、画像の挿入場所に困ったら、上記の場所に挿入してみましょう。
アイキャッチ画像の設定
アイキャッチ画像を設定しておくと、記事一覧や関連記事一覧で利用されたり、SNSへのシェア時（注: サイトがOGP対応済の場合）に表示されたりするため、記事が目立ちやすくなります。
当ブログvdeepでは、次のようにTOPページの記事一覧でアイキャッチ画像が表示されています。
上記以外のさまざまな場所でも、アイキャッチ画像は利用されるので、ぜひ設定しておきましょう。
アイキャッチ画像の設定方法はとてもかんたんです。記事投稿画面の左下の「アイキャッチ画像を設定」をクリック。
アイキャッチ画像にしたい画像を選択し、「アイキャッチ画像を設定」をクリック。今回は、先ほどアップロードした女性の画像を選択してみました。
次のように表示されていれば、適切にアイキャッチ画像が設定されています。
それほど手間もかからず設定できるので、忘れずにおこなっておきましょう。
プチ知識: フリー画像を利用する
世の中には、無料で画像を提供してくれるサービスがあります。
このようなサイトを利用することで、多彩な画像をお手軽にサイトで使うことができますね。
上記以外にも「フリー 画像」「フリー 素材」などで検索するとたくさんヒットするので、気になる方はぜひ調べてみてください。
当ブログでも、記事TOPに貼るメイン画像やアイキャッチ画像に、フリー画像を利用しています。
リンクの挿入方法
次に、リンクの挿入方法について見ていきましょう。
一例として、当ブログの「コメダコーヒーでWi-Fiを利用する方法 | vdeep」というページのリンクを記事に挿入する方法を説明します。
まずはコメダコーヒーWi-Fi記事にアクセスし、ブラウザに表示されたURLをコピーします。
次に、記事投稿画面でリンクを挿入したい場所をクリックし、「リンクの挿入/編集」ボタンをクリック。
先ほどコピーしたURLを入力します。矢印ボタンをクリック。
これでリンクが挿入できました。
もし、表示する文字をURLでなく、タイトルにしたい場合、上記の「鉛筆」マークをクリック→「リンク設定」ボタンをクリック。
「リンク文字列」に記事のタイトルを入れればOKです。ちなみに、「リンクを新しいタブで開く」を選択すると、リンククリック時に別のタブ（窓）で開きます。
「更新」ボタンを選択。リンクの文字が変更されたか確認してみます。
文字列がタイトルに変更されました。これで記事にリンクを挿入することができますね。
カテゴリーの使い方
カテゴリーを使うと、記事をグループにまとめることができます。
例えば、「本記事に関連した記事」などとして記事下に表示させたり、「このカテゴリーの記事一覧ページ」で同じカテゴリーの一覧を表示させることができます。
本ブログを例にすると、「WordPress」というカテゴリーを作っているので、WordPressに関連した記事をまとめて読むことができます。
カテゴリーの設定方法はかんたんで、記事投稿画面から「カテゴリー一覧」内のカテゴリーにチェックを入れればOKです。
次のように、記事下にカテゴリーが表示されました。
また、カテゴリーは基本的に1記事に対してひとつ以上設定するようにしましょう。かつ、極力ひとつだけ設定するようにしておくと、SEO上効果があるようです。
親カテゴリーと子カテゴリーについて
カテゴリーは「親カテゴリー」「子カテゴリー」「孫カテゴリー」……のように階層化することができます。
例えば、「親カテゴリー: WordPress」を作成し、その下に「子カテゴリー: WordPressプラグイン」「子カテゴリー: Habakiri」…… のように利用します。
こうすることで、大きなカテゴリーから中小カテゴリーまで細かく管理することができます。
このカテゴリーの管理方法は、運営するメディアごとに違うので、カテゴリーの設定方法で迷ったらメディア運営者に確認してみましょう。
大抵の場合、子カテゴリーまで利用するようにしておけばOKです。あまり孫カテゴリー以降作りすぎないように気をつけましょう。
新規カテゴリーの作り方
新規カテゴリーの作り方について見ていきましょう。「投稿」→「カテゴリー」を選択。
- 名前: カテゴリー名を入力
- スラッグ: URLで利用する文字列を半角英数字で入力（記号はハイフンのみ利用可能）
- 親: 親カテゴリーがある場合選択。「なし」を選択すると、親カテゴリーとして新規作成される
- 説明: カテゴリーの説明を入力（任意）
「新規カテゴリーを追加」ボタンを押して登録します。
今回は例として「子カテゴリー: WordPressプラグイン」を追加してみました。親はWordPressカテゴリーを選択しています。
これで好きなカテゴリーを作成することができますね。
この画面からカテゴリーの編集や削除もおこなえます。気に入らないカテゴリーがあったら編集や削除をしてみましょう。
タグの使い方
タグを使うと、記事内の重要ワードごとにグループ化することができます。
タグとカテゴリーは似ていますが、タグは「ワードごとに分類化」「カテゴリーのような階層がない」「最大3つほどつけてもOK」というような違いがあります。
例えば、「カテゴリー: 札幌グルメ」を選択し、「タグ: ジンギスカン、ソフトクリーム、寿司」というような形で使うことができます。
では、実際にタグを設定してみましょう。設定方法はかんたんで、投稿画面の「タグ」から使うタグ名を入力し、「追加」ボタンを押せばOKです。
また、「よく使われているタグから選択」を選択して設定してもOKです。
これでタグを使ってグループ化することができますね。
タグはカテゴリーと違い、必ず設定する必要はありません。ちなみに本ブログでは管理が複雑になるため、タグは使用していません。
最低限知っておくべきモラルやルール
最後に、最低限知っておくべきモラルやルールについて説明します。
画像の引用方法
画像の引用方法について見ていきましょう。
画像を引用する場合、以下の形式にする必要があります。
※上記画像はブログ「ピスログ」を運営するシゲさん（@piece_hairworks）のサイトから引用させていただきました
具体的には、「引用画像」「引用画像下に引用したことが分かるように引用元のサイトのリンクを貼る」といった形です。
画像を引用するときに気をつけることは、「直リンクせずに貼り付ける」ということです。
サイトで表示できる画像は、画像のURLをサイトに直接埋め込んで表示することができます。
その場合、相手のサイトへ画像ファイルを読み込みに行ってしまうため、引用元のサーバーに負荷をかけてしまいます。
なので、画像は一度ダウンロードして、本記事で紹介した画像の挿入方法に従ってアップロード＆挿入するようにしましょう（ただし、自社で運用する別メディアからの直リンクなどはOK）。
本記事の方法で画像をアップロードしておけば、直リンクになることはないので、安心して画像を挿入してください。
また、なるべくなら引用元のサイト運営者に「画像を引用します」と一言連絡するとGoodですね。
プチ知識: Twitter, Instagramの画像引用について
Twitter, Instagramの画像を引用する場合、TwitterやInstagramの許可を得ずに、誰の写真でもサイトに埋め込むことができます。
その場合、Twitter, Instagram公式の引用方法で埋め込む必要があります。埋め込み方法については以下を参考にしてください。
参考ブログ記事にTwitterのツイート＆会話のやりとりを載せる方法 | vdeep。
※InstagramでもTwitterと同じような手順で埋め込みコードを取得できます
このように表示されます。
ディアウォールしたらかっちょくなった（╹◡╹） pic.twitter.com/ovtVd8JMKA
— okutani (@okutani_t) 2016年10月18日
また、その写真に著作権や肖像権がある場合は適応されないので気をつけてください（例: 芸能人の顔が写った写真など）。
さらに詳しく知りたい方は、以下のサイトを参考にしてください。
参考画像の引用は法的にオッケーなのか？著作権法におけるルールとは – さようなら、憂鬱な木曜日
文章の引用方法
文章の引用方法について説明します。
文章の引用を利用すると、「このような他の意見もあります」「この情報元から、私の意見が正しいと言えます」といった、記事の内容を裏付けることができます。
ただし、ただ単に引用元の文章を貼り付けるだけでは「パクリ」とも取られてしまうので、適切に文章を引用していることを示さなければいけません。
- 引用する資料等は既に公表されているものであること
- 「公正な慣行」に合致すること
- 報道、批評、研究などのための「正当な範囲内」であること
- 引用部分とそれ以外の部分の「主従関係」が明確であること
- カギ括弧などにより「引用部分」が明確になっていること
- 引用をおこなう必然性があること
- 出所の明示が必要なこと(複製以外はその慣行があるとき）
出典: 著作権なるほど質問箱
上記は「著作権なるほど質問箱」さんから引用させていただきました。参考にしてください。
では、WordPressでの文章引用方法を見ていきましょう。次の方法でおこなうことができます。
記事投稿画面から引用したい文章を入力。文章を範囲選択して「引用」をクリックします。
スタイルが変更され、文章が引用されていることがひと目で分かりますね。
引用文章の下に「引用: 」「出典: 」などと入力し、その横に引用元のサイトリンクを貼り付けます。この際、リンクは別サイトなので「新ウィンドウまたはタブで開く」にチェックを入れて貼り付けるとGoodです。
これで引用元が分かるようになりました。
文章を引用する場合、引用文章が記事の内容のほとんどを占めるような形であってはいけません。あくまで、自分の記事の裏付けや補足などとして利用しましょう。
また、引用はHTMLタグの「blockquote」で囲むことでもおこなうことができます。テキストモードではblockquoteタグを直接使ってもOKです。
今回、一例として使用させていただいた記事は以下リンクです。引用についての詳しい解説が載っているので参考にしてください。
参考引用とパクリ(転載)の違いとは？ブログメディアが覚えておくべき著作権法 – Cognitive Dissonance
おわりに
本記事では、WordPress初心者向けに、記事の投稿方法や最低限のモラルなどなどを説明しました。
ただし、本記事の方法が絶対的に正しい訳ではないため、実際の設定方法と違いがある場合はメディアの運営者に確認をとって進めてみてください。
また、「記事にこういう項目を付け足して欲しい」「設定方法がいまいちよく分からない」といった意見がありましたら、本記事のコメント、お問い合わせフォーム、Twitter、Facebookなどでご連絡いただければと思います。
これからWordPressを使って記事を書くライターさんの参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
