![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/ec130498cac1121aca2cd2e8753aeba2.png)
これからブログを始めたい
という方向けに、ブログの始め方を説明いたします。
ブログの仕組みを理解する
これからブログを始めるということは、世の中の色々な方に見てもらうということです。
それは、24時間、365日、どこからでも閲覧してもらえるようにすることが必要です!
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/question_head_gakuzen_girl.png)
それって、どうやっていつでも見れるようにしているの?
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/01/e8a93d900979f33828e085f4e3c10108.png)
レンタルサーバを借りて、そこにデータを置くことで実現出来ます!
そのため、レンタルサーバを契約し、そこへホームページに必要なデータを全て置きます。
そうすることで、自分のパソコンをシャットダウンしても、 レンタルサーバが代わりに
ホームページを表示してくれます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2021/11/20211103_1.png)
もし、レンタルサーバを契約せずに、自分でホームページを公開するとどうなるでしょう。
- 24時間、パソコンを起動し続けなければいけない
- 誰でも自分のパソコンにアクセスしにくる
という状態にしなければ実現できません。
そんなこと、したくありませんよね??
そのためにレンタルサーバの契約は必須です。
レンタルサーバを契約する
レンタルサーバが必要と理解できたので、早速レンタルサーバを紹介いたします。
WordPressが使用できるレンタルサーバの中で、最安値なのがロリポップ!
なんと!月220円しかかかりません。
ロリポップとは、GMOが2001年から開始した老舗のレンタルサーバサービス。 女性、学生、ホームページ初心者をターゲットとした個人向けのレンタルサーバサービス。 ターゲット層に合わせて月額100円(税別)からという低価格帯で提供を行っている。 現在のキャッチコピーは「すぐに使える、ずっと使える。」
ということで、私はロリポップを推しています。
価格の比較は以下の通りです。
ロリポップのライトプランが一番安いですが、この価格にドメイン料がかかります。
ConohaWINGは表示速度や速く、電話サポートや自動バックアップも付いていて、ドメインが2つ無料で付いてくるので、シンプルな契約で機能が充実しているのが良い方にはConohaWINGがオススメです。
ConohaWINGに対抗するプランが、ロリポップのハイスピードプラン。
こちらならドメインが1つ付いて、ConohaWINGよりも安い!
また、キャンペーンの時は、初期費用が無料になったり、ドメインが付いてきたりします。
ロリポップ | ロリポップ | ConoHa WING | |
---|---|---|---|
プラン | ライト | ハイスピード | ベーシック |
月額 | 220円 | 550円 | 660円 |
初期費用 | 1650円 | 1650円 | 0円 |
ディスク容量 | 200GB | 400GB | 300GB |
なし | ドメインが1つ永久無料 電話サポートあり | ドメインが2つ永久無料 電話サポートあり |
220円って安いけど、大丈夫???
と思われるかもしれませんが、私はライトプランで契約していますが、問題ありません。
WordPressを2つインストールしていますが、ディスク容量も十分です。
ここまでで、契約しようと思われた方はこちらからお進みください。
![](https://www18.a8.net/0.gif?a8mat=3BSQ0A+53YYPE+348+6EMGX)
![](https://www10.a8.net/0.gif?a8mat=3NGM7F+DNS2GI+50+5SPXJL)
ロリポップのサイトに行くと、お申込みボタンから申し込みを進めます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211103_2-2-1024x495.png)
■プラン
最初はライトで契約し、後から上位プランへ変更することも可能です。参照
そのため、今回の説明はロリポップのライトプランで説明します。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211103_3-2-1024x622.png)
■アカウント情報
初期ドメイン:好きな英数字で良いです。これがロリポップのログインアカウントになります。
パスワード:ロリポップのログインパスワードになります。
連絡先メールアドレス:申し込み完了の通知が来るので、実際に使用しているメールアドレスを登録。
独自ドメイン:利用するにチェックを付けるようにしましょう。お得なサービスです。
※独自ドメインサービスは、現在はハイスピードプランのみとなりました。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211103_4-2.png)
以降の画面は、指示に従って申し込みを進めてください。
レンタルサーバを契約した後、メールアドレスに契約内容が届きますので、マイアカウントでレンタルサーバにログイン出来るようになります。
ドメインを契約する
ドメインとは、自分のブログを開くときに指定するアドレスです。
https://ドメイン名
というアドレスを指定することでホームページが開けるようになりますので、
以下のポイントを押さえてドメイン名を取得しましょう。
・覚えられやすいドメインにする
・ページの内容と関係する名前にする
・「.com」「.jp」「.net」がおすすめ
レンタルサーバと同時に契約していない場合、Xserverドメインやお名前ドットコムなどが有名です。
ドメイン取得する際に、複数のサイトを比較して、安く契約できるドメインを契約しましょう。
![](https://www10.a8.net/0.gif?a8mat=3NN7FX+5L8J8Y+50+3T4K1T)
![](https://www13.a8.net/0.gif?a8mat=3NN7FX+87B0TU+CO4+15THJ5)
ドメインを取得する際に、自分が欲しいと思ったドメイン名を検索すると、利用可能か確認できます。
例えば、mijikanaseという名前で検索すると、mijikanase.comは取得可能ということになります。
契約を進めて自分のドメインを購入して下さい。
レンタルサーバで使用するドメインを独自ドメインに変更する
独自ドメインが取得できましたら、レンタルサーバのロリポップにマイアカウントでログインします。
ロリポップ ロリポップ!ユーザー専用ページ (lolipop.jp)
ログイン後、サーバーの管理・設定>>独自ドメイン設定をクリックし、「独自ドメイン設定」をクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211103_7-3-1024x528.png)
先ほどの独自ドメインで「mijikanase.com」を取得した場合、
以下の画像のように登録します。
■独自ドメイン設定
設定する独自ドメイン:取得したドメイン名を入力する
公開(アップロード)フォルダ:wwwやwebなど、何か名前を入力しましょう。
レンタルサーバのフォルダの一番上にWebサイトの情報を格納するより、
一つフォルダを作成して、その中に格納する方が管理しやすいです。
アクセラレータの設定:チェックを付けたままにしておきましょう。
最後に、独自ドメインをチェックするをクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211103_9-2.png)
次の画面で、DNSの解決を確認するを選択し、新しい独自ドメインが使えるようになったかを確認しておきましょう。
正しく登録が出来ましたら、このように表示されます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2021/11/20211103_8-1024x583.png)
ホームページをhttps化する
独自ドメインを設定すると、http://ドメイン名でページが開くようになりますが、
https://ドメイン名で開くようにしておくことをオススメします。
最初に設定をしておかないと、後でhttps化するとホームページへのアドレスが変わってしまうのでご注意下さい。
https化することをオススメする理由は、GoogleがWebサイト全体のHTTPS化「常時SSL化」を促しているためです。
ロリポップ画面にて、セキュリティから独自SSL証明書導入を選択します。
無料独自SSLを設定するをクリックします。
「独自SSL証明書お申込み・設定」のページにて、「SSL保護されていないドメイン」のドメインとサブドメインにチェックを入れ、「独自SSL(無料)を設定する」をクリックします。
数十分から1時間程度で完了するかと思います。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211103_10-2-1024x554.png)
WordPressのインストール
管理画面よりWordPress簡単インストールをクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_3-2.png)
次の画面で、以下の項目を入力していきます。
■インストール先
サイトURL:http://取得したドメイン名 のままでOK。2つ目のサイトなら任意の所に入力
初期データベース:そのままでOK
サイトのタイトル:作成するホームページのタイトルを入力します
ユーザー名:WordPressにログインするための名前を入力します
パスワード・パスワード(確認):WordPressにログインするためのパスワードを入力します
メールアドレス:WordPressのインストール完了後に通知が来ます。重要!
プライバシー:チェックを付ける
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_2-2.png)
インストールが完了しましたら、サイトURLと管理者ページURLが表示します。
これをメモ帳などに残しておいてください。
アカウントとパスワードも併せてメモを残しておいてください。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1d9de4e13.jpg)
これで、WordPressのインストールが完了しました!!
サイトURLを開くとHello world!のページが表示します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1d9e15781.jpg)
管理者ページURLを開くと、ログイン画面になります。
設定したユーザー名とパスワードを入力することでログイン出来ます。
これ以降はWordPress管理者画面でホームページの設定を行っていきます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1d9ed1bd0.jpg)
テーマ選びとメニュー作成
まずは、テーマを選びます。
テーマとは、これから作成するホームページのテンプレートみたいなもので、大枠が出来上がります。
そのため、最初に決めてしまいましょう。
作成してから変更する場合は、ページ構成が変わっていないか確認が必要になります。
外観のテーマを開きます。
新規追加を選び、次の画面で良さそうなテーマを選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_6-2-1024x339.png)
画面の作りや説明文、評価の数などから、これかなーと思うテーマを選んで下さい。
有名なテーマを選んでおくと、人に聞きやすいこともあります。
無料の中ではCoCoonがオススメです。
私は、サイトを作成した際は、CoCoonではなくNoveにしました。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_7-2-1024x469.png)
インストールしてから、有効化をクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_8-2.png)
有効化すると、テーマがNoveになりました。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1da4408f9.jpg)
そうすると、他のテーマが不要になるので、一つずつ開いて右下にある削除を選んで削除していきます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_10-2-1024x456.png)
テーマが1つになれば、さっぱりしましたね。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1da816041.jpg)
続けて、メニューを設定していきます。
テーマの下の方にあるメニューをクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_12-2-1024x442.png)
外観のメニューに飛びます。
現在は、固定ページに何もないのでメニューを作成できません。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1daa69a50.jpg)
仮で良いので、固定ページで新規追加を選びます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dab42660.png)
メニューにする名前をタイトルに入力して公開をクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_15-2-1024x309.png)
ページが作成されました。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dacb7a2b.png)
メニューの数だけ作成し、タイトルだけのページが揃います。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dada985d.png)
外観のメニューを開きます。
メニュー名にメニューと入力し、左の固定ページからメニューに表示させる項目にチェックし、メニューに追加をクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_18-2-1024x623.png)
すると、右側にメニュー名が表示します。
順番の並び替えもドラッグで動かせます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1daf78f18.png)
完成したら、このメニューはメインメニューなのでチェックを付けてメニューを保存します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1db07a1fa.jpg)
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_21-2-1024x215.png)
すると、メインメニューが表示します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1db1f00ef.png)
固定ページだけがメニューに登録出来るのではなく、
「投稿」で作成したページを表示
「カスタムリンク」で開きたいページのURLを指定
ブログでしたら「カテゴリー」をメニューにすることも出来ます。
ヘッダーやロゴの変更
外観からカスタマイズを選択します。
開いたページで、ヘッダーを選択します。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_23-2.png)
ロゴを変更を選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_24-2.png)
ロゴを選択をクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_25-2.png)
ファイルを選択から、パソコン内に保存されているロゴファイルを選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_26-2-1.png)
ファイルを選択すると、ロゴが表示します。
続けてサイトのタイトルとキャッチフレーズを入力します。
また、表示にあるマークを切り替えてロゴとタイトルとキャッチフレーズの配置が良いと思ったものに変更します。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_27-2.png)
下へスクロールすると、キャッチフレーズやタイトルを表示させたり消したりできます。
ロゴの最大幅の数値を変えて、適したサイズに変更します。
パソコンのマーク、タブレットのマーク、スマホのマークがあり、切り替えた時の見え方も確認しつつ、その時のサイズも変更が出来ます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_28_2.png)
タブレットのサイズはパソコンと同じにしています。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_28-2_2.png)
スマホのサイズは40にしました。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_28-3_2.png)
次に、レイアウトも変更していきます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_29-2.png)
ホームページ設定を選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_30-2.png)
ホームページを表示した時、最初に表示するのが最新の投稿になっていました。
固定ページのホームに変更することで、ホームページを開いた時に指定した画面が開きます。豆知識!!
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_31-2.png)
次に、ヘッダーを選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_32-2.png)
ヘッダーメインを選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_33-2.png)
レイアウトの背景色を付けてみました。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_34-2.png)
色は細かく変更が出来ます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_35-2.png)
ヘッダーのメニューを変更をクリックします。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_36-2.png)
レイアウトで項目の間隔を20から25に広げました。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/04/20211003_37-2-1024x252.png)
公開をクリックすると、設定が反映されます。
こんな感じでロゴやタイトル、背景色になりました。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc00a824.jpg)
プラグインのインストールや設定
プラグインに何がインストールされているか確認してみます。
私のテーマでは、このようなプラグインがインストールされていました。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc22dc5f.jpg)
残したプラグインはこちらです。
- Akismet Anti-Spam (アンチスパム) セキュリティ対策
- Site Kit by Google Googleに見つけてもらいやすくなる
- SiteGuard WP Plugin 管理画面へのログイン時にセキュリティを高められる
- WP Multibyte Patch 必要
- Yoast Duplicate Post ワンクリックで複製できるので、同じような投稿の時に便利
追加でインストールしたのはこちらです。
- All in One SEO SEO対策が出来ます
- BackWPup WordPressのバックアップを設定出来ます
- Contact Form 7 お問い合わせページを作成出来ます。
新規追加をクリックすると、プラグインを追加出来る画面が表示します。
Contact Form 7
人気を開くと、早速目当ての「Contact Form 7」があるので今すぐインストールを押します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc33b65a.jpg)
インストールしたら、続けて有効化をクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc3cb0ab.png)
不要なプラグインは、無効化して削除をすると消すことが出来ます。
hello dollyは不要なので削除です。
このような状態になりました。
プラグインは全て有効化し、自動更新も有効化にして良いと思います。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc5050db.jpg)
Site Kit
Site Kitはダッシュボードの下にありますのでクリックします。
そして、GOOGLE アカウントでログインをクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc5ccabd.jpg)
ようこそ画面が開きますので、Googleでログインから進めていきます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc6ae6b9.png)
メールアドレスは伏せていますが、こんな画面になりますので、Continueをクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc76153b.png)
アクセス許可を求められますので、許可をクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc854bd9.jpg)
これで完了です。となりましたら、ダッシュボードに移動します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dc94d17f.jpg)
グラフや検索クエリが表示します。
始めたばかりだと、何も表示されないかと思います。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dca1bde1.png)
BackWPup
左のメニューにあるBackWPupをクリックします。
インストールして有効化しただけではバックアップは出来ていませんのでご注意ください。
青い文字の「新しいバックアップジョブを追加」をクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dcb26536.jpg)
一般タブを設定していきます。
■一般
ジョブの名前:任意の文字を入力
バックアップ対象:標準では画像の3つにチェックが入っていますので、そのまま
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dcc15e4e.png)
■一般の続き
アーカイブ形式:Zip
バックアップファイルの保存方法:お好みに合わせて選んで下さい。
私はレンタルサーバ内に保存したいので「フォルダーへバックアップ」にしています。
Dropboxにバックアップでも良いですが、一杯にならないよう気を付けてください。
ログの送信先メールアドレス:設定してもしなくても良いです。
メールの送信元:ログを送る場合は、誰から届くのかの設定です。そのままで良いです。
エラー:チェックは付けておきましょう。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dccecb2d.png)
■スケジュール
ジョブの開始方法:WordPressのCron
スケジューラの種類:基本のまま
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dcdb6c45.png)
■スケジュール 続き
スケジューラ:私の場合、毎日更新しようと思っているので毎日0:00に設定しました。
あまりバックアップが必要と思わない場合は、毎週何曜の何時と設定すると良いです。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dce04d2e.png)
■宛先
バックアップを格納するフォルダ:そのままでもよい
ファイルを削除:15になっていましたので、そのままでよい。
ホームページが出来てから、バックアップ1回のサイズを確認し、×15が保存できるか確認すると良い
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dcec447e.png)
変更を保存をクリックします。
BackWPupのジョブを開くと、ジョブが出来ていれば成功です。
また、「今すぐ実行」をクリックすると、バックアップがすぐに取得できます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd00eda4.png)
BackWPupのバックアップ開くと、このようにファイルが出来ていれば成功です。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd0e6374.png)
不要な記事の削除やメニューの検討
投稿にある不要な記事を削除します。
投稿を開き、不要な記事にチェックを付けてゴミ箱へ移動を適用します。
(タイトルなし)やHello worldなどは不要です。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1df265fb5.png)
固定ページも不要な固定ページがあればチェックを付けてゴミ箱へ移動を適用します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1df4350eb.png)
名前を変更する場合は、クイック編集で可能です。
「訪問修理」は「訪問サポート」に変更します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1df50b23c.png)
タイトルとスラッグを「訪問サポート」に修正します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1df5dd593.png)
固定ページの名前を修正すると、メインメニューも修正が出来ています。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1df68b89b.jpg)
投稿や固定ページの作成
記事の投稿や固定ページの作成方法を説明していきます。
共通する部分が多いため、一緒に説明致します。
投稿:ブログの1記事を作成する。カテゴリーやタグ、アイキャッチ画像などが付けられる。
固定ページ:ホームページを1ページ作成する。トップページやLPなどの作成に使用する。
メニューから投稿または固定ページの新規作成を選びます。
タイトルを付ける
記事のタイトルを付けます。
タイトルを付けるうえでのポイントは以下の通りです。
重要ですので、記事が書き終わってからタイトルをもう一度考えても良いかと思います。
●記事の内容と関係するタイトルにする
●読者の興味を惹きつけるタイトルにする
●検索されたいキーワードを入れる
●全角30文字前後にする
ブロックとは
WordPressに搭載されている機能で、記事の本文を作成する際の基本単位。
記事の本文を入力する画面で、+が表示する箇所が2か所あります。
右側、もしくはブロックとブロックの行間にマウスを持っていったり、クリックすると+が現れます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/933b8149a389a6b9a3b8653c7f9d09d0.jpg)
+をクリックすると、ブロックメニューが表示します。
+のメニューから段落を選んでもブロックが増やせますが、Enterを押すだけでもブロックが増やせます。
様々な機能を使うことが出来ますので、色々と試しながら記事を作成していきましょう!
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/b0eba12d4b01d9bac49da3ec651f0151.jpg)
カテゴリーとは
記事にカテゴリーを設定し、記事をジャンルに分けてグループに出来る。
サイドメニューにカテゴリーを表示させて、関連する記事をまとめて閲覧しやすくなる。
階層は2階層、多くても3階層までが良いと思います。
未分類のカテゴリーは使用しないようにしましょう。
カテゴリーを選択出来るようにするには、記事を書く前に作成する必要があります。
WordPressのメニューから、投稿のカテゴリーを開きます。
そこで、以下のような設定項目を入力し、「新規カテゴリーを追加」を選択すると、画面右に追加されます。
これでカテゴリーとして選択が可能になります。
■カテゴリー
名前:カテゴリーに付ける名前を入力
スラッグ:カテゴリーの名前の英語版を入力することが多い
親カテゴリー:カテゴリーを階層にする場合、一つ上のカテゴリーを選択する
説明:カテゴリーを何のために使用するのかをメモしておくのも良いです。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/d3bea59c83f0822f3970f3abe30323d1-1024x465.jpg)
カテゴリーの設定の仕方は投稿画面の右側にある投稿を下へスクロールすると現れます。
こちらで、カテゴリーの横にチェックを付けると選択出来たことになります。
一つの記事で1つ選択するのが基本で、どうしても2つにまたがる時のみ2つ選択します。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/9f09aa72f00082b1364fb1944cdf5795.jpg)
タグとは
記事にタグを設定し、重要ワードを分類することが出来ます。
ページを訪れた方が、記事を探しやすくなります。
タグには次のような効果があります。
●内部リンクとなって、関連記事が読まれやすくなる
●SEO効果が期待できる
タグの設定の仕方は投稿画面の右側にある投稿を下へスクロールすると現れます。
こちらで、キーワードを入力してEnter、キーワードを入力してEnterで追加することが出来ます。
関連記事として読んでもらいたいキーワードとなりそうであれば、複数入力しても良いと思います。
ただし、毎回違う名前を付けているとリンクにならないため、増やし過ぎても意味がありません。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/b7a6907fc7bd70c396510b345712a7c4.jpg)
アイキャッチ画像とは
アイキャッチ画像は、記事の概要を画像1枚で伝えるのですが、画像はユーザーの目を惹きつけるため非常に重要となります。
記事を書いたらアイキャッチ画像は必ず設定しましょう!!
アイキャッチ画像の推奨されているサイズは、横1200×縦630ピクセルらしいですが、実際に配置して表示を確認してみましょう。
Canvaなどで作成すると、自分好みのアイキャッチ画像が出来ます。
●興味を惹きつける
●デザイン性が向上する
記事の本文の書き方
記事の本文の書き方を説明致します。
改行
改行はEnterではありません。
Enterだけ押すとブロックがもう一つ出来ます。
改行を行いたい場合は、Shift+Enterを押すとブロック内で改行が一つ出来ます。
ブロックも改行と同じように行間が空くのですが、行間が広く空いてしまいます。
スペーサー
行間を自由に空けたい場合、ブロックメニューからスペーサーを選びます。
スペーサーが出来ましたら、画面右側設定メニューに高さという項目が表示します。
数字PXを変更すると、行間が変わっていきます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/8049a711d2fcf550d570e8684293d46c.jpg)
見出し
本文の内容が変わる場合は、ブロックメニューから見出しを選択します。
見出しレベルはH2、H3を選択し、H2が親、H3が子の階層にすることが出来ます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/7d087662c47f6a465d3ef17d7118c10b.jpg)
WordPressのテーマによっては、見出しを複数設置するだけで目次が作成されます。
例:CoCoon、SWELLなど
太字・斜体・リンク
文字のフォントを変更する場合は、文字をクリックするとメニューが表示します。
B:文字の範囲を選択し、Bをクリックすると太文字に変わります
/:文字の範囲を選択し、/をクリックすると斜体に変わります
(-):文字の範囲を選択し、(-)をクリックすると、2つ目の画像が表示し、アドレス欄にリンク先のURLを、新しいタブで開くにチェックを付けると、別の画面でリンク先のページが表示されるようになります。
文字の選んだ範囲がリンクに変わります。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/9929e33628c440024979554127025629.jpg)
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/12ecd8b96bc942624e8b4d5e6c371a07.jpg)
テキスト色・背景色・フォントサイズ・マーカー
文字の色やサイズを変更する場合は、SWELLだとSWELLマークにあります。
テキスト色:文字の範囲を選択し、SWELLマークをクリックし、デキスト色で色を選択すると、文字の色が変わります
背景色:文字の範囲を選択し、SWELLマークをクリックし、背景色で色を選択すると、文字の背景色が変わります
フォントサイズ:文字の範囲を選択し、TTをクリックすると文字サイズが変わります
ボーダーライン:文字の範囲を選択し、鉛筆マークをクリックすると文字にマーカーが引けます
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/9929e33628c440024979554127025629-1.jpg)
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/61c13cf191956f6ec100359241b86568.jpg)
文字を寄せる
横棒3本:文字を左寄せ、中央寄せ、右寄せに出来ます。
左寄せ
中央寄せ
右寄せ
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/9929e33628c440024979554127025629-1.jpg)
箇条書き
複数の行にまたがる文章を書き、箇条書きにする場合、文字をクリックして表示するメニューの一番左のマークをクリックし、リストを選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/9929e33628c440024979554127025629-1.jpg)
- 複数にまたがる
- 文章を選んで
- 箇条書き
枠で囲む
複数の行にまたがる文章を書き、枠で囲みたい場合、文字をクリックして表示するメニューの一番左のマークをクリックし、整形済テキストを選びます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/9929e33628c440024979554127025629-1.jpg)
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/dc0983a3c421e499c9ed85423bd0626b.jpg)
整形済みテキストの部分をクリックし、画面右側設定メニューにテキストや背景、サイズが選べますので、それらを選択変更すると画像のように色が付けられます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/c12529485d8554dea8b2e1b5133a6e0d.jpg)
複数にまたがる
文章を選んで
箇条書き
SWELLだとブロックメニューでボーダー設定やスタイルを選ぶことで、他にもおしゃれなボーダーを描くことが出来ます。
吹き出し
ブロックメニューから吹き出しを選択します。
画面右側設定メニューで、吹き出しに関する設定が変更出来ますので、色を付けたり向きを変えたり、アイコンを付けたりテキストを付けたり出来ます。
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/ec130498cac1121aca2cd2e8753aeba2.png)
吹き出しです
![](http://xn--se-nb4a4903b9gb.xn--tckwe/blog/wp-content/uploads/2022/11/e445a315839ce9debf25ee4d883d813a.jpg)
画像の集め方、加工の仕方
ホームページに使用する画像を集めます。
画像はフリーで使用しても良い画像のみを使うようにしてください。
以下のサイトは無料でダウンロードが可能な有名なサイトです。
写真画像 https://www.photo-ac.com/
イラスト画像 https://www.ac-illust.com/
いらすとや https://www.irasutoya.com/
他にも、自分で写真を撮って使うという方法や、Canvaで作成することも出来ます。
色々な方法で写真を集め、3つ並べて表示させたい。
以下の写真のように、サイズがバラバラな画像が集まりました。
このままだと、変です。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd2db9d8.jpg)
画像を3つ横に並べる方法は、WordPressのギャラリー機能を使用すると簡単です。
ブロックメニューを表示し、ギャラリーを選択します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd38c7a6.jpg)
アップロードをクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd4091d1.png)
3つの画像をアップロードしたら、メディアライブラリを開き、並べる順にチェックを付けて次へ進めます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd4cdee8.jpg)
キャプション(文字)を入力も出来ますが、ここで入力しても
文字が小さいと思いますのでやめて、次へ進めます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd5a2a86.jpg)
画面に画像が3つ並びました。
しかし、画像のサイズが異なる写真を使ったので、うまいこと表示していません。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd686ec7.jpg)
そこで、画像を編集します。
私はバナー工房を使っています。
バナー工房https://www.bannerkoubou.com/
画像に文字を入れる時や画像のサイズ変更する時に使います。
もっと色々と使えそうですので、是非使ってみてください。
開いて、画像を選択して画像を加工するを選びます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd7c6847.jpg)
横幅を400に統一するために、拡大縮小を選択します。
横と縦の長さを指定で、横幅を400と入力し、「サイズを変更する」をクリックすると横幅400、縦幅は画像の比率を保ったまま加工されます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1ddf59ce0.jpg)
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de03ee95.png)
この画像では縦幅が調整されていませんが、この後、縦幅も270になるように調整しています。
画像の加工は、私はWindowsユーザですので、ペイントでも行えます。
選択をクリックし、□で囲むと533×199pxのように表示しますので、その数字を400×270になるように調整します。
文字入れを選択し、テキスト入力欄に文字入れしたい文字を入力します。
大きさや書式など、微調整を行ってから、文字設定を変更・反映をクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd90f8ae.jpg)
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1dd9ecc5b.png)
画像の真ん中に文字が来るように移動し、現在の位置で文字を確定をクリックします。
こんな感じの画像の出来上がりです。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1ddc527c2.jpg)
3つのファイルを同じように文字入れします。
画像のサイズ調整してから、文字入れするようにしてください。
加工前の画像だと、画像の中心が分からなくなるためです。
全て横幅400、縦幅270に合わせたため、ホームにギャラリーで並べると、きれいに並びます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de3d359a.jpg)
もう一つ、ホームに使用する画像を選択します。
以前のホームページで使用していた画像を使って説明します。
画像一つを載せる場合は、ブロックメニューから画像をクリックします。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de455f2c.png)
ファイルをアップロードし、画像を選択します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de524e62.jpg)
画像を幅広にして、ホームの最初の位置に配置します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de5e5b33.jpg)
画像上にテキストを追加します。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de6ca2cf.jpg)
身近なSEとは・・・という文章を書いてみました。
以前はもう少し長く書いていましたが、ホームページではあまり文字が読まれないと、アドバイスを頂きましたので、今回は減らしています。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de80cb34.jpg)
画像とメニューの間に文字を入力し、見出しにしました。
すると、このような画面になりました。
画像も配置すると、トップページとしてかなりいい感じの出来になってきましたね!!
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1de9cfcab.jpg)
メニュー画像の下に、文章を入力してみます。
![](https://blog-imgs-144.fc2.com/q/i/2/qi295q8hsqec/blog_import_616a1deb3a9ac.jpg)
以上
コメント