【完全初心者向け】WordPressゼロからの体験談-導入編-

ブログを始めようとしてWordPressをインストールしたけど、いざ投稿しようとしても使い方に苦戦する方。

いざ投稿しようとしたら、恥ずかしいくらいに初歩的なことで苦戦しませんか。

私も全くのゼロ知識から始めたので、文章やテキストを入力するだけしかできず、そこから先は何をどうすればいいのかわからなくてカタまってしまうことがしばしばあります。

今も孤軍奮闘中ですが、やり始めてちょうど１週間、何となく概念が見え始めてきたので、ワードプレス、ゼロ知識からの体験談を記事にしてみます。

ビギナーによるビギナーのための情報として共有しますね。

それではー原稿編ーは全部で13ステップ、ー導入編ーとー設定編ーも別の記事にありますのでそちらも参考にしてください。

[rtoc_mokuji title=”Contents” title_display=”left” heading=”h3″ list_h2_type=”round” list_h3_type=”number1″ display=”close” frame_design=”frame4″ animation=”slide”]

プラグイン

テーマはSTINGER＋2を選びました。
STINGERでの記事投稿は旧バージョンの方が評判が良いみたいですので、プラグインで「Classic Editor」をインストールしてから投稿します。

記事タイトル

メニュー画面の「投稿」→「新規追加」と進むと、記事入力画面になります。
記事入力画面で、まずは最上部に記事タイトルを入れます。
ここに入れた記事の表示デザインは、メニュー画面から「外観」→「カスタマイズ」→「各テキストとhタグ（見出し）」で色々と調整できます。
また、メニュー画面から「STINGER＋2管理」で、別の切り口で文字や画像の調整ができます。
例えば、この画面の記事タイトルと画像の演出（フェードイン効果）は「STINGER＋2管理」で該当する場所にチェックを入れただけです。

パーマリンク編集

「パーマリンク」を編集します。
記事タイトルの下にあります。
デフォルトだとメインリンクに続くURLが日本語表示になっていますので、それを自分で半角英数字に編集します。
「おすすめ」と表示されていれば「recommend」に編集、といった感じですね。
SEO対策なので、ビギナーは深く考えずに惰性でいきましょう。

本文入力

パーマリンクを編集し終えたら、その下から本文の入力が始まります。
入力欄の右上のタブに「ビジュアル」と「テキスト」モードの2つがあります。
ビギナーは「ビジュアル」にして進めます。
「テキスト」モードはHTMLで記述をする場合に使用します。
ビジュアルモードで10記事くらいも書いていると、細かな調べごとが積み重なりますので、その度ごとに得た知識が段々とHTMLの理解に結びついてきます。

画像（メディア）挿入

本文中にイメージ画像を入れたい場合は、左上にある「メディアを追加」ボタンで「ファイルをアップロード」→「メディアライブラリ」と進んで、あとは直感で画像を挿入することができます。
画像挿入後に位置や見栄えの微調整を行います。
ビジュアルモードだと思い通りの位置調整ができないので、そのうちCSS（プログラミング言語）をかじって対応してみようという気持ちが芽生えてきます。
10記事くらいも書いていると、CSSがどういう仕組みで走っているのか概念的に理解ができるようになります。

編集　見出し

記事を書き始めます。
その際「段落」と表示されている投稿欄左上のドロップダウンリストから「見出し2」「見出し3」「見出し4」などを使い分けます。
これを使って、記事の内容や段落を上手く分類表示するための階層のように働かせます。
見出し3のあとに見出し2があったりすると、分類や階層分けがおかしいとGoogleが判断して、そのサイトの評価が下がります。
見出しなのに文章のようになっていても低評価となるそうです。
色や大きさ、位置などがイメージどおりに表示されなければ、メニュー画面に戻ってから「外観」→「カスタマイズ」→「各テキストとhタグ（見出し）」の中で色々と自分好みに調整できます。
投稿を中断して他の画面に戻る時には「⌘＋S」で一旦記事を保存してから画面遷移してください。

編集　文字装飾

適宜、文字を太字にしたり斜体にしたり左上にある「スタイル」で文字装飾を行います。
「スタイル」は、一つの箇所に二重、三重と重ねて効果を入れることができます。
リンクを貼りたいときは、文字や画像を選択して「command＋K」で出てくるポップアップ欄にリンクしたいURLを入力します。
リンク先を新しい別のタブを開いて表示させたい時は「command＋K」で出てくる「リンクの設定」の歯車を開いて指定できます。

編集　プレビュー

入稿中の適当なタイミングで、右上にある「プレビュー」ボタンで実際の表示画面を確認しながら進めます。
ブラウザの幅を狭めると自動的にスマホ表示に画面が切り替わるので、そこも確認しつつ進めます。

記事情報の設定

本文の入力が終わったら、右側の欄で本記事の個別情報を入力します。
ここの欄は、よく使うものだけ表示させたり、ドラッグして使い勝手がいいように場所を移動させることができます。
最上部の右側にある「表示オプション」で「レイアウト」を１列にチェックを入れてこの右側の欄を下にもっていくこともできます。
そうすると、本文入力欄の横幅を広く取ることができます。

アイキャッチ設定

アイキャッチを入れたい時も、ここ（右側の欄）で設定します。
アイキャッチの意味は文字どおりですね。
記事タイトルだけではなく、その記事のアイコンのような働きでしょうか。
入れたい時は「アイキャッチ画像」を開いて選択するだけなのでここは簡単です。
アイキャッチを丸く表示したり装飾を施したい場合は、メニュー画面に戻って「STINGER＋2管理」画面から「投稿・固定記事設定」で簡単な調整ができます。

広告設定

広告を入れたい場合は、投稿の編集画面の右上に戻って「テキスト」タブを開きます。
テキスト中の一番上とか一番下の分かりやすいところに該当の広告URLを貼り付けます。
「ビジュアル」モードに戻ると広告画像が表示されているはずです。
それをカットして、入れたい箇所にペーストすればOKです。

最終確認

プレビュー画面で、仕上がり具合を確認します。
右上の「リビジョン」機能を使って原稿の変更履歴も確認できます。
書いていくうちに、さっき書いていた方が良かったな、などと思った場合に使えます。
作成した記事の文字数が左下に表示されているので、参考に確認します。
「All In One SEO Pack」をプラグインで入れている場合は、下の方にスクロールしていくと「All In One SEO Pack」という入力項目がありますので、SEO対策として一応入力しておきます。
「タイトル」「説明」「キーワード」の3カ所を最低限入力しておきます。
コピペでやるだけなので、それほど負担はかかりません。

公開

以上で仕上がりです。
画面右上に戻って「公開」ボタンを押せば全て終了です。
デフォルトで「すぐに公開する」と表示されている箇所で、公開するタイミングをタイマーのように設定することもできます。

まとめ

以上が投稿をする時の主な作業です。
このような感じで、本ページは言語は一切使っておらず、100%ビジュアルモードで作ってまいす。
特に初心者の勘違いとして、ビジュアルモードでワードのように書式や体裁を整えていこうしてしまいがちです。
ビジュアルモードは裏でHTMLが動いていることすら、最初のうちは認識できないものです。
HTMLもCSSも最初は謎だらけで理解不能でしたが、苦労しながら所々調べたりしているうちに、だんだんとプログラムの働きかけが分かるようになってきます。