Lightningでブログを作ろう｜第1週 初期設定を完成させよう｜WordPress
zio
投稿者 Zio ジオ
WordPressテーマLightning を使ったブログの作り方を解説します。
全3週でお届けする内容の内、今回は 第1週目『初期設定を完成させよう』です。ぜひ挑戦してみてください。
1日の作業目安30分程度
関連記事
- WordPressのはじめ方｜図解でやさしく教えます！ConoHa Wingで最短１０分
- Lightningでブログを作ろう第2週目 コンテンツを作ろう
- LIghtningでブログを作ろう第3週目 機能を使い倒そう！
Lightning 配信元Vektorが運営するオンライン学習サイト
広告｜AdSense
目次
1週間目
初期設定を完了させよう
Menu
７日目
１日目 常時SSL化を完了させよう
１日目は
WorddPressで使うインターネット通信をSSL化＝暗号化通信に設定します。ネットの安全性を保つために常時ＳＳＬ化に設定していきます。
常時SSL化の手順は２ステップ
①サーバー側の設定を完了させる
②WordPress側の設定を完了させる
です。
①サーバー側の無料SSL設定を完了させる
まずはサーバー側のSSL化を行います。「（レンタルサーバー名）＋SSL化」で検索して契約しているレンタルサーバーのSSL設定マニュアルを探してみましょう。
当サイトでおすすめしているレンタルサーバー５社のマニュアルも用意しました。
SSL設定マニュアル
- ConohaWing |
1.無料独自SSLを設定する
2.WordPressかんたんSSL化を利用する - エックスサーバー|
1.無料独自SSL設定
2.Webサイトの常時SSL化 - mixhost｜
mixhostのクイックインストール後のSSL化の設定について - ロリポップ｜
独自SSL（無料）のお申込み・設定方法 - さくらのレンタルサーバ｜
1.SSL証明書を設定したい（共有SSL）
2.WordPressのサイトをSSL化したい
②WordPress側の設定を完了させる
つぎに、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化したい
設定が終わったら『独自ドメインがSSL化されているかを確認しよう』をもう一度繰り返してみてください。
＊常時SSL化には少し時間がかかる場合があります。うまくいかない場合は、30分ほど時間をおいて再度試してみてください。
広告｜AdSense
２日目 WordPress管理画面に慣れよう
２日目は
WordPressの管理画面に慣れるために、それぞれの機能と配置を確認していきましょう。
WordPressにログイン！
WordPressにログインして管理画面を見てみましょう。
青色エリア
赤エリア
黄
色
エ
リ
ア
青色エリア
- Zio-Start.com
自分のサイトへのリンク - ExUnit
プラグインのショートカット - 新規＋
各種コンテンツの新規作成ができるショートカット
黄色エリア
＊よく使うツールのみ紹介します
- ダッシュボード
メイン画面に戻ってきます。 - 投稿
時系列に整理されたページを作成するときに使います（日記、新着情報など）
- 固定ページ
サイト内の軸になるページを作成するときに使います(トップページなど)
- 外観
サイトのデザインを決めるときに使います。（カスタマイズ・ウィジット・追加CSSなど）
- 設定
赤色エリア
- 表示オプション
表示形式を選べます。 - ヘルプ
サポートフォーラムにアクセスできます。
基本の機能とよく使うものを紹介しました。プラグインが増えるとメニューも増えていきますので覚えておいてください。
パーマリンクの設定を変更しよう
＊パーマリンクとは、URLとほぼ同義です。Parmanent Link（恒久的なリンク）の略称
パーマリンクを『任意の投稿名』にセットします。パーマリンクを変更できるようにするための設定です。
デフォルトでパーマリンクは「投稿名」にセットされています。このままだとタイトル＝パーマリンクになり、検索窓に表示されたときに文字化けてしまいます。（タイトルが日本語の場合）文字化けてしまうとなにかと不都合が多いので任意の投稿名に変更できるようにします。
任意の投稿名に設定しなおす
任意の投稿名を意味する[％postname%]をセットします。
手順
- WordPrssダッシュボード＞[設定]＞[パーマリンク]を選択し、
- カスタム構造を選択 ＋[％postname%]タブをクリック。
- [変更を保存]をクリックします。
広告｜AdSense
3日目 Lightning を準備しよう
３日目は
無料のWordPressテーマLightningをインストールしていきます。
まずはインストール
Lightning インストール方法
手順.
１.WordPress管理画面＞外観＞テーマを順にクリックする
２.画面の黄色枠部分『新しいテーマを追加』または『＋』をクリックする
３．『テーマ追加』画面の黄色枠「テーマを検索」に『Lightning』と入力し検索し
４．検索結果画面に表示されたLightning（黄色枠）をクリックします
５．詳細を確認後、画面左上『インストール』をクリックして『Lightning』をダウンロードします
6.インストールが完了すると『インストール』ボタンが『有効化』ボタンに変化します。『有効化』ボタンをクリックしLightningのインストールを完了させましょう
＼インストール完了／
Lightningの世代を変更しよう
次に、Lightningの世代を変更します。
ダウンロードされたLightnig には2種類の世代が梱包されています。Webサイト作成前にLightning Generation３（＝Lightning G3）が設定されているか確認しておきましょう。
手順
１．WordPress管理画面＞外観＞カスタマイズ＞Lightning機能設定を順番にクリック
２．世代設定の項目が『Generation３』になっているか確認
＊すでにLigjtning Generation２でWebサイトを作っている場合は、先にサイトのバックアップを保存してから世代の変更を行ってください。
詳しくは↓↓
外部リンク｜Lightning 公式ページ 従来のLightningとの違いを参考になさってください。
G2とG3の違い
| 変更点 | 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を使う上で必須のプラグインです。自動的にインストールされていない場合は手動でインストールしてください。
②手動インストール
WordPress管理画面＞プラグイン＞新規プラグインの追加＞検索小窓に『プラグイン名』を入力し検索します。
探していたプラグインを見つけたら詳細を確認をクリックし、内容を確認してからインストールをクリックしてください。インストールが完了したら有効化を行ってください。以下『リダイレクト（転送）用のプラグインを設定する』を参照してください。
おすすめプラグイン
Contact Form ７
問い合わせフォームがつかえる
Flexible Table Block
表図の作成
JetPack
アクセス解析やサイトマップが作れる
Redirection
リダイレクト（転送）の設定
リダイレクト（転送）用のプラグインを設定する
インストールの練習もかねて、リダイレクト用プラグインをインストールしてみましょう。
＊インストールするプラグインは好きなものを選んでいただいて構いません。
おススメな無料プラグインを一つご紹介します。
おすすめ
無料プラグイン Redirection
Redirection – WordPress プラグイン | WordPress.org 日本語
301リダイレクトを管理、404エラーを追跡し、あなたのサイトを改善します。ApacheやNginxの知識は必要ありません。
インストール方法
手順.
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サイトの基礎を作りました。基本的な設定からデザインの初期設定を行いました。いかがだったでしょうか。次回は固定ページと投稿ページの作り方、カテゴリーの設定方法、メニューの作り方などを解説します。ぜひご覧ください。
Lightning でブログを作ろう第２週目「コンテンツをつくろう！」
広告｜AdSense
