カテゴリー
ブログ・アフリエイト

2021年(簡単①)Simplicityコピペカスタマイズ12選とFilezilla使い方解説集

 

 

こんにちは、ルークンです。

「ブログサイトを最短で立ち上げ①~④」をお読み頂き実践された方は、既にご自身の記事を執筆されていることと思います。

そこで今回は、ブログサイトのカスタマイズについて、解説致します。

サイトをカスタマイズするためには、トラブルを最小限に抑えるために、FTPソフトが必要になります。 先ずは、FTPソフトのインストールから解説致します。

1.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接続設定する

<接続の準備 ロリポップの場合>

 

ユーザー設定⇒アカウント情報をクリック

赤枠の文字をコピーしてください。パスワードは、先ず「表示」を押してからコピーして、メモ帳などに張り付けてください。

<接続の準備 エックスサーバーの場合>

エックスサーバーに登録及び契約した際に、上図のメールが届いていますので、そのメールを開いて下の方まで(見出しの5.か6.まで)スクロールして、「作成したホームページデータのアップロードについて(FTP情報)」を見つけてください。


上図の赤枠の部分3か所をコピーしてメモ帳などに貼り付けておきます。

次に下記リンクにアクセスして、解説どおりに設定をしてください。

FileZilla接続・設定・使い方
▼こちらをクリック
https://miya-system-works.com/blog/detail/35

<補足説明> 安全のため、下図のとおり、赤枠をクリックして「明示的なFTP over TLSが必要」を選択してください。

Filezillaの使い方(ファイルのアップロード、ダウンロード編)
▼こちらをクリック
https://oyakudachinews.com/xserver-filezilla-fileupload#i-2

③FTP接続して現在のサイトのバックアップをとる

それでは、早速あなたのサイトのバックアップデータをとっておきましょう。

最初は、サイトフォルダの全てをバックアップしましょう。 サイトをカスタマイズする際は、カスタマイズする前に、必ずこのようにサイトの最新のデータをバックアップするようにしましょう。

まず、下図のとおり画面左上のサイトマネージャーを開き、接続をクリックします。

接続が成功したら、下図のとおり左側のデスクトップをクリックし、次に画面中ほどのあなたのサイトのフォルダにマウスオーバーして右クリックします。

 

次に下図のとおりダウンロードをクリックします。
ダウンロードが始まり、3分ほど経つと、「○○バイトのファイル転送に成功しました」という表記が画面左上に現れ、ダウンロード成功です。

途中で下図のような表記が出てきたら、「スキップ」マークを入れ、「OK」をクリックしてください。

下図のとおりデスクトップ画面にあなたのサイト名がついたフォルダーが確認できます。

これで、もしカスタマイズに失敗したり、WordPressや他のプラグインがUPDATEされ不具合が発生しても、このフォルダをアップロードすることで、バックアップデータをとった時点のサイトの設定やデータには戻せます。

その場合は、FTP接続画面左側のデスクトップにあるこのフォルダにマウスオーバーし、右クリックして、アップロードをクリックしてください。

なお、バックアップデータの名前に日付を付加されれば、管理し易くなります。

 

2.Simplicity2のカスタマイズ

WordPressの数あるテーマの中で、Simplicity2を皆様におススメ致しました。

その理由は、シンプルながらSEO対策もしっかりしており、カスタマイズにおいてリソース(情報資産)がとても充実しているからです。

つまり、独自のサイトデザインがし易い訳です。

ありがたいことに優秀な記事が沢山あり、選択肢も豊富です。
その代表的なカスタマイズ方法をおまとめしてご紹介致します。

先ず、その前に予習をします。

<子テーマの編集場所と編集方法>

Simplicity2の子テーマの編集場所は下図のとおり、WordPressのダッシュボードの「外観」にマウスオーバーし、「テーマエディター」をクリックします。

下図のとおり、テーマエディターが表示され、画面左上に「Simplicity2 Child」と表記されていることを確認します。もし、Childと入っていなかったり他のテーマ名が表記されていたら画面右上の選択ボタンをクリックし、「Simplicity2 Child」を選択してください。


どのファイルにカスタマイズするコードを入力するかは下図の赤枠の中のファイル一覧から選択しクリックすると、画面左側から書かれているコードが表示されます。

追加するコードは下図のとおり、基本的に各ファイルの中のコードの最終行に追加するケースが殆どです。(中には「head」と「/head」の間にコピー&ペーストするよう指示されているものもある)最終行の場合でも、そうでない場合でも追加するコードの行の上には1行空け、下にコードがある場合にも1行空けるようにすると良いでしょう。
兎に角慎重に作業しましょう。


下図のとおり、コードをコピペしたら、「ファイルを保存」をクリックし、その上に「ファイルの更新に成功しました」が表示されるのを確認しましょう。

もし、「ファイルの保存に失敗しました」などの赤字で表示がでたら、保存するのをやめて、ダッシュボードの例えば「外観」などをクリックすると編集はなかったことになります。

無理をせず、もう一度解説をよく確認しながら作業をしてください。


また、もし子テーマのファイル一覧に必要なファイルがない場合は、必要なファイルを追加する方法が下記の記事で解説されています。

Simplicity子テーマ内のファイルが少ない?必要なファイルを追加するよは、
▼こちらをクリック
https://coonelnel.net/side_profile/

それでは、おススメカスタマイズのとても優秀で助かる記事のタイトルとリンクURLをご紹介いたします。

 

①ヘッダー画像の表示領域を広げる(3種類)

Simplicityのヘッダー画像の大きさをカスタマイズ 

▼こちらをクリック

https://wp-simplicity.com/header-image-size-custom/

Simplicityのヘッダー画像を画面幅いっぱいに設定する方法  ←私はこれ!(写真を使う場合)

▼こちらをクリック

https://usortblog.com/simplicity-full-width-header-image/

Simplicity2のヘッダー画像の設定方法(PC・スマホ版もまるごと解説)

▼こちらをクリック
https://arata01.info/simplicity2-header-9340

②ブログのタイトル文字の大きさを調整する

 

ブログタイトルの文字の大きさについて
▼こちらをクリック
https://bit.ly/2MHVkkA

AMPに対応する場合は、サイトタイトルのサイズは60px×600pxが最大です。

③タイトルの位置を変更する

 

Simplicityのヘッダー部分を編集してタイトルの位置を変更する方法
これは、ご自身で試してください。
タイトルを中央に揃えるなら「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」→「サイトタイトルの中央寄せ」にチェックを入れ「公開」を押す。
それ以外以外は、
▼こちらをクリック
https://repobu.com/2015/07/16/simplicity-title/

④スマホでみた時のヘッダーの余白を消す

【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法
▼こちらをクリック
https://yuzuyu3.com/header/

⑤記事内の囲み枠を設定する

 

コピペできるWordPress囲み枠が200以上!プラグインで簡単設定!
囲み枠とは下図の文字を囲んでいる線のことです。

▼こちらをクリック
https://luckymarch.com/archives/10409

⑥見出しをカスタマイズ

【Simplicity2】コピペでOK!見出しをかんたんカスタマイズ
下図の1.と①が見出しです
<デフォルト>

▼こちらをクリック
https://yuzuyu3.com/midashi/

⑦アイコンフォントを追加する

【simplicity】豊富なアイコンが使い放題!アイコンフォント「FontAwesome」

▼こちらをクリック
https://coonelnel.net/fontawesome/

⑧サイドバーにプロフィールを付ける

Simplicityのサイドバーにおしゃれなプロフィールを付けてみた
私のサイトのサイドバーにプロフィールがありますが、それのことです。

▼こちらをクリック
https://coonelnel.net/side_profile/

⑨フッターをカスタマイズする

Simplicityでフッターのカスタマイズをする方法

▼こちらをクリック
https://repobu.com/2015/07/16/simplicity-title/

⑩フッターにプライバシーポリシーを表示する

フッターにプライバシーポリシーを表示したいです
(上図のとおり)

▼こちらをクリック
https://bit.ly/2MgqOhH

⑪プロフィールに地図を追加する(プラグイン)

※あなたのサイトがブログサイトの場合は必要ないと思いますが、もし会社やお店のHPとしてもお使いの場合は導入されても良いかと思います。

WP Google Maps WordPressのプラグイン新規追加で検索しインストールするか下記URLからダウンロードしてインストールする。
▼こちらをクリック
https://wordpress.org/plugins/wp-google-maps/

ワードプレスでグーグルマップを簡単に表示させるプラグイン使い方
▼こちらをクリック
https://its-office.jp/blog/wordpress/2018/12/19/WP-Google-Maps.html

⑫WordPressで販売サイトを構築する

【簡単】WordPressでデジタルコンテンツの販売サイトを構築する方法
▼こちらをクリック
https://manablog.org/wordpress-digital-contents/

現在、最大20万円のキャッシュバックという前代未聞の大型キャンペーン中の日本で最大手級のDMM.com証券 。このチャンスにキャッシュバックを得て、一部を副業の軍資金にしましょう。口座開設費用や維持費用はかかりません。
▼こちらから口座開設してみる
DMM.com証券

 

3.トラブルシューティング関連

①Simplicity 初めての方は必ずお読みください

▼こちらをクリック

https://wp-simplicity.com/suport/topic/first-time/

②Simplicity Studio コミュニティーサポート

コミュニティーサポートに参加する方は
▼こちらをクリック

https://jp.silabs.com/community/software/simplicity-studio

③Simplicity動作不良時のガイドライン

動作不良ガイドラインは、 ▼こちらをクリック

https://wp-simplicity.com/trouble-guideline/

④Simplicityサポートフォーラム

サポートフォーラムへは、 ▼こちらをクリック

https://wp-simplicity.com/forums/

 

 

4.まとめ

Simplicityのカスタマイズに関する優秀な記事を紹介致しましたが如何だったでしょうか。

トラブルシューティング関連サイトについてもご紹介致しましたが、最も早い解決法はグーグル検索でWP SimplicityかSimplicityを頭につけ、続いて症状を記載して検索し同様の症状に関する記事を見つけることです。

それでどうしても見つからない場合や対応しても症状が治らない場合には、Filezillaでバックアップフォルダを右クリックして、アプロードをクリックすれば、設定前の状態には復旧致します。

バックアップを取るタイミングが小まめであれば、一つ前の成功したカスタマイズまでしか戻りません。 これらの点を注意頂ければ、お望みのサイトデザインに近づくと思います。

お疲れさまでした。

次回は、サイト計測ツールについての記事をアップする予定です。

お楽しみに。

最後までお読み頂き、ありがとうございました。

▼関連記事
おまとめblog 第一弾【最短①】で「ブログサイトを立ち上げ」Google Chrome、おススメアドオン他を、おまとめ!
▼こちらをクリック

https://luken.blog/blog-affiliate-5-1008

2021年【最短②】おススメテキストエディターからドメイン取得、スマホ設定までを、おまとめ!
▼こちらをクリック

https://luken.blog/blog-affiliate-6-1175

2021年【最短③】エックスサーバーで直ぐ独自のブログサイトデビューできる設定集
▼こちらをクリック

https://luken.blog/blog-affiliate-7-1586

2021年【最短④】ロリポップで直ぐに独自のブログサイトがデビューできる設定集
▼こちらをクリック

https://luken.blog/blog-affiliate-8-2162

FXトレードを副業にすることもできます。
▼FXトレードの情報はこちら

https://luken.blog/blog-trade-3441

 

作成者: luken.blog

ルークンと申します。
この名は、愛犬の愛称です。

ブログは、はじめたばかりのため、しばらくはこの名称で投稿を致します。

時事・芸能・ブログ・アフリエイトその他何でも思いついたものを調べ、有効と捉えた情報をまとめて記事にしていきます。

例えば、WordPressの設定記事は相当数がネット上に存在していますが、その点と点を繋げ、各テーマ毎に優れた記事のリンクをなるべく1ページ内の記事におまとめして貼って、発信していきます。

できるだけ便利に参照頂けるよう、努力致します。

その他、アフリエイトの手法やブログの書き方などについても、テーマにしておまとめしていく所存です。

また、ゆくゆくは時事関連や芸能関連のニュースにおける同じ事件やテーマについて、マスコミ各社の報道の違いやSNS関連情報など、おまとめして発信していけたらと思います。

少しづつではありますが、ジャンルを増やしていきますので、よろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

モバイルバージョンを終了