こんにちは、ルークンです。
「ブログサイトを最短で立ち上げ①～④」をお読み頂き実践された方は、既にご自身の記事を執筆されていることと思います。
そこで今回は、ブログサイトのカスタマイズについて、解説致します。
サイトをカスタマイズするためには、トラブルを最小限に抑えるために、FTPソフトが必要になります。 先ずは、FTPソフトのインストールから解説致します。
目次
１．FileZilla（FTPソフト）の導入とインストール
WordPressで立ち上げたサイトをHTMLサイトと呼びますが、あなたのHTMLサイトデータをサーバー上に保存しファイル単位で管理運営するために必要なのがFTPソフトです。
サイトのカスタマイズやデーターのバックアップ（プラグインの使用数量を減らす際はFTP接続で行う）には欠かせないソフトです。
中でも、優秀なのが「FileZilla」です。
早速、インストール致しましょう。
①FileZillaのインストールと設定
下記リンクにアクセスして、インストール・設定をしてください。
FileZilla Windows版をインストールするには、
▼こちらをクリック
https://proengineer.internous.co.jp/content/columnfeature/5247
〇Windowsのバージョン確認方法
Windows8以下のバージョンの確認方法は、
▼こちらをクリック
https://www.sony.jp/support/vaio/solution/kbsub01/solution/sousa/osver/index.html
Windows10のバージョンの確認方法は
▼こちらをクリック
https://cs.myjcom.jp/knowledgeDetail?an=000002674
FileZilla Mac版をインストールするには、
▼こちらをクリック
https://support.kagoya.jp/kir/manual/filezilla_mac/filezilla_mac_1.html
②Filezillaに自身のサイトをFTP接続設定する
＜接続の準備 ロリポップの場合＞
ユーザー設定⇒アカウント情報をクリック
赤枠の文字をコピーしてください。パスワードは、先ず「表示」を押してからコピーして、メモ帳などに張り付けてください。
＜接続の準備 エックスサーバーの場合＞
エックスサーバーに登録及び契約した際に、上図のメールが届いていますので、そのメールを開いて下の方まで（見出しの５．か６．まで）スクロールして、「作成したホームページデータのアップロードについて（FTP情報）」を見つけてください。
上図の赤枠の部分3か所をコピーしてメモ帳などに貼り付けておきます。
次に下記リンクにアクセスして、解説どおりに設定をしてください。
FileZilla接続・設定・使い方
▼こちらをクリック
＜補足説明＞ 安全のため、下図のとおり、赤枠をクリックして「明示的なFTP over TLSが必要」を選択してください。
Filezillaの使い方（ファイルのアップロード、ダウンロード編）
▼こちらをクリック
③FTP接続して現在のサイトのバックアップをとる
それでは、早速あなたのサイトのバックアップデータをとっておきましょう。
最初は、サイトフォルダの全てをバックアップしましょう。 サイトをカスタマイズする際は、カスタマイズする前に、必ずこのようにサイトの最新のデータをバックアップするようにしましょう。
まず、下図のとおり画面左上のサイトマネージャーを開き、接続をクリックします。
接続が成功したら、下図のとおり左側のデスクトップをクリックし、次に画面中ほどのあなたのサイトのフォルダにマウスオーバーして右クリックします。
次に下図のとおりダウンロードをクリックします。
ダウンロードが始まり、3分ほど経つと、「○○バイトのファイル転送に成功しました」という表記が画面左上に現れ、ダウンロード成功です。
途中で下図のような表記が出てきたら、「スキップ」マークを入れ、「OK」をクリックしてください。
下図のとおりデスクトップ画面にあなたのサイト名がついたフォルダーが確認できます。
これで、もしカスタマイズに失敗したり、WordPressや他のプラグインがUPDATEされ不具合が発生しても、このフォルダをアップロードすることで、バックアップデータをとった時点のサイトの設定やデータには戻せます。
その場合は、FTP接続画面左側のデスクトップにあるこのフォルダにマウスオーバーし、右クリックして、アップロードをクリックしてください。
なお、バックアップデータの名前に日付を付加されれば、管理し易くなります。
２．Simplicity2のカスタマイズ
WordPressの数あるテーマの中で、Simplicity２を皆様におススメ致しました。
その理由は、シンプルながらSEO対策もしっかりしており、カスタマイズにおいてリソース（情報資産）がとても充実しているからです。
つまり、独自のサイトデザインがし易い訳です。
ありがたいことに優秀な記事が沢山あり、選択肢も豊富です。
その代表的なカスタマイズ方法をおまとめしてご紹介致します。
先ず、その前に予習をします。
＜子テーマの編集場所と編集方法＞
Simplicity2の子テーマの編集場所は下図のとおり、WordPressのダッシュボードの「外観」にマウスオーバーし、「テーマエディター」をクリックします。
下図のとおり、テーマエディターが表示され、画面左上に「Simplicity2 Child」と表記されていることを確認します。もし、Childと入っていなかったり他のテーマ名が表記されていたら画面右上の選択ボタンをクリックし、「Simplicity2 Child」を選択してください。
どのファイルにカスタマイズするコードを入力するかは下図の赤枠の中のファイル一覧から選択しクリックすると、画面左側から書かれているコードが表示されます。
追加するコードは下図のとおり、基本的に各ファイルの中のコードの最終行に追加するケースが殆どです。（中には「head」と「/head」の間にコピー＆ペーストするよう指示されているものもある）最終行の場合でも、そうでない場合でも追加するコードの行の上には1行空け、下にコードがある場合にも1行空けるようにすると良いでしょう。
兎に角慎重に作業しましょう。
下図のとおり、コードをコピペしたら、「ファイルを保存」をクリックし、その上に「ファイルの更新に成功しました」が表示されるのを確認しましょう。
もし、「ファイルの保存に失敗しました」などの赤字で表示がでたら、保存するのをやめて、ダッシュボードの例えば「外観」などをクリックすると編集はなかったことになります。
無理をせず、もう一度解説をよく確認しながら作業をしてください。
また、もし子テーマのファイル一覧に必要なファイルがない場合は、必要なファイルを追加する方法が下記の記事で解説されています。
Simplicity子テーマ内のファイルが少ない？必要なファイルを追加するよは、
▼こちらをクリック
それでは、おススメカスタマイズのとても優秀で助かる記事のタイトルとリンクURLをご紹介いたします。
①ヘッダー画像の表示領域を広げる（3種類）
Simplicityのヘッダー画像の大きさをカスタマイズ
▼こちらをクリック
Simplicityのヘッダー画像を画面幅いっぱいに設定する方法 ←私はこれ！（写真を使う場合）
▼こちらをクリック
Simplicity2のヘッダー画像の設定方法（PC・スマホ版もまるごと解説）
▼こちらをクリック
②ブログのタイトル文字の大きさを調整する
ブログタイトルの文字の大きさについて
▼こちらをクリック
※AMPに対応する場合は、サイトタイトルのサイズは60px×600pxが最大です。
③タイトルの位置を変更する
Simplicityのヘッダー部分を編集してタイトルの位置を変更する方法
これは、ご自身で試してください。
タイトルを中央に揃えるなら「外観」→「カスタマイズ」→「レイアウト（全体・リスト）」→「サイトタイトルの中央寄せ」にチェックを入れ「公開」を押す。
それ以外以外は、
▼こちらをクリック
④スマホでみた時のヘッダーの余白を消す
【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法
▼こちらをクリック
⑤記事内の囲み枠を設定する
コピペできるWordPress囲み枠が200以上！プラグインで簡単設定！
囲み枠とは下図の文字を囲んでいる線のことです。
▼こちらをクリック
⑥見出しをカスタマイズ
【Simplicity2】コピペでOK！見出しをかんたんカスタマイズ
下図の１．と①が見出しです
＜デフォルト＞
▼こちらをクリック
⑦アイコンフォントを追加する
【simplicity】豊富なアイコンが使い放題！アイコンフォント「FontAwesome」
▼こちらをクリック
⑧サイドバーにプロフィールを付ける
Simplicityのサイドバーにおしゃれなプロフィールを付けてみた
私のサイトのサイドバーにプロフィールがありますが、それのことです。
▼こちらをクリック
https://coonelnel.net/side_profile/
⑨フッターをカスタマイズする
Simplicityでフッターのカスタマイズをする方法
▼こちらをクリック
⑩フッターにプライバシーポリシーを表示する
フッターにプライバシーポリシーを表示したいです
（上図のとおり）
▼こちらをクリック
⑪プロフィールに地図を追加する（プラグイン）
※あなたのサイトがブログサイトの場合は必要ないと思いますが、もし会社やお店のHPとしてもお使いの場合は導入されても良いかと思います。
WP Google Maps WordPressのプラグイン新規追加で検索しインストールするか下記URLからダウンロードしてインストールする。
▼こちらをクリック
ワードプレスでグーグルマップを簡単に表示させるプラグイン使い方
▼こちらをクリック
⑫WordPressで販売サイトを構築する
【簡単】WordPressでデジタルコンテンツの販売サイトを構築する方法
▼こちらをクリック
現在、最大２０万円のキャッシュバックという前代未聞の大型キャンペーン中の日本で最大手級のDMM.com証券 。このチャンスにキャッシュバックを得て、一部を副業の軍資金にしましょう。口座開設費用や維持費用はかかりません。
▼こちらから口座開設してみる
DMM.com証券
３．トラブルシューティング関連
①Simplicity 初めての方は必ずお読みください
▼こちらをクリック
https://wp-simplicity.com/suport/topic/first-time/
②Simplicity Studio コミュニティーサポート
コミュニティーサポートに参加する方は
▼こちらをクリック
https://jp.silabs.com/community/software/simplicity-studio
③Simplicity動作不良時のガイドライン
動作不良ガイドラインは、 ▼こちらをクリック
④Simplicityサポートフォーラム
サポートフォーラムへは、 ▼こちらをクリック
https://wp-simplicity.com/forums/
４．まとめ
Simplicityのカスタマイズに関する優秀な記事を紹介致しましたが如何だったでしょうか。
トラブルシューティング関連サイトについてもご紹介致しましたが、最も早い解決法はグーグル検索でWP SimplicityかSimplicityを頭につけ、続いて症状を記載して検索し同様の症状に関する記事を見つけることです。
それでどうしても見つからない場合や対応しても症状が治らない場合には、Filezillaでバックアップフォルダを右クリックして、アプロードをクリックすれば、設定前の状態には復旧致します。
バックアップを取るタイミングが小まめであれば、一つ前の成功したカスタマイズまでしか戻りません。 これらの点を注意頂ければ、お望みのサイトデザインに近づくと思います。
お疲れさまでした。
次回は、サイト計測ツールについての記事をアップする予定です。
お楽しみに。
最後までお読み頂き、ありがとうございました。
▼関連記事
おまとめblog 第一弾【最短①】で「ブログサイトを立ち上げ」Google Chrome、おススメアドオン他を、おまとめ！
▼こちらをクリック
https://luken.blog/blog-affiliate-5-1008
2021年【最短②】おススメテキストエディターからドメイン取得、スマホ設定までを、おまとめ！
▼こちらをクリック
2021年【最短③】エックスサーバーで直ぐ独自のブログサイトデビューできる設定集
▼こちらをクリック
2021年【最短④】ロリポップで直ぐに独自のブログサイトがデビューできる設定集
▼こちらをクリック
FXトレードを副業にすることもできます。
▼ＦＸトレードの情報はこちら
