Lightningでブログを作ろう|第1週 初期設定を完成させよう|WordPress

この記事は広告が含まれています。
Lightningでブログを作ろう
第1週 基本設定

WordPressテーマLightning を使ったブログの作り方を解説します。

全3週でお届けする内容の内、今回は『第1週目 初期設定を完成させよう』です。ぜひ挑戦してみてください。

1日の作業目安30分程度

この記事は

レンタルサーバーの契約と独自ドメインの設定が完了し、WordPressにはじめてログインしたところから解説します。レンタルサーバーの契約・独自ドメインの設定が終わっていない方は、こちらを参考に作業してみてください。

長くなるので、ブックマークも忘れずにお願いします。

1週間目
初期設定を完了させよう

Menu

日目 常時SSL化を完了させよう

1日目は、WorddPressで使うインターネット通信をSSL化=暗号化通信に設定します。セキュリティの安全性を保つために常時SSL化に設定していきます。

zio

常時SSL化の手順は2工程です。

①サーバー側の設定を完了させます。

②WordPress側の設定を完了させます。

①サーバー側の無料SSL設定を完了させます。

まずは、契約しているレンタルサーバーのSSL設定マニュアルに従って、サーバー側のSSL化を行います。

SSL設定マニュアル 一覧

* その他レンタルサーバーは「(レンタルサーバー名) SSL化」で検索

②WordPress側の設定を完了させます。

共通

1. WordPressログイン名ログインパスワードを使ってWordPressにログインします。

2. WordPressダッシュボード設定一般をクリックし、

  • WordPressアドレス
  • サイトアドレス

の項目をhttp:// から https://書き換えます↓

3.画面をスクロールし  変更を保存  をクリックします。

これで、SSLの設定は完了です。

 独自ドメインがSSL化されているかを確認しよう

1. https:// zio-start.com のように https://ドメイン名のサイトURLを検索窓に入力します。

https://~のサイトが表示された→SSL化成功

2. 次に、http://ドメイン名を検索窓に入力します。サイトが表示されたら画面上部のURL窓を確認してください。

画面上部 URL窓

https://から始まるURL ⇒常時SSL設定が完了しました

http://から始まるURL  ⇒常時SSL化マニュアルを参照やり直し

常時SSL化マニュアル

SSL化の後に、httpからhttpsに自動的に転送させるための設定です。

設定が終わったら『独自ドメインがSSL化されているかを確認しよう』をもう一度繰り返してみてください。

*常時SSL化には少し時間がかかる場合があります。うまくいかない場合は、30分ほど時間をおいて再度試してみてください。

日目 WordPress管理画面に慣れよう

2日目はWordPressの管理画面に慣れるために、それぞれの機能を確認していきましょう。

WordPressにログインしよう!

まずはWordPressにログインしましょう。本格的にWordPressを操作する前に、管理画面の見方を確認します。

青色エリア

Zio-Start.com:自分のサイトへのリンク

ExUnit:プラグインのショートカット

新規+:各種コンテンツの新規作成ができるショートカット

黄色エリア

よく使うツールのみ紹介します

ダッシュボード

メイン画面に戻ってきます。

投稿

時系列に整理されたページを作成するときに使います

  • 日記
  • 新着情報
  • お知らせ

など

固定ページ

サイト内の軸になるページを作成するときに使います

  • トップページ
  • プライバシーポリシー
  • お問い合わせページ
  • 会社概要

など

外観

サイトのデザインを決めるときに使います。

  • テーマの設定
  • エディター
  • カスタマイズ
  • 追加CSS

など

設定

  • https://の設定や
  • 表示設定
  • パーマリンク
  • プラグインの設定

など

赤色エリア

表示オプション:表示形式を選べます。

ヘルプ:サポートフォーラムにアクセスできます。

パーマリンクを設定しよう

パーマリンクのデフォルトは、「投稿名」にセットされています。このままにしておくとURL窓に表示されたときに文字化けてしまうので、任意の投稿名を意味する[%postname%]をセットします。

関連記事 実践!WordPress×SEO|使用テーマLightning :準備3 パーマリンクを設定する

任意の投稿名に設定しなおす

  1. WordPrssダッシュボード>[設定]>[パーマリンク]を選択し、
  2. カスタム構造を選択 +[%postname%]タブを選択。
  3. [変更を保存]をクリックします。

3日目 Lightning をインストールしよう

インスト―ル方法

Lightning ダウンロード方法

手順.

1.まずはWordPress管理画面>外観>テーマを順にクリックします。

2.画面の黄色枠部分『新しいテーマを追加』または『+』をクリックします。

3.『テーマ追加』画面の黄色枠「テーマを検索・・・」に『Lightning』と入力し、検索します。

4.検索結果画面に↓のように表示されます。黄色枠でしめしたLightningをクリックします。

5.デザインなどを確認することができます。確認後、画面左上『インストール』をクリックしてLightningをダウンロードしてください。

6.インストールが完了すると『インストール』ボタンが『有効化』ボタンに変化します。『有効化』ボタンをクリックしLightningのインストールを完了させましょう。

世代を変更しよう

ダウンロードされたLightnig には、2種類の世代が梱包されています。

新規インストールした場合はLightning Generation3(=Lightning G3)が設定されています。

WordPress管理画面>外観>カスタマイズ>Lightning機能設定を順番にクリックし、確認してみてください。

*Webサイトを作る前にLightning G3に設定しておくことをお勧めします。すでにLigjtning Generation2でWebサイトを作っている場合は、先にサイトのバックアップを保存してから世代の変更を行ってください。

詳しくは↓↓

外部リンク|Lightning 公式ページ 従来のLightningとの違いを参考になさってください。

変更点Lightning  Generation2 (~Version13.x)Lightning Generation3
外観>ウィジット コンテンツの全幅表示非対応対応
外観>ウィジット トップページコンテンツエリア上部ありなし
個別投稿ページ
パンくずリスト・ページヘッダーの非表示
ありなし
*カスタムCSSより非表示にする

テーマの更新をしよう

次にWordPressテーマの更新方法を確認しておきましょう。

更新には
  • 自動更新
  • 手動で更新

の2つの方法があります。

自動更新を設定する場合

WordPress管理画面>外観>テーマ>Lightning の順にクリックし、画像黄色枠中の『自動更新を有効化』をクリックします。配信元のVektor.incから届く更新情報を自動で更新してくれます。

手動で更新する場合

更新のお知らせを受け取った後、以下の二つの方法で更新することができます。

  • WordPress管理画面>外観>テーマ>Lightning から更新する
  • WordPress管理画面の最上部 ショートカットエリア『ExUnit』の隣に表示される をクリックして更新する

ちなみに、更新のお知らせは登録しているメールアドレスに届きます。

4日目 プラグインを設定しよう

プラグインのインストール方法

プラグインには

①自動インストールされるもの(標準プラグインなど)と②手動インストールするものがあります。

①自動インストール

WordPressテーマLightningをインストールすると、標準プラグインが自動的にインストール されます。

WordPress管理画面>プラグインを順番にクリックし、各プラグインを有効化してください。

標準プラグイン

VK All In One Expantion

VK Blocks

VK Block Patterns

標準プラグインは、Lightningを使う上で必須のプラグインです。自動的にインストールされていない場合は手動でインストールしてください。

標準プラグインにどんな機能があるのか気になる人は↓

関連記事 Litning 機能と使い方|初心者おすすめ WordPressテーマも確認してみてください。


②手動インストール

WordPress管理画面>プラグイン>新規プラグインの追加>検索小窓にプラグイン名を入力し検索をクリックします。

探していたプラグインを見つけたら詳細を確認をクリックし、内容を確認してからインストールをクリックしてください。インストールが完了したら有効化を行ってください。以下『リダイレクト(転送)用のプラグインを設定する』を参照してください。

おすすめプラグイン

Contact Form 7
問い合わせフォームがつかえる

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 をクリック

2.『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.転送ルールを追加 をクリック

リダイレクト=転送の設定が完了しました

日目 サイトのデザインを設定しよう

公式ページ(外部):ベクトレ:ヘッダーロゴとキーカラーの設定

Webサイトに必要なデザインであるヘッダーロゴとサイトアイコンを作って、設定していきましょう。

ヘッダーロゴ

トップページやヘッダーに表示されるデザイン

推奨サイズ 500×120ピクセル
長方形

サイトアイコン=ファビコン

Z

検索結果やブラウザのタブに表示されるデザイン

推奨サイズ 512×512ピクセル
正方形

サイトロゴ・サイトアイコンをつくろう

ヘッダーロゴとサイトアイコンはペイントツールなどで自作することもできますし、<PR>ココナラなどのサイトからイラストレータに依頼することもできます。

サイトロゴを自作したい
デザインACでブログアイコンを作ろう

関連記事 デザインACでブログのアイコンを作ろう

ココナラで依頼する

サイトロゴ・サイトアイコンが準備できたら
画像をメディアにアップロードしましょう

画像をメディアにアップロードする方法

画像をメディアにアップロードする方法は2種類あります。

①メディアライブラリから画像をアップロードする方法

WordPress管理画面>①メディア>②新しいメディアファイルを追加する>③ファイルを選択の順にクリックし、デバイス上の画像を選択。

画像がメディアに記録され、記事やサイトアイコンに使用することができるようになります。

②投稿・固定ページからアップロードする方法

編集画面> >①画像>②アップロードの順にクリックし、デバイス上の画像をアップロードします。挿入箇所で画像が表示されます。

メディアライブラリにもアップロードされているので、表示されている記事以外にも使いまわすことができます。

また、コピー&ペーストした画像も自動的にメディアに保存されます。(ただしファイル名の指定などができないので、注意してください。)

*おすすめはメディアライブラリから保存する方法です。

作ったデザインを設定しよう

ヘッダーロゴを設定しよう

WordPress管理画面外観カスタマイズLightningデザイン設定ヘッダーロゴ画像を順にクリックし画像を設定します。

  • 先に画像をアップロード済み
    画像を選択をクリック
  • まだ画像をアップロードしていない
    画像をアップロードから画像をアップロードします。

サイトアイコンを設定しよう

WordPress管理画面外観カスタマイズサイト基本情報サイトアイコンの項目の順にクリックします。

  • 先に画像をアップロード済み
    画像を選択からサイトアイコンにしたい画像を設定します。
  • まだ画像をアップロードしていない
    画像をアップロードから画像をアップロードしサイトアイコンを設定します。

デフォルトサムネイルを設定しよう

WordPress管理画面>ExUnit >デフォルトサムネイル画像からデフォルトサムネイルを設定することができます。アイキャッチがない記事のサムネイルに表示される画像です。個別に用意してもいいですし、ヘッダーロゴなどを指定することもできます。

日目 サイトのイメージカラーを決めよう

公式ページ(外部):ベクトレ:基本設定解説 キーカラー・カスタムカラー設定

WordPress管理画面>外観>カスタマイズ>色から

サイトの

  • 背景色
  • キーカラー
  • カスタムカラー 5色

を選択することができます。

キーカラー

ボタンのデフォルトの色やヘッダー部分のタブの色になります。

背景色

すべてのページの背景に単色カラーを設定することができます。

背景画像も設定できる

単色ではなく模様を設定したい場合は、

WordPress管理画面>外観>カスタマイズ>背景画像

から背景画像を設定することができます。

カスタムカラー5色

カラーパレットに追加されます。よく使う色を設定しておくと便利です。

検索エンジンで『カラーパレット 5色』と検索すると統一感のある色の組み合わせがでてきます。自分のサイトのイメージにあわせてカスタムカラーを設定してみてください。

日目 サイト設計をしよう

サイト設計とは?

個人ブログと企業ホームページ。どちらも同じ『Webサイト』ですが別物に感じますよね。デザインであったり、構造であったり、それぞれのWebサイトの目的にあわせて設計されているためです。7日目は、自分のWebサイトの目的にあわせてサイト設計をしてみましょう。

全体図を考える

当サイトの場合は、トップページから各カテゴリーの紹介ページにリンクさせています。トップページを起点にどのようにリンクさせるのか等ノートに書き出しておくと必要なページが一目でわかって作業しやすくなります。

*2週目からはこの全体図を基に必要なページを作っていきます。

最低限必要なページ

  • トップページ
  • 問い合わせ先
  • 管理者情報
  • プライバシーポリシー

各ページのデザインと配置を考える

1カラム
2カラム

当サイトの紹介ページは前半におすすめな理由を説明して、後半に時系列の記事一覧を配置しています。

  • どんなパーツを使うのか
  • どのように配置するのか
  • どのように構成するのか
  • レイアウトは1カラムにするのか。2カラムにするのか。

などを書き出しておくと、ページを作るときに効率的に作ることができます。好きなサイトの構成やデザインを参考するのもおすすめです。

ページのデザインや配置は細かくメモしておいてもいいですし、ざっくり考える程度でも大丈夫です。

Lightningの場合はVK Block Patternsというプラグインのおかげで、様々な雛型を使うことができるので、ざっくり考えておくだけでも十分デザイン性のよいページを作ることができます。

ベクトレ:基本設定解説 おすすめ

まとめ

第1週はWebサイトの基礎を作りました。基本的な設定からデザインの初期設定を行いました。いかがだったでしょうか。次回は固定ページと投稿ページの作り方、カテゴリーの設定方法、メニューの作り方などを解説していく予定です。ぜひご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA