Lightningでブログを作ろう｜第1週 初期設定を完成させよう｜WordPress
zio
みなさん、こんにちは！管理人のジオです。
今回は
WordPressテーマLightning を使ったブログの作り方を解説します。
全3週でお届けする内容の内、今回は『第1週目 初期設定を完成させよう』です。ぜひ挑戦してみてください。
1日の作業目安30分程度
この記事は
レンタルサーバーの契約と独自ドメインの設定が完了し、WordPressにはじめてログインしたところから解説します。レンタルサーバーの契約・独自ドメインの設定が終わっていない方は、こちらを参考に作業してみてください。
長くなるので、ブックマークも忘れずにお願いします。
広告｜AdSense
目次
1週間目
初期設定を完了させよう
Menu
７日目
１日目 常時SSL化を完了させよう
１日目は、WorddPressで使うインターネット通信をSSL化＝暗号化通信に設定します。セキュリティの安全性を保つために常時ＳＳＬ化に設定していきます。
常時SSL化の手順は２工程です。
①サーバー側の設定を完了させます。
②WordPress側の設定を完了させます。
①サーバー側の無料SSL設定を完了させます。
まずは、契約しているレンタルサーバーのSSL設定マニュアルに従って、サーバー側のSSL化を行います。
SSL設定マニュアル 一覧
- ConohaWing |
1.無料独自SSLを設定する
2.WordPressかんたんSSL化を利用する - エックスサーバー|
1.無料独自SSL設定
2.Webサイトの常時SSL化 - mixhost｜
mixhostのクイックインストール後のSSL化の設定について - ロリポップ｜
独自SSL（無料）のお申込み・設定方法 - カラフルボックス｜
1.無料SSLのご利用方法（初心者向け）
2.WordPressの常時SSL化対応方法 - さくらのレンタルサーバ｜
1.SSL証明書を設定したい（共有SSL）
2.WordPressのサイトをSSL化したい
＊ その他レンタルサーバーは「（レンタルサーバー名） SSL化」で検索
②WordPress側の設定を完了させます。
共通
1. WordPressログイン名とログインパスワードを使ってWordPressにログインします。
２. WordPressダッシュボード＞設定＞一般をクリックし、
- WordPressアドレス
- サイトアドレス
の項目をhttp:// から https://に書き換えます↓
３.画面をスクロールし 変更を保存 をクリックします。
これで、SSLの設定は完了です。
独自ドメインがSSL化されているかを確認しよう
１. https:// zio-start.com のように https://ドメイン名のサイトURLを検索窓に入力します。
https://~のサイトが表示された→SSL化成功
2. 次に、http://ドメイン名を検索窓に入力します。サイトが表示されたら画面上部のURL窓を確認してください。
https://から始まるURL ⇒常時SSL設定が完了しました
http://から始まるURL ⇒常時SSL化マニュアルを参照やり直し
⇩
常時SSL化マニュアル
SSL化の後に、httpからhttpsに自動的に転送させるための設定です。
- ConohaWing | WordPressかんたんSSL化を利用する
- エックスサーバー｜Webサイトの常時SSL化
- mixhost｜mixhostのクイックインストール後のSSL化の設定について
- ロリポップ｜独自SSL（無料）のお申込み・設定方法
- カラフルボックス｜WordPressの常時SSL化対応方法
- さくらのレンタルサーバ｜WordPressのサイトをSSL化したい
設定が終わったら『独自ドメインがSSL化されているかを確認しよう』をもう一度繰り返してみてください。
＊常時SSL化には少し時間がかかる場合があります。うまくいかない場合は、30分ほど時間をおいて再度試してみてください。
広告｜AdSense
２日目 WordPress管理画面に慣れよう
２日目はWordPressの管理画面に慣れるために、それぞれの機能を確認していきましょう。
WordPressにログインしよう！
まずはWordPressにログインしましょう。本格的にWordPressを操作する前に、管理画面の見方を確認します。
青色エリア
Zio-Start.com：自分のサイトへのリンク
ExUnit：プラグインのショートカット
新規＋：各種コンテンツの新規作成ができるショートカット
黄色エリア
よく使うツールのみ紹介します
ダッシュボード
メイン画面に戻ってきます。
投稿
時系列に整理されたページを作成するときに使います
- 日記
- 新着情報
- お知らせ
など
固定ページ
サイト内の軸になるページを作成するときに使います
- トップページ
- プライバシーポリシー
- お問い合わせページ
- 会社概要
など
外観
サイトのデザインを決めるときに使います。
- テーマの設定
- エディター
- カスタマイズ
- 追加CSS
など
設定
- https://の設定や
- 表示設定
- パーマリンク
- プラグインの設定
など
赤色エリア
表示オプション：表示形式を選べます。
ヘルプ：サポートフォーラムにアクセスできます。
パーマリンクを設定しよう
パーマリンクのデフォルトは、「投稿名」にセットされています。このままにしておくとURL窓に表示されたときに文字化けてしまうので、任意の投稿名を意味する[％postname%]をセットします。
✔文字化けるとは？
関連記事 実践！WordPress×SEO｜使用テーマLightning ：準備３ パーマリンクを設定する
任意の投稿名に設定しなおす
- WordPrssダッシュボード＞[設定]＞[パーマリンク]を選択し、
- カスタム構造を選択 ＋[％postname%]タブを選択。
- [変更を保存]をクリックします。
広告｜AdSense
3日目 Lightning をインストールしよう
インスト―ル方法
Lightning ダウンロード方法
手順.
１.まずはWordPress管理画面＞外観＞テーマを順にクリックします。
２.画面の黄色枠部分『新しいテーマを追加』または『＋』をクリックします。
３．『テーマ追加』画面の黄色枠「テーマを検索・・・」に『Lightning』と入力し、検索します。
４．検索結果画面に↓のように表示されます。黄色枠でしめしたLightningをクリックします。
５．デザインなどを確認することができます。確認後、画面左上『インストール』をクリックしてLightningをダウンロードしてください。
6.インストールが完了すると『インストール』ボタンが『有効化』ボタンに変化します。『有効化』ボタンをクリックしLightningのインストールを完了させましょう。
Lightningインストール完了
世代を変更しよう
ダウンロードされたLightnig には、2種類の世代が梱包されています。
新規インストールした場合はLightning Generation３（＝Lightning G3）が設定されています。
WordPress管理画面＞外観＞カスタマイズ＞Lightning機能設定を順番にクリックし、確認してみてください。
＊Webサイトを作る前にLightning G3に設定しておくことをお勧めします。すでにLigjtning Generation２でWebサイトを作っている場合は、先にサイトのバックアップを保存してから世代の変更を行ってください。
詳しくは↓↓
外部リンク｜Lightning 公式ページ 従来のLightningとの違いを参考になさってください。
| 変更点 | Lightning Generation２ （～Version13.ｘ) | Lightning Generation３ |
| 外観＞ウィジット コンテンツの全幅表示 | 非対応 | 対応 |
| 外観＞ウィジット トップページコンテンツエリア上部 | あり | なし |
| 個別投稿ページ パンくずリスト・ページヘッダーの非表示 | あり | なし ＊カスタムCSSより非表示にする |
テーマの更新をしよう
次にWordPressテーマの更新方法を確認しておきましょう。
更新には
- 自動更新
- 手動で更新
の２つの方法があります。
自動更新を設定する場合
WordPress管理画面＞外観＞テーマ＞Lightning の順にクリックし、画像黄色枠中の『自動更新を有効化』をクリックします。配信元のVektor.incから届く更新情報を自動で更新してくれます。
手動で更新する場合
更新のお知らせを受け取った後、以下の二つの方法で更新することができます。
- WordPress管理画面＞外観＞テーマ＞Lightning から更新する
- WordPress管理画面の最上部 ショートカットエリア『ExUnit』の隣に表示される
をクリックして更新する
ちなみに、更新のお知らせは登録しているメールアドレスに届きます。
広告｜AdSense
4日目 プラグインを設定しよう
プラグインのインストール方法
プラグインには
①自動インストールされるもの（標準プラグインなど）と②手動インストールするものがあります。
①自動インストール
WordPressテーマLightningをインストールすると、標準プラグインが自動的にインストール されます。
WordPress管理画面＞プラグインを順番にクリックし、各プラグインを有効化してください。
標準プラグイン
VK All In One Expansion Unit
（ExUnit）
VK Blocks
VK Block Patterns
標準プラグインは、Lightningを使う上で必須のプラグインです。自動的にインストールされていない場合は手動でインストールしてください。
標準プラグインにどんな機能があるのか気になる人は↓
関連記事 Litning 機能と使い方｜初心者おすすめ WordPressテーマも確認してみてください。
②手動インストール
WordPress管理画面＞プラグイン＞新規プラグインの追加＞検索小窓にプラグイン名を入力し検索をクリックします。
探していたプラグインを見つけたら詳細を確認をクリックし、内容を確認してからインストールをクリックしてください。インストールが完了したら有効化を行ってください。以下『リダイレクト（転送）用のプラグインを設定する』を参照してください。
おすすめプラグイン
Contact Form ７
問い合わせフォームがつかえる
Flexible Table Block
表図の作成
JetPack
アクセス解析やサイトマップが作れる
Redirection
リダイレクト（転送）の設定
リダイレクト（転送）用のプラグインを設定する
インストールの練習もかねて、リダイレクト用プラグインをインストールしてみましょう。
＊インストールするプラグインは好きなものを選んでいただいて構いません。
おススメな無料プラグインを一つご紹介します。
おすすめ
無料プラグイン Redirection
Redirection – WordPress プラグイン | WordPress.org 日本語
Manage 301 redirects, track 404 errors, and improve your site. No knowledge of Apache or Nginx required.
インストール方法
手順.
1.WordPress管理画面⇒プラグイン⇒新規プラグインの追加⇒Redirction を検索小窓に入力
2.Redirectionをクリックして、詳細を確認しインストールをクリック。有効化をクリック。
これでインストールは完了です。
★続けてRedirection の初期設定を行います
Redirction初期設定
手順.
１.WordPress管理画面⇒ツール⇒Redirection をクリック
２.『Redirectionへようこそ』中の説明をよく読み、[セットアップを開始]をクリックします。
3.『基本セットアップ』中の
- WordPressの投稿と固定ページのパーマリンクの変更を監視
- すべてのリダイレクトと404エラーのログを保存
に✔を入れます。
3つ目の項目
- リダイレクトと404エラーのIPアドレスを記録する
はプライバシーとGDPR（EU：欧州連合 個人データおよびプライバシーの保護に関する規定）をよく読み、IPアドレスを保存する場合に限り✔を入れて、次へをクリックします。
4.『既存のリダイレクトをインポート』中の
- 初期設定のWordPress”old slugs”
に✔を入れ、次へをクリック
5.『REST API』中の説明をよく読み、必要に応じて再確認・問題を表示をクリック
問題がなければ セットアップ完了をクリックします。
進捗・完了画面
Rediorectionのインストール状況と既存のリダイレクトのインポートが完了したことを確認してください。
これでRedirectionの初期設定が完了しました。
転送ルールの追加
1.WordPress管理画面⇒ツール⇒新規追加をクリック
2.次の内容を入力します。
| ソース URL | 転送前のURL |
| ターゲット URL | 転送後のURL |
| クエリ パラメーター | 末尾に付け加えられた情報をどうするか 例 https://zio-start.com/?page_id=1151 |
| ・順番にかかわらず完全一致 おすすめ ・全てのパラメーターを無視 ・無視してターゲットにパラメーターを渡す | |
| グループ | あらかじめ作っておいた転送ルール ＊デフォルト「転送ルール」のままでもOK |
3.転送ルールを追加 をクリック
リダイレクト＝転送の設定が完了しました
広告｜AdSense
５日目 サイトのデザインを設定しよう
公式ページ（外部）：ベクトレ：ヘッダーロゴとキーカラーの設定
Webサイトに必要なデザインであるヘッダーロゴとサイトアイコンを作って、設定していきましょう。
ヘッダーロゴ
トップページやヘッダーに表示されるデザイン
推奨サイズ 500×120ピクセル
長方形
サイトアイコン＝ファビコン
検索結果やブラウザのタブに表示されるデザイン
推奨サイズ 512×512ピクセル
正方形
サイトロゴ・サイトアイコンをつくろう
ヘッダーロゴとサイトアイコンはペイントツールなどで自作することもできますし、<PR>ココナラなどのサイトからイラストレータに依頼することもできます。
ココナラで依頼する
広告｜ココナラ
イラスト・似顔絵・ロゴ
プロにおまかせ
サイトロゴ・サイトアイコンが準備できたら
画像をメディアにアップロードしましょう↓
画像をメディアにアップロードする方法
画像をメディアにアップロードする方法は２種類あります。
①メディアライブラリから画像をアップロードする方法
WordPress管理画面＞①メディア＞②新しいメディアファイルを追加する＞③ファイルを選択の順にクリックし、デバイス上の画像を選択。
画像がメディアに記録され、記事やサイトアイコンに使用することができるようになります。
②投稿・固定ページからアップロードする方法
編集画面＞ ＋ ＞①画像＞②アップロードの順にクリックし、デバイス上の画像をアップロードします。挿入箇所で画像が表示されます。
メディアライブラリにもアップロードされているので、表示されている記事以外にも使いまわすことができます。
また、コピー＆ペーストした画像も自動的にメディアに保存されます。（ただしファイル名の指定などができないので、注意してください。）
＊おすすめはメディアライブラリから保存する方法です。
作ったデザインを設定しよう
ヘッダーロゴを設定しよう
WordPress管理画面＞外観＞カスタマイズ＞Lightningデザイン設定＞ヘッダーロゴ画像を順にクリックし画像を設定します。
- 先に画像をアップロード済み
⇒画像を選択をクリック - まだ画像をアップロードしていない
⇒画像をアップロードから画像をアップロードします。
サイトアイコンを設定しよう
WordPress管理画面＞外観＞カスタマイズ＞サイト基本情報＞サイトアイコンの項目の順にクリックします。
- 先に画像をアップロード済み
⇒画像を選択からサイトアイコンにしたい画像を設定します。 - まだ画像をアップロードしていない
⇒画像をアップロードから画像をアップロードしサイトアイコンを設定します。
デフォルトサムネイルを設定しよう
WordPress管理画面＞ExUnit ＞デフォルトサムネイル画像からデフォルトサムネイルを設定することができます。アイキャッチがない記事のサムネイルに表示される画像です。個別に用意してもいいですし、ヘッダーロゴなどを指定することもできます。
広告｜AdSense
６日目 サイトのイメージカラーを決めよう
公式ページ（外部）：ベクトレ：基本設定解説 キーカラー・カスタムカラー設定
WordPress管理画面＞外観＞カスタマイズ＞色から
サイトの
- 背景色
- キーカラー
- カスタムカラー 5色
を選択することができます。
キーカラー
ボタンのデフォルトの色やヘッダー部分のタブの色になります。
背景色
すべてのページの背景に単色カラーを設定することができます。
背景画像も設定できる
単色ではなく模様を設定したい場合は、
WordPress管理画面＞外観＞カスタマイズ＞背景画像
から背景画像を設定することができます。
カスタムカラー5色
カラーパレットに追加されます。よく使う色を設定しておくと便利です。
検索エンジンで『カラーパレット 5色』と検索すると統一感のある色の組み合わせがでてきます。自分のサイトのイメージにあわせてカスタムカラーを設定してみてください。
広告｜AdSense
７日目 サイト設計をしよう
サイト設計とは？
個人ブログと企業ホームページ。どちらも同じ『Webサイト』ですが別物に感じますよね。デザインであったり、構造であったり、それぞれのWebサイトの目的にあわせて設計されているためです。7日目は、自分のWebサイトの目的にあわせてサイト設計をしてみましょう。
全体図を考える
当サイトの場合は、トップページから各カテゴリーの紹介ページにリンクさせています。トップページを起点にどのようにリンクさせるのか等ノートに書き出しておくと必要なページが一目でわかって作業しやすくなります。
＊2週目からはこの全体図を基に必要なページを作っていきます。
最低限必要なページ
- トップページ
- 問い合わせ先
- 管理者情報
- プライバシーポリシー
各ページのデザインと配置を考える
当サイトの紹介ページは前半におすすめな理由を説明して、後半に時系列の記事一覧を配置しています。
- どんなパーツを使うのか
- どのように配置するのか
- どのように構成するのか
- レイアウトは1カラムにするのか。2カラムにするのか。
などを書き出しておくと、ページを作るときに効率的に作ることができます。好きなサイトの構成やデザインを参考するのもおすすめです。
ページのデザインや配置は細かくメモしておいてもいいですし、ざっくり考える程度でも大丈夫です。
Lightningの場合はVK Block Patternsというプラグインのおかげで、様々な雛型を使うことができるので、ざっくり考えておくだけでも十分デザイン性のよいページを作ることができます。
広告｜AdSense
まとめ
第1週はWebサイトの基礎を作りました。基本的な設定からデザインの初期設定を行いました。いかがだったでしょうか。次回は固定ページと投稿ページの作り方、カテゴリーの設定方法、メニューの作り方などを解説していく予定です。ぜひご覧ください。
