サイト作成記録

　WordPressを初めて使用するので、このサイトをWordPressでどのように作成したかを、記録に残して置きたいと思います。

　また、どなたかの参考になるかも知れませんので、実際につまずいた『つまずきポイント』、作業の様子、感想などもあれば、書き残して置きたいと思います。

項番	サイト作成記録とつまずきポイント
１	WordPressを使用したブログについてネットで調査し、どんなものかという感触をつかんだ。
２	WordPressで使用するテーマについてネットで調査し、どんなものかという感触をつかんだ。
３	アフィリエイトブログについてネットで調査し、どんなものかという感触をつかんだ。
４	ASPについてネットで調査し、どんなものかという感触をつかんだ。
５	レンタルサーバーについてネットで調査し、どんなものかという感触をつかんだ。
６	ブログの方向性と内容についてネットで調査し、どんなものかという感触をつかんだ。
７	アフィリエイトブログについてネットで調査するより、簡潔にまとめられた本を読んだ方が理解しやすいと思い、本を買って読んだ。つまずきポイントどんな本を読んだらよいのか、かなり迷った。　結局、ネットでおすすめ本として紹介されていた『本気で稼げるアフィリエイトブログ』を買って読みました。
８	作成するブログの方向性を決める。つまずきポイント特化ブログにするか、雑記ブログにするかで迷った。　結局、次の理由により、雑記ブログにしました。記事を１００個作れる特化した題材がなかった。 WordPressの練習も兼ねていたので、何でもできる雑記ブログがよい。
９	レンタルサーバーを決める。つまずきポイントどのレンタルサーバーを借りるかでかなり迷った。　結局、次の理由により、XSERVERに決めました。 WordPressが使え、安定稼働している。一つのレンタルサーバーで複数のドメインが持てる。キャンペーンで一つのドメインが無料。レンタル料が月額１０００円で手頃だった。つまずきポイントレンタルサーバーは決まったけど、どのレンタルプランにしたらよいのかが分からなった。　個人ブログなので最小レンタルプランでOKと判断し、最小プランのX10にしました。ちなみに各プランの違いは、容量、データベース数、転送量です。
１０	使用するテーマを決める。つまずきポイントどのテーマにするか、かなり迷った。テーマを使ったら、どんな感じになるのかが、よく分からなかったので、どのテーマが良いのか、判断できなかった。　最終的に、有料のWING（Affinger5)と権威７の２つに絞られたのですが、次の理由でWING(Affinger5）を使うことにしました。そのまま使えそうなテンプレートのデザインが有った。マルチドメインに使用してもOK。つまずきポイント WING(Affinger5)を購入する時、支払方法が、クレジットカードしかなかった。　インフォトップと言うサイトから購入したら、銀行振り込みで購入できました。インターネットでクレジットカード情報を入力したくない場合は、この方法があります。
１１	ドメインネームを決め、XSERVERに設定した。つまずきポイント作成するブログの方向性や内容が決まってないと、ドメインネームも決めずらい。　ブログの方向性や内容が決まってない中で、ドメインネームを決めたので、ちょっと失敗した感じはしますが、そのまま使い続けています。
１２	XSERVERに無料独自SSLを設定した。つまずきポイント XSERVERで説明されている手順通りにやったが、エラーになり、設定できなかった。　ネームサーバーを設定して、もう１度試したら、設定できました。キャンペーンで得た無料のドメインだったので、通常の手順とは違っていて、ネームサーバーの設定が必要でした。
１３	XSERVERにWordPressをインストールした。　XSERVERにはWordPressの簡単インストールというものが用意されていて、説明されている手順通りにインストールしたら、特に問題なくできました。
１４	XSERVERにWING(Affinger5）をインストールした。　WINGマニュアルやググって出てくるブログなどに載っている手順通りにインストールしたら、特に問題なくできました。
１５	WING(Affinger5)を、とりあえず使えるようにするための設定をした。つまずきポイント　WINGマニュアルに沿って、設定して行ったが、WordPress超初心者には、メニューの設定方法すら分からなかった。　WordPressやテーマの知識ゼロで、いきなり設定をやるのは無理がありました。WordPressの入門書を買い、初歩的な内容を理解してから再実行したら、うまくできました。　１つ１つネットでググるよりも、入門書を読んだ方が、理解が早かったです。
１６	次の設定をした。サイト名とキャッチフレーズチャッチフレーズをサイト名の下に表示サイドバーの位置を右側に表示　サイト名とキャッチフレーズは３、４回変更した末に現在のものになりました。また、サイドバーの位置も左右両方試した結果、最終的に右に落ち着きました。
１７	WING(Affinger5)をとりあえず使えるようにするに載っている、次のおすすめプラグインをインストールした。プラグイン Classic EDiter TinyMCE Advanced EWWW Image Optimizer Imsanity Regenerate Thumnails Duplicate Post 　プラグインのインストールは、特に問題なくできました。
１８	WordPressに慣れるため、文字だけのサイトを固定ページに移す練習をしてみた。　ブログ形式ではなく、サイト形式のページをWordPressで作成する場合を想定して、その練習も兼ねていました。　ページを移すだけの簡単そうな作業ですが、実際にWordPressを使ってみると、初心者にはいろいろ大変でした。これ以降が当分、固定ページへのサイト移行の作業になります。
１９	固定ページへのサイト移行の練習に関連して、次の作業を実施した。サイトのホームで表示されるページを固定ページにした。ヘッダー画像を非表示にした。固定ページのタイトルからメニューを作成した。メニューをヘッダーとサイドバーに表示させた。
２０	文字が小さく見づらかったので、見やすくした。つまずきポイントフォントサイズ、フォントファミリィー、行間隔、文字間隔などの、ページの見やすさを左右する設定方法が分からなかった。　まず、エディタ上の文字とブラウザに表示される文字の設定が、別であることも知らなかったので、設定方法が分かるまでに、かなり時間がかかりました。ググっても、なかなか分かりませんでした。　分かったことは以下の通りです。親テーマであるaffinger5のファイル(wp-content->themes->affinger5)にあるstyle.cssとeditor-style.cssに全て定義されています。editorがついてない方がブラウザ用で、付いている方がエディタ用です。管理画面（affiger5管理->デザイン画面）で設定できるのは、ブラウザ用の文字サイズ、行間、フォントの種類だけでした。その他はCSSの内容を変更しないとダメのようです。　最終的に見やすさを考えて、次のように設定しました。閲覧時のフォントサイズ　　：１９px 閲覧時の行間　　　　　　　：３３px H４見出しのフォントサイズ：１９px 全体のフォント　　　　　　：デフォルト記事タイトルなどのフォント：Note Sans
２１	TinyMCE AdvancedプラグインのClassic Editor((TinyMCE)エディタの設定で、フォントサイズの単位を、ptからpxへ変更しようと、『フォントサイズ』チェックボックスにチェックを入れた。つまずきポイント pxに変更できないで、原因もなかなか分からなかった。　フォントサイズの単位がWING(Affinger5)のedhitor-style.css内で設定されていたため、そちらの設定が優先されて変更できませんでした。ちなみに、ドロップダウンで出てくる拡大サイズの単位は、％になっています。
２２	自分のPCとXSERVER間のファイル転送で使うFTPソフト『FileZilla』を、自分のPCにインストールし、各種設定をして使えるようにした。　次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『サルワカ』　上記サイトを参考にインストール、設定を行い、特に問題なく使えるようになりました。
２３	デフォルトでインストールされているプラグインで、不要な次のものを削除した。 Hello Duiy Xserverフォント
２４	次のプラグインをインストールした。プラグイン BackWPUpプラグインサーバーに作成したものをバックアップするプラグインです。　XSERVERに作成したものをバックアップするために、BackWPUpプラグインで、次の作業を実施した。バックアップジョブの作成バックアップの実行バックアップが正しく取れているかの確認バックアップデータを回復する方法の確認　BackWPUpプラグインの導入については、次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『NOMADIC WOOD』　上記サイトの説明では、バックアップ頻度の違いを考慮して、ファイルとデータベース及びインストール済みプラグイン一覧を分けてバックアップジョブを作成してますが、本サイトでは特にバックアップ頻度を考慮しないため、１つのバックアップジョブで全部のバックアップを手動で取るようにしました。　バックアップデータの回復方法については、次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『F-Factory』　バックアップデータを解凍してデータを照合し、バックアップが正しく実行されているかを確認しました。実際にバックアップデータを回復するところまではやっていません。
２５	WING(Affinger5)のバージョンアップ方法を調査し、現時点での最新バージョンにアップデートした。　Affinger5管理画面への通知方式で行った手順は、次の通りです。WINGマニュアルにも書いてあります。購入者ページにログインし、購入したWING(Affinger5)のページに飛んで、Affinger5管理画面への通知方式で使うパスワードを取得します。 Affinger5管理のその他のページの下の方にあるパスワード欄に、それを設定し、有効化チェックボックスにチェックを入れます。 WordPressの外観->テーマのAffinger5テーマに更新通知が来ていますので、更新をクリックして更新します。　以上で特に問題なく最新バージョンにアップデートできました。
２６	サイドバーウィジェットから当面使わないものを非表示にした。最近の投稿最近のコメントアーカイブメタ情報
２７	次のプラグインをインストールした。プラグイン WP Maintenance Modeプラグイン作業中の時などにサイトを閲覧されたくない場合に、メンテナンス中表示をするプラグインです。
２８	次のカスタマイズを実行した。カスタマイズリンクテキストに下線が有ると見ずらいため、子テーマのstyle.cssにコードを追加して、下線を表示しないようにした。　子テーマは親テーマよりも先に参照されるため、カスタマイズ用として存在しています。また、親テーマがバージョンアップされても、子テーマは書き換わらないので、カスタマイズした内容は残ります。
２９	ページの途中にアンカーを設定して、ページの途中にリンクできるようにした。つまずきポイントアンカーに設定した見出しにリンクすると、見出しの下にリンクしてしまい、見出しが表示されない。　見出しの１行上に１スペースのアンカーを設定し、そこにリンクするようにして、見出しが見えるようにしました。
３０	ヘッダーメニューの内容を次のように決めた。おでかけカメラ慢性骨髄性白血病ライフスタイルサイト作成記録お問合せ　今までずうっと書く内容を検討してきましたが、ようやく内容が固まりました。
３１	慢性骨髄性白血病のページを作成した。サイト風なページなので、固定ページに作成しました。
３２	サイトをGoogle Analyticsに登録した。　アフィリエイトブログの本に記載されてる手順通りに実行したら、特に問題なくできました。使い方については、もう少し勉強が必要です。
３３	次のプラグインをインストールした。プラグイン Contact Form 7プラグインお問合せページを作成するプラグインです。　Contact Form 7プラグインで、お問合せページを作成しました。入門書の手順通りに実行したら、特に問題なくできました。
３４	広告の種類、貼れる場所、貼り方を調査した。つまずきポイント関連コンテンツユニットをどうしたら設定できるのかが分からなかった。　ある程度PVが出ると、Googleから使用許可が出るそうです。
３５	次のプラグインをインストールした。　プラグイン JQuery Colorboxプラグイン写真画像を取り扱プラグインです。　JQuery Colorboxプラグインで写真画像を拡大したり、ギャラリーを作りました。つまずきポイントプラグインが沢山あって、気に入ったプラグインがなかなか見つからなかった。　WordPressに登録されている写真関連のプラグインを、全て試して決めました。気に入ったプラグインを見つけるまでに、３日かかりました。
３６	写真画像をXSERVERのメディアライブラリにアップロードした。つまずきポイント写真の画像をマルチファイルアップローダーでアップロードしようとしたら、HTTPエラーが出て、アップロードできなかった。　最終的に、ブラウザアップローダーで実行したら、OKでした。いろいろ調べたりして、解決するまでに、長時間を要しました。　画像アップロード時のHTTPエラーは、よく起こるようです。ググると沢山出てきます。サーバーの容量制限(30MB)、処理時間制限(30秒)などもHTTPエラーになるそうです。
３７	おでかけカメラの記事を１つ作成した。つまずきポイント写真記事なので、アイキャッチ画像は設定したくないのに、設定しないと記事一覧のサムネイル画像がNo-Imageになってしまう。　記事内の先頭に出現した画像を、アイキャッチ画像に使うプラグインなども試しましたが、思い通りに動いてくれませんでした。　最終的に、No-Imageは見た目が悪いので、しぶしぶアイキャッチ画像を設定しました。
３８	WING(Affinger5)のデザインパターンとカラーパターンを全て試し、使用するパターンを決めた。　最終的に次のようにしました。カラーパターン：グレー（ダーク）使う色は変更してます。デザイン　　　：デフォルト（グラデーション横）
３９	次のプラグインをインストールした。プラグイン Simple custom CSSプラグインテーマのCSSを触らずに、CSSをカスタマイズできるプラグインです。 WordPressの管理画面にはカスタムCSSと表示されます。
４０	次のカスタマイズを実行した。カスタマイズカスタムCSSににコードを追加して、ヘッダーメニュー項目の幅を均等化した。　次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『旅するように人生を生きよう！』
４１	WING(Affinger5)を現時点での最新バージョンにアップデートした。　手順は項番２５に書いてあります。
４２	次のプラグインをインストールした。プラグイン Code Snippetsプラグイン function.phpを触らずに、内容を安全に変更できるプラグインです。
４３	コメント欄に次のマスタマイズを実行した。カスタマイズメールアドレスとウェブサイトを非表示にした。名前を省略可にした。タイトルの『comment』を、『コメントを残す』に変更した。表示場所を関連記事の下に変更した。　Code Snippetsプラグインを使用して、安全にfunction.phpを変更して実行しましたが、実は表示場所の変更以外は、Affinger5管理->投稿・固定記事ページのコメントのところで簡単に設定でるようになってます。　『表示場所を関連記事の下に変更』は、次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『kinkoma.com会社員ゲーマーの雑記ブログ』　上記サイトではAffinger4の記事でしたが、Affinger5でも同様な方法でできました。安全のため、子テーマに「single.php」、｢single-type1.php｣、「single-type2.php」をコピーしてから編集する方法で行いました。
４４	表に関連して、次のカスタマイズを実行した。カスタマイズ表、行、セルの高さと幅を自動で設定する機能を動かなくした。　次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『まっしろブログ』　エディタであるTinyMCEがTableタグに「width」、「height」を勝手に設定する機能は、レスポンシブWebデザイン（いろいろな端末の画面サイズに対応して表示させる技術）には、かえってじゃまになる場合があるので、動かなくしました。　Code Snippetsプラグインを使用して、安全にfunction.phpを変更して実行しました。　　表、行、セルの幅は全て％指定にし、高さは空白にして運用します。
４５	カテゴリーを設定した。
４６	次のプラグインをインストールした。プラグイン Content Aware Sidebarsプラグインカテゴリー毎に、異なったサイドバーの内容を表示できるプラグインです。　サイドバーにメニューを表示したいページと、表示したくないページがあったので、カテゴリーを分けて、Content Aware Sidebarsプラグインを使い、サイドバーの表示内容を変えました。
４７	慢性骨髄性白血病のページを、固定ページから投稿ページに変更した。　カテゴリーを指定できるようにして、表示するサイドバーの内容を、他のカテゴリーページとは違う内容にしたかったので、固定ページから投稿ページに変更しました。
４８	サイト作成記録のページを作成した。
４９	デフォルトのサムネイル画像を設定した。　記事にアイキャッチ画像が設定されていない場合、記事一覧に表示されるサムネイル画像を、Affinger5管理->デザインのサムネイル画像設定で設定できます。
５０	グーグルマップの航空写真、地図、ストリートビューを、投稿記事に埋め込む方法を調査した。　画像を切り取って貼り付けることは禁止されています。グーグルマップの埋め込み機能を使用して、航空写真、地図、ストリートビューを投稿記事に埋め込めば使用できます。　次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『INFACT』　　上記サイトはストリートビューの例ですが、航空写真や地図も同様な方法で埋め込むことができました。　１件、注意したいのは、HTMLをコピーして貼り付ける時、テキストエディタにして貼り付けて下さい。ビジュアルエディタで貼り付けても表示されませんので、注意して下さい。
５１	グーグルマップのマイマップに、続き番号のマーカーを追加できるようにした。　グーグルマップのマイマップ機能を使用するといろいろなことができます。その中に地図上に続き番号のマーカーを設定する機能があり、それを使えるようにしました。　次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『AFFIKATSU』　地図上の複数の場所を説明する時などに、続き番号のマーカーがあると説明しやすいです。
５２	ライフスタイルにアメリカ生活の記事を１件作成した。
５３	次のカスタマイズを実行した。カスタマイズグーグルマップの地図をレスポンシブに対応させた。　次のサイトを参考にさせて頂きました。ありがとうございます。リンクを貼らせて頂きます。『INSPIRATION』　上記サイトに説明されている通り、HTMLとCSSを追加したら、特に問題なく実行できました。
５４	次のプラグインをインストールした。プラグイン Google XML Sitemapsプラグイン WorsPressサイトのサイトマップを自動で作成、通知するプラグインです。
５５	サイトをGoogle Search Consoleに登録し、サイトマップを送信した。つまずきポイント１回目の登録では、所有権が認識されず、うまく登録できなかった。　理由は、サイトをメンテナンス中表示にして、閲覧できないようにしていたためです。閲覧できるようにしたら、登録できました。　登録およびサイトマップの送信の作業は、入門書とWINGマニュアルを参照して行いました。つまずきポイント以外では、特に問題はありませんでした。

終わりに

　今後もサイト作成の作業を行った場合は、記録を追加更新していきたいと思います。

　最後まで閲覧して頂き、ありがとうございました。

　それでは、また。

終わりに

【慢性骨髄性白血病】また定期検査でBCR-ABLが少し検出されました。

【ドラクエ１０】時計アプリの表示内容をV6.5前期仕様に変更しました。

【ドラクエ１０】時計アプリの表示内容をV6.4仕様に変更しました。

【慢性骨髄性白血病】断薬の継続期間が８年９ヵ月になりました。

【ドラクエ１０】時計アプリの表示内容をV6.3仕様に変更しました。