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

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

投稿者 Zio ジオ 

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

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

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

Menu

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

Lightning -week1
常時ssl化を完了させようimg

WorddPressで使うインターネット通信をSSL化=暗号化通信に設定します。ネットの安全性を保つために常時SSL化に設定していきます。

常時SSL化の手順は2ステップ

①サーバー側の設定を完了させる

②WordPress側の設定を完了させる

です。

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

まずはサーバー側のSSL化を行います。「(レンタルサーバー名)+SSL化」で検索して契約しているレンタルサーバーのSSL設定マニュアルを探してみましょう。

当サイトでおすすめしているレンタルサーバー5社のマニュアルも用意しました。

②WordPress側の設定を完了させ

つぎに、WordPress側の設定を完了させます。

手順

  1. WordPressにログインする
  2. WordPressダッシュボード>設定>一般をクリックし
  • WordPressアドレス
  • サイトアドレス

の項目をhttp:// から https://書き換える

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

SSLの設定完了

確認しよう

SSL化されているかを確認しよう

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

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

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

画面上部 URL窓

https://から始まるURLが表示された
常時SSL設定が完了しました

http://から始まるURLが表示された
常時SSL化マニュアルを確認してやり直し

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

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

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

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

2日目は

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

WordPressにログイン!

WordPressにログインして管理画面を見てみましょう。

青色エリア
  • Zio-Start.com
    自分のサイトへのリンク
  • ExUnit
    プラグインのショートカット
  • 新規+
    各種コンテンツの新規作成ができるショートカット
黄色エリア

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

  • ダッシュボード
    メイン画面に戻ってきます。
  • 投稿
    時系列に整理されたページを作成するときに使います(日記、新着情報など)
  • 固定ページ
    サイト内の軸になるページを作成するときに使います(トップページなど)
  • 外観
    サイトのデザインを決めるときに使います。(カスタマイズ・ウィジット・追加CSSなど)
  • 設定
赤色エリア
  • 表示オプション
    表示形式を選べます。
  • ヘルプ
    サポートフォーラムにアクセスできます。

基本の機能とよく使うものを紹介しました。プラグインが増えるとメニューも増えていきますので覚えておいてください。

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

*パーマリンクとは、URLとほぼ同義です。Parmanent Link(恒久的なリンク)の略称

パーマリンクを『任意の投稿名』にセットします。パーマリンクを変更できるようにするための設定です。

デフォルトでパーマリンクは「投稿名」にセットされています。このままだとタイトル=パーマリンクになり、検索窓に表示されたときに文字化けてしまいます。(タイトルが日本語の場合)文字化けてしまうとなにかと不都合が多いので任意の投稿名に変更できるようにします。

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

任意の投稿名を意味する[%postname%]をセットします。

手順

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

3日目 Lightning を準備しよう

3日目は

無料のWordPressテーマLightningをインストールしていきます。

まずはインストール

Lightning インストール方法

手順.

1.WordPress管理画面>外観>テーマを順にクリックする

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

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

4.検索結果画面に表示されたLightning(黄色枠)をクリックします

5.詳細を確認後、画面左上『インストール』をクリックして『Lightning』をダウンロードします

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

Lightningの世代を変更しよう

次に、Lightningの世代を変更します。

ダウンロードされたLightnig には2種類の世代が梱包されています。Webサイト作成前にLightning Generation3(=Lightning G3)が設定されているか確認しておきましょう。

手順

1.WordPress管理画面>外観>カスタマイズ>Lightning機能設定を順番にクリック

2.世代設定の項目が『Generation3』になっているか確認

*すでにLigjtning Generation2でWebサイトを作っている場合は、先にサイトのバックアップを保存してから世代の変更を行ってください。

詳しくは↓↓

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

G2とG3の違い

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

テーマを更新しよう

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

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

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

自動更新を設定する

手順

1.WordPress管理画面>外観>テーマ>Lightning の順にクリックし

2.画像黄色枠中の『自動更新を有効化』をクリックします。配信元Vektor.incから届く更新情報を自動で更新してくれます

手動で更新する場合

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

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

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

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

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

プラグインには

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

①自動インストール

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

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

標準プラグイン

VK All In One Expansion Unit
ExUnit

VK Blocks

VK Block Patterns

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


②手動インストール

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

ヘッダーロゴ

Zio-start.com ロゴ header/footer

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

推奨サイズ 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サイトの基礎を作りました。基本的な設定からデザインの初期設定を行いました。いかがだったでしょうか。次回は固定ページと投稿ページの作り方、カテゴリーの設定方法、メニューの作り方などを解説します。ぜひご覧ください。

Lightning でブログを作ろう第2週目「コンテンツをつくろう!」

\Lightning配信元 Vektor/

コメントを残す

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

CAPTCHA