「当ブログ開設への道」シリーズは今回で完結です。
最終回のテーマは「記事の作成手順と使用ツールの紹介」です。
自分は、ブログを書いている人が、具体的にどうやって、どんな手順で書いているのかという事を、ずっと知りたいと思っていました。
どこまで参考になるかは分かりませんが、自分の具体的な記事の執筆手順、そして欠かせない便利なツールなどを、最後に書いて置きたいと思います。
事前準備としての設定
まず準備段階として、いくつか設定を変えたり、付け加えたり、削除したものを紹介します。
カテゴリー「未分類」の削除 or 名称変更
WordPress に初めから入っている「未分類」というカテゴリーがあります。
でも「未分類」では何が書いてあるのか全く分かりません。訪問者が不便に感じますし、SEO としても評価が悪くなるので「削除 or 名称変更」します。
削除するには、別のカテゴリーを作っておく必要があります。メニュー「投稿」→「カテゴリー」から新しいカテゴリーを作ります。
「名前」にカテゴリーの名前を入れ、「スラッグ」はパーマリンクになるので、アルファベットで入力します。「新規カテゴリーを追加」を押します。
メニュー「設定」→「投稿設定」の「投稿用カテゴリーの初期設定」を未分類から「別のカテゴリー」に変更して、下の「変更を保存」を押します。
メニュー「投稿」→「カテゴリー」にある「未分類」にカーソルを持っていくと、「削除」の文字が出るので、それを押せば OK です。
名称変更するには、メニュー「投稿」→「カテゴリー」で「未分類」にカーソルをあて、「クイック編集」を押します。
「名前」と「スラッグ（パーマリンク）」を変更して、「カテゴリーを更新」を押したら OK です。
段落スペースと行間の設定
段落スペースは「段落と段落の間の広さ」のことですが、「 Diver 」の初期設定では「 0 em 」となっていて、狭すぎたので変えました。（ 1 em ＝ 1 文字分）
自分はごちゃごちゃして、見にくいのはなるべく避けたかったので、「 3 em 」にしています。
行間はもちろん「行と行の間の広さ」ですが、初期設定では「 1.8 」となっています。
これはそのままでも良いと思いますが、自分は「 1.9 」としています。
設定は、メニュー「 Diverオプション」→「投稿設定」で「表示設定」にある「段落スペース」と「行間」をお好みの数値に変えて、「変更を保存」を押します。
AdFilter アプリの導入
記事を公開した後、スマホやタブレットで表示を確認しますが、そのまま自分のサイトにアクセスしてしまうと、見る度に「アナリティクス」にカウントされます。
するとアナリティクス確認時に、「自分が見た？ or 訪問者が見てくれた？」と、分からなくなってしまいます。アナリティクスは個人を特定しないからです。
なのでアナリティクスには正確なデータを反映させたいので、自分のアクセスは除外させておきましょう。
iPhone や iPad といった iOS なら「 AdFilter 」アプリ、Android であれば「 Sleipnir Mobile 」というアプリがあるみたいです。
Android は使ったことがないので、「 AdFilter 」アプリの設定だけ書いておきます。
「 App Store 」で「 AdFilter 」を検索して「入手」を押します。無料です。
iPhone（ iPad ）の「設定アイコン」から「 Safari 」→「一般」にある「コンテンツブロッカー」を押し、「 AdFilter 」を「オン（緑色）」にします。
「ホーム画面」に出来ている「 AdFilter アイコン」（アプリ）を開きます。
「広告ブロック」画面で全ての広告がブロックされています。（オンになっている）ここはお好みで良いです。
自分は全てブロックを無効（全てオフ）にしています。左上の「 … 」を押すと「全て有効（無効）にする」と選べます。
下にある「高度なブロック」→「 Googleアナリティクス」を「オン」にします。
次にアクセスを除外させるサイトを設定します。下にある「サイト別設定」→右上にある「＋」を押します。
「ドメイン」に、アクセスを除外させたいサイトのドメインを入力します。自分の場合だと「 zen-gaku.jp 」と入力します。
「有効なブロック」の「アクセス解析ブロック」を「オン」にします。自分はその他のブロックはオフにしています。右上の「保存」を押せば完了です。
確認として、iPhone（ iPad ）で Safari を使って自分のサイトにアクセスしたまま、別タブ（新規タブ）でアナリティクスを開き「リアルタイム」で「 0 」となっていたら OK です。
自分が感じた注意点
ここまでの間に、自分が受けたエラーや、悩んだことなどを、少ないですが書いておきます。
Google からの注意（エラー）
記事が 1 つも無いと「ソフト 404 エラー」になります。記事を書けば解消できます。
自分は固定ページを先に作成していったので、記事を書くのが最後になってしまいました。
おそらく Google Search Console に登録していたのに、しばらく経っても記事が無かったことが原因だと思います。
ある日、Gmail に Search Console から「あなたのサイトのトップページは、ソフト 404 エラー（コンテンツが無い）です」と報告が来ました。
次に「AMP のエラーがある」と言われ、「許可されていない属性が HTML タグにあります」と注意を受けました。
これは色々悩んだのですが、WordPressで記事を書くときに「テーブル」と呼ばれる表（縦の列と横の行で作成）を作れるのですが、これが問題でした。
もしかしたらテーマの Diver か、プラグインが原因なのかもしれませんが、「テーブル」で表を作った箇所を、テキストエディタ（ HTML ）で確認してみました。
すると、許可されていないと言われた「 height 」というタグが入っていましたので、<table width=〜 height=〜>を<table>と書き換えました。
ちゃんと表示されるか心配でしたが、全く問題なく、エラーも解消されました。
リストデザインの注意点
Diver では「入力補助」の 1 つとして「リストデザイン（箇条書きリスト）」が使えます。非常に便利で、種類も色も豊富なのですが、
1 記事内で 1 度リストデザインを使うと、2 度目から新しいリストデザインに変わらなかったのです。つまり 1 記事内では全て同じリストデザインになってしまいました。
当然、何か自分がミスしているのだろうと思っていたのですが、そのミスが何か分からなかったので、とても悩み考えました。
ある時、「そもそもこの見えている記事本文（ビジュアルエディタ）は、テキスト（ HTML ）で作られている」と今思えば、当たり前の事に気付きました。
「ビジュアルエディタが正しく表示されないのは、テキストが正しくない事が原因だ」という事です。
「テキスト」でリストデザインを作った箇所を見ると、<div class="〜〜">とあり、ここからリストデザインが始まっています。
リストデザインを正しく終了するには、</ul>の後に改行して</div> と入力するのですが、これが抜けていた事が、正しく反映されなかった原因でした。
ちなみにビジュアルで、リストデザインを終了するには、「 Enter（return）キー」を 2 回押します。これで普通の文字入力（段落入力）に戻れます。
ビジュアルエディタは嘘をつきません。テキストで書かれたものを、忠実に表しているだけです。これを、深く再確認する事となりました。
WordPress でエラーになる文字
一部のアルファベット（確認できたのは id とps ）の色を変えて、「下書きとして保存」を押すと、
「 501 Not Implemented アクセスしようとしたページは表示できませんでした。」と表示され、エラーになってしまいます。
サーバーのセキュリティ設定（ WAF設定）が関係しているかもしれません。
データベース接続確立エラー
これはまだ、自分は直面した事はないのですが、WordPress にログインしようと思った時に「データベース接続確立エラー」と表示されてしまった場合。
何か自分で「 wp-config.php 」などをイジってしまって、それ以降にこのエラーメッセージが表示されたなら、そこが原因なのですが、
何もしていないのに、ある日突然このエラーが表示されたら、ほぼ間違いなく、サーバー側のシステム障害が原因です。
サーバー側から、システム障害の情報が出てくるのを待ちましょう。サーバーのホームページにログイン出来るかどうかも、見てみましょう。
使用ツール
記事を書く上で、アイキャッチ画像を作るために使用したツールと図を作成するために使ったツールを紹介します。
O-DAN で元になる画像を取得
インターネット上にある画像は、基本的にどれも「著作権」があるはずなので、勝手に使用する事はできません。
O-DAN は著作権フリー（著作権料がかからない）であり、CC0（著作権についていかなる権利も放棄）なので、商用利用も加工も自由ですし、クレジット表記（著作権者の表記）も不要です。
O-DAN の特に優れている所は、様々な CC0 無料写真サイトを横断的に検索して探せる事です。しかも日本語で検索できます。
O-DAN（オーダン）- 無料写真素材・フリーフォト検索 公式サイト
サイトに行き、キーワードを入れて検索すれば、英語に自動翻訳して探してくれます。基本的に登録されているサイトは海外の無料写真サイトです。
いつもここで、アイキャッチ画像の元となる画像を取得しています。
Canva で画像をデザイン
Canva を使い、画像に文字を入れるなどの装飾をしています。
基本機能なら無料で使えますし、ソフトとしてパソコンにインストールする必要もない（サイト上で作成できる）ので非常に使いやすいです。
初めに会員登録をするのですが、Google アカウントで登録できるので、「Google で登録」を選びました。次回からは、下の「ログイン」から入ります。
Squoosh で画像を圧縮
ブログの記事の表示速度に、一番影響を与えているのが「画像ファイルのサイズ」です。
なので出来る限り表示速度を上げる為に、作成したアイキャッチ画像を「圧縮」しています。
Squoosh は Google が開発した、比較的新しい「画像圧縮 Web アプリ」です。
これは会員登録なども一切不要で、サイトに行き画像を「ドラッグ＆ドロップ」をすれば、すぐに使用できます。
draw.io で図の作成
完全無料で、会員登録やインストールも不要で、図やフローチャートが作成できる Web サービスです。
サイトに行き、最初のポップアップ「 Save diagrams to: 」の画面で、右下の「 Language 」から日本語を選べば、日本語で使えます。
最初のポップアップ画面の「 ファイルの保存先 」は下にある「 後で決める 」を選んでいます。
作った図を保存する時だけ注意点があります。ブログで使うために「 ダウンロードして保存する 」場合の手順を書いておきます。
左上にある「 ファイル 」タブから「 形式を指定してエクスポート 」で「 PNG など 」ファイルの形式を選び「 エクスポート 」を押して「 デバイス 」を選んでいます。
執筆から公開までの流れ
記事の作成から公開までの流れを、順番に書き留めておきます。
企画と構成
まずは「どんなテーマ」で「何を書くのか」という企画の部分を決めます。これが「タイトル候補」になります。
次にそれを「どのように構成するのか」を決めます。具体的には「何を見出しにするか」や「いくつの見出しにするか」や「小見出しはどうするか」などです。
さらに記事の「導入文（書き始め）」と「締めの文（終わり）」もここで大体の内容を決めておきます。
本文の執筆
「タイトル」を入力し「パーマリンク」を設定したら、本文の執筆に入ります。
記事は「ビジュアル（エディタ）」で書いています。書く上で気を付けている事と、使っている文字装飾の紹介を書いておきます。
文章を書いて「 Enter 」を押すと次の段落に移るのですが、これだけを使い、「改行（ shift ＋ Enter ）」は使いません。
つまり「段落のみ」で文章を作って（分けて）います。なぜなら段落内で改行を使うと、スマホで非常に読みにくくなるからです。
パソコンと違いスマホは「横幅が狭い」ため、思い通りの改行にならないのです。
同様にスマホでの表示を意識して、「 1 段落」の文の長さを、パソコンで見たときに「 1 行半ぐらい」までにしています。
スマホで見たときに、1 段落が 4 行以内に収まることを意識しています。
自分がよく使う「入力補助」は「見出し」「囲い枠」「リストデザイン」ぐらいです。
文字装飾は「太字（ B ）」「マーカー（スタイル）」「テキスト色」です。使用方法は文字を「ドラッグ（押したまま右に引っぱる）」で青にして、それぞれのボタンを押せば OK です。
ちなみに「太字」は検索エンジンに対しても「ここは重要です。」と知らせる効果があるので、ちゃんと重要なところだけに使った方が良いです。
AMP とカテゴリー分け
AMP とはモバイル端末で高速表示ができる、HTML ページのことです。
AMP に対応しているページだと、スマホで見たときに、高速で表示される様になります。
右にある「 AMP の有効化」にチェックを入れれば OK です。
右にある「カテゴリー」も忘れずに、チェックして、適切なカテゴリーに分類します。
追記
数式を表示させるプラグイン ( MathJax-LaTeX など ) を使用しているページで AMP の有効化をすると、数式が表示されなくなってしまいます。
他にも、プラグインを利用して表示させるようなページであれば、同様に表示されなくなってしまいます。
なので、このようなページでは「 AMP の有効化 」のチェックを外しておきましょう。
また AMP は高速表示ができる一方、表示がとても簡略化されます。
極端に言えば、文字と画像をそのまま表示させるだけというイメージです。
自分の環境だと、マーカーの色は反映されますが、色文字は反映されません。
他にも、何かしらのアクションや動きのあるページも反映されないので、ページのデザインや表示に工夫を加えている方はチェックを外しておいた方が良いかもしれません。
大切なのは AMP を有効化したら、そのページの AMP 表示の方も確認しておく事だと思います。
確認方法は、そのページの URL 末尾の「 / 」の後に「 ?amp=1 」と付け加えて開くと確認できます。
自分は色文字が反映されない事やレイアウトが変化するなどの理由で、AMP はやめました。
高速表示と言っても自分の場合は、基本的に文字だけのサイトであり、作りも簡素なので影響は少ないかなと考えました。
メタディスクリプション
meta description（メタディスクリプション）とは、その記事の内容や概要を書く文です。
これは直接的に SEO に影響する訳ではないのですが、実際には CTR（クリック率）を左右すると言われています。
検索時、訪問者は「タイトル」と「メタディスクリプション」を判断基準に、どのページを開くかを決めます。
そこに自分の知りたい内容が書かれていたら、ページを開いてくれる確率は高くなります。
それと同時に、開いてみたら「思っていたのと全然違う」というような、悪い印象を持たれるのを防ぐ事もできます。
右のメニュー「 SEO設定」にある「メタディスクリプション」で書いていきます。ここは何もしないと記事本文の冒頭から 100 文字ぐらいの抜粋になっています。
スマホでは 50 文字程度までが表示され、パソコンでは 120 文字程度までが表示されます。それ以降は省略されるので、注意しましょう。
書き方としては、記事の「ネタバレ」を書きましょう。具体的には「キーワード」を入れ、これを読めば記事に「何が書いてあるのか」が分かるようにします。
理想はスマホ対策として 50 文字に収めたい所ですが、なかなか難しいと思います。せめて重要な言葉や部分だけでも前の方に書くようにしましょう。
アイキャッチ画像の設定
「 O-DAN 」で記事のテーマに関係するようなキーワードで検索して、探します。自分は気に入ったものが無ければ、「自然や風景」の写真から選んでいます。
「 Canva 」に行き、「デザインを作成」の右にある「カスタムサイズ」を押し、「幅 700 縦 467 」で作成しています。
白い画用紙に画像を「ドラッグ&ドロップ」するか、左の「アップロード」で画像をアップロードして、画用紙いっぱいに画像を広げます（伸ばします）。
左の「グラフィック」→「図形」にある「白い正方形（無料）」を選ぶと、画像の上に正方形が載るので、同様に画像と同じサイズまで広げます。
右上の「チェック柄のマーク（透明度）」を押して、50 〜 70 ぐらいの透明度にしています。
左の「テキスト」→「本文を追加」を押すと、文章を挿入できます。上のタブでフォント、大きさ、色などを変更できます。
もう一度「本文を追加」を押すと 2 つ目の文章を作れます。「素材」→「線」でラインを入れることもできます。
デザインを見比べたい場合は、画像（画用紙）の右上のマーク「ページをコピー」を押すと、下にもう 1 つ同じものができるので、装飾して比較します。
完成したら、右上の「ダウンロードボタン」or「パブリッシュ」→「ダウンロード」を押します。ファイルの種類は PNG は容量が大きくなりがちなので「 JPG 」にします。
「 Squoosh 」に行き、作成した画像を「ドラッグ&ドロップ」します。右にある「 Quality 」を調節して「 80 KB 以下」に設定しています。
「 Compress（圧縮）」は「 MozJPEG 」で良いです。（ JPEG より小さく圧縮できるので）右下の「ダウンロードボタン」を押せば OK です。
WordPress の投稿ページに戻り、右下の「アイキャッチ画像を設定」→「ファイルをアップロード」で作成した画像を選び、チェックして、右下の「アイキャッチ画像を設定」を押せば完了です。
公開後のアイキャッチ画像
もし、アイキャッチ画像がぼやけて表示されている場合は、WordPress 左メニュー「 Diverオプション」→「基本設定」の「メイン設定」に行き、
「記事一覧サムネイルサイズ」を「 PC と SP 」両方とも「フルサイズ」にします。忘れずに「変更を保存」です。
便利に感じた小技
これぐらいは、誰でも知っている当たり前の事で、小技と言うほどではないかも知れませんが、自分は便利に感じたので少し紹介します。
長文を一気にコピペする方法
普通「コピペ」する時は、文字をドラッグ（ drag 引きずる）して反転させ、右クリック（副ボタンのクリック）でコピーを選び、貼り付けたい場所で右クリックからペーストしますが、
より簡単なのは、コピーしたい文章の一番最初の文字の左をクリックします。そして最後の文字の右を「 shift を押しながらクリック」します。
すると最初のクリックから最後のクリックまでの、全範囲がドラッグされた状態になります。その状態で「 command ＋ C 」を押すとコピーされます。（ Windows なら Ctrl ＋ C ）
そして貼り付けたい場所をクリックして、 「 command ＋ V 」を押すとペーストされます。自分はこれを知った時、ちょっと感動でした。
記事の緊急バックアップ
執筆途中に何らかの原因で、下書きを保存できない時、一時的に「メモアプリ」に記事を保存する方法です。
「テキスト（エディタ）」に行き、上から下まで全てコピーします。上記の「長文を一気にコピペ」を使います。
それを「メモアプリ」にペーストします。これで記事の緊急バックアップは完了です。
戻す時は、メモアプリの該当ページを全てコピーして、「テキスト（エディタ）」にペーストすれば OK です。「ビジュアル」に切り替えれば、元の状態に戻ります。
メモアプリでの記事執筆
「記事の緊急バックアップ」の逆の手順になります。
メモアプリで記事を書き、それを全てコピーして、「テキスト（エディタ）」にペーストしてから、「ビジュアル」に切り替えます。
すると、文章自体は出来上がっているので、あとは文字装飾や見出しなどのレイアウトや画像挿入などを、いつもの様に編集すれば OK です。
1 つ注意点としては、投稿画面の記事本文に先に文字を入力していると、この方法は使えません。つまり途中でこの方法を使うことは出来ないということです。
なので文字を追加したいなら、ペーストした後にしましょう。
あとがき
最終回のこのテーマは、実際にブログを書いている方々に、ずっとずっと聞きたかったことです。
どんなツールを使い、具体的にどの様な手順で記事を作り、公開までに至るのか。
そしてそこに至るまでに、困った事や、得した事、やっていて良かった事などは、何かあったのか。
自分の経験がどれだけ参考になるかは分かりませんが、全てが初めてだった「あの時」に知りたかった事は、記せたと感じております。
全 9 回にわたり書いてきました「当ブログ開設への道」シリーズも、何とか無事に終了することが出来ました。
自分にとってこのシリーズは、最初のカテゴリーであり、初めての記事執筆だったので、本当に学ぶことがたくさんありました。
実際に記事を書いてみて初めてわかる、難しさや試行錯誤、壁などがありました。でもそれを何とか乗り越えて行く度に、確かな成長も感じました。
そして楽しみも感じることができました。もっと色々なことを学んで、それを整理してまとめながら書き留めていきたいと思っています。
最終回という事もあり、「全て書き切る」と意識していたら、大変長くなってしまいました。（ 8700 文字）きっと書く事が好きなのだと思います。
最後までお読み頂きまして、誠にありがとうございました。
