Lightningでブログを作ろう｜第2週 コンテンツを作成しよう｜WordPress
zio
みなさん、こんにちは！管理人のジオです。
今回は
WordPressテーマ Lightning でブログを作ろう！第２週目をお届けします。
全3週でお届けする内容の内、今回は第2回目『コンテンツを作成しよう』です。
固定ページ・投稿ページ・カテゴリー・メニューを作成していきます。ページ例・図解も沢山用意していますので、ぜひ挑戦してみてください。
1日の作業目安30分程度
この記事は
レンタルサーバーの契約と独自ドメインの設定が完了し、WordPressにはじめてログインしたところから解説します。レンタルサーバーの契約・独自ドメインの設定が終わっていない方は、こちらを参考に作業してみてください。
長くなるので、ブックマークも忘れずにお願いします。
広告｜AdSense
目次
２週間目
コンテンツを作成しよう
Menu
７日目
１日目 固定ページを作ろう
1日目は、トップページやお問合せページなどに使われる型…固定ページの作成方法を解説します。ちなみにWordPressではいくつかのタイプの記事を作ることができます。
WordPressで作れるページの種類
３種類のWebページ
- 固定ページ：頻繁に情報を更新しないページ １日目・２日目・3日目・４日目 解説
トップページ・問い合わせページ・プライバシーポリシーなど - 投稿ページ：時間系列にまとめたページ ５日目解説
日記・入荷情報など - カスタム投稿ページ：記事を構成する要素を自分で選択するWebページ 第３週
施工事例・スペック比較・ブランドページ
⇩
それでは
固定ページの作り方を見てみましょう！
【基礎】固定ページの作り方
固定ページは情報の更新が少ないページが使われます。例えば
固定ページで作るコンテンツ例
- トップページ
- プライバシーポリシー
- お問合せ
- 会社情報・営業時間・アクセス情報など
など、不変的な情報に適した記事スタイルです。
✔ 重要なページに
固定ページが使われることが多い
手順
新しい固定ページを追加する
WordPress管理画面→[固定ページ]→[新規追加]の順にクリックします。
すると、新しい固定ページの編集画面が表示されます。
固定ページを編集する
1．新しい固定ページには、あらかじめタイトルと段落が挿入されています。まずはこの２つを埋めてみましょう。
例）タイトル ⇒ プロフィール
段落 ⇒ Zio ジオ（ニックネーム）
３．各ブロックの上で改行 [Enter] すると新しい段落ブロックが下方向に追加されます。
４．画面中黄色枠で囲った ＋ボタン をクリックすると、ブロック挿入ツールが展開されます。使いたいアイテムをクリックすして編集画面に挿入しましょう。
５．書けたら、編集画面の右上に表示されている下書き保存をクリックすると下書き保存ができます。
ブロックを使う
ここではプロフィールページ を例にブロックの使い方を見ていきます。
⇩青文字はブロックの種類を説明しています。下の例を参考に、プロフィールページを作ってみましょう
プロフィール
見出しH１＝記事タイトル
プロフィール
見出しH２
＜VK レスポンシブスペーサー L ＞
名前 よみかた
見出しH３
段落 ＜自己紹介例＞関東在住の４０代主婦です。WordPressでブログを運営しています。使用しているWordPressテーマはLightning です。よろしくおねがいします。
＜VK レスポンシブスペーサー L ＞
好きな物
見出しH４
段落 ＜内容例＞各地のお土産探しが大好きで よく調べています。そうそう、お土産と言えば…銘菓 博多通りもん…これまで北九州地域の各駅で買えていましたが、生産数の維持ができず小倉駅を含む北九州地域の販売が一時休止になってしまいました。オンライン販売は８個入りのみ数量限定で再開しているようです。通りもん好きに方は在庫があるうちにどうぞお早めに！（2024/1/18）
カラム ２列
＋
＋
段落リンク付き オンライン販売URL
ボタン
バナー
カスタムHTML
よく使うブロックの説明
よく使うブロックアイテムの説明をします。
黄色枠中の各ブロックの機能について説明します。↓の【設定】タブと【スタイル】タブで各ブロッグの微調整ができます。できることを書きだしたので確認してみてください。
【設定】
【スタイル】
見出しブロック（H1～H６）
見出し
見出しにはH1＝タイトルタグとH2～H6までの小見出しがあります。
数字が小さいものほど重要度が高いと検索エンジンに認識されます。
【設定】
- 高度な設定からブロック名とHTMLアンカーを設定することができます。
- 追加CSSも加えることができます。
【スタイル】
- スタイルで見出しのデザインを変更することができます
- 色の項目でテキストと背景色を変えることができます
- タイポグラフィで外観・行の高さ・文字間隔・テキスト装飾・大文字小文字・ドロップキャップ（先頭文字を拡大）を設定することができます。
- サイズで パディングとマージンを変えることができます。
【ドキュメント外観】
見出しのアウトラインを確認してみてください。見出しの階層が崩れていると記事の評価が下がります。
段落ブロック
段落
記事内の本文を作成する時に使います。
【設定】
- 高度な設定からブロック名とHTMLアンカーを設定することができます。追加CSSも加えることができます。
【スタイル】
- 色の項目でテキストと背景変えることができます
- タイポグラフィで外観・行の高さ・文字間隔・テキスト装飾・大文字小文字・ドロップキャップ（先頭文字を拡大）を設定することができます。
- サイズで パディングとマージンを変えることができます。
画像ブロック
画像
写真やイラストを挿入するときに使います。
【設定】
- 代替テキストを挿入することができます
- アスペクト比を変更することができます
- 幅と高さを指定することができます
- 解像度を選ぶことができます。
- 高度な設定からブロック名とHTMLアンカーを設定することができます。追加CSSも加えることができます。
【スタイル】
- スタイルで画像の外枠のデザインを変更することができます
- フィルターの項目でデュオトーンに変更することができます
- 枠線と角丸の設定を変更することができます
カラム
カラム
Webページのレイアウトを決めるブロックで、横方向に分割する時に使います
【設定】
- 親カラム選択時
- カラムの個数を指定できます
- モバイルの時に縦に並べるかを選べます
- 子カラム選択時
- カラム幅を指定することができます
- 高度な設定からブロック名とHTMLアンカーを設定することができます。追加CSSも加えることができます。
【スタイル】
- 色の項目でテキストと背景変えることができます
- タイポグラフィで外観・行の高さ・文字間隔・テキスト装飾・大文字小文字・ドロップキャップ（先頭文字を拡大）を設定することができます。
- サイズで パディングとマージンを変えることができます。
- 枠線の太さを指定することができます。
ボタン
ボタン
ボタンを配置します
【設定】
- ボタンの幅を設定することができます
- 高度な設定からブロック名とHTMLアンカーを設定することができます。追加CSSも加えることができます
【スタイル】
- スタイルから塗りつぶしか輪郭のデザインを選ぶことができます。
- 色の項目でテキストと背景変えることができます
- タイポグラフィで外観・行の高さ・文字間隔・テキスト装飾・大文字小文字・ドロップキャップ（先頭文字を拡大）を設定することができます。
- サイズで パディングとマージンを変えることができます。
- 枠線の太さと角丸を指定することができます。
カスタムHTML
HTML
カスタムHTML
アフェリエイト広告等のバ ナーなどで用いられるHTMLを挿入できます。
【設定】
ブロック名を指定することができます。
VK レスポンシブスペーサー
レスポンシブスペーサー
行間を追加できます。
行間のサイズは
上XL 上L 上M 上S 上XS 上０ 下０ 下XS 下S 下M 下L 下XL
から選べます。均一なスペースを挿入したい場合に便利です。
最後に忘れずに下書き保存をしてください
広告｜AdSense
２日目 固定ページを公開しよう
2日目は、1日目に作成した固定ページを公開する方法を解説します。
もう一度黄色枠部分を見てみましょう。[ブロック]タブの隣の[固定ページ]
パーマリンクを変更しよう
まずはパーマリンク（＝URL）の設定をおこないます。
１．黄色枠中の [固定ページ] タブをクリックし、[URL] 横の青文字になっている部分をクリックします。
２．パーマリンクと書かれた枠中を変更します。
デフォルトではタイトルと同じように日本語でプロフィールと書かれてあります。このまま日本語のURLにすることもできますが文字化けて今後の作業が大変になるので、意味の分かる半角英数字で公開前に書き換えます。
今回は profile に書き換えました。
Excerptを展開する
１．次に [固定ページ] タブの閉じている項目[Excerpt]を展開します。
２．Excerpt中の抜粋を書いていきましょう。
抜粋は、メタディスクリプションと言って検索結果の下に表示される記事の説明文になります。
書いておくことでSEO対策にもなり選ばれやすくなります。また音声検索の補助にもなる機能なので記入しておくと親切です。投稿ページでも同じようなExcerptから抜粋に記入できます。
- 検索結果に表示させたくない記事の場合は記入する必要はありません。
その代わりに、記事編集画面最下部にある[VK All in One Expansion Unit ]を展開し、[noindex設定]検索結果に表示されないようにnoindexタグを出力するの項目にチェックを入れておきましょう。
アイキャッチ画像
記事一覧などに、サムネイルとして表示される画像をアイキャッチといいます。
このアイキャッチ画像を設定していきましょう。
１．[固定ページ]タブ中の[アイキャッチ画像]の項目を展開して
アイキャッチ画像を設定 をクリックします。
２．
- メディアライブラリ
- Googleフォト
- Pexelsの無料の写真
- Openverse
から画像を選択します。記事中に挿入した画像から選択すると関連性があるので見つけやすいです。
＊アイキャッチが必要ない場合は、無理に設定する必要はありません。
ディスカッション
コメント欄を表示させるかどうかを設定する項目です。
コメント欄を表示する場合は
- コメントを許可
にチェックを入れてください。
ページ属性
固定ページと固定ページの関係を設定する機能です。設定できる項目は
- 親
- 順序
があります。
親と子
例えば…
当社について というページがあるとします。
そのページ中に
- 営業時間
- アクセス
- 会社概要
- 求人情報
という項目を作り、それぞれに対応した固定ページを作ったとします。この時「当社について」のページが親ページになり、他のページが子ページになります。
親の機能は、子ページから親ページを設定する機能です。
順序とは
投稿ページは時間軸で整理されるますが、固定ページには投稿ページの時間のような整理するための軸がありません。そのため、サイトマップのような一覧で表示される時は50音順に表示されます。（図 親・順序つけ前 参照）しかし、50音順だと前後に関係のないページが表示されてしまうので、非常に煩雑な印象になります。
そこで、この並びを任意の並び方に変えるためにに使う機能が順序の項目です。（図 親・順序つけ後 参照）
例えば、
親の説明に出てきた4つの子ページを50音順に並べると
- アクセス
- 営業時間
- 会社概要
- 求人情報
のような順番になります。これを任意の並びに変えていきます。
固定ページのデフォルト順序は０が入っているので、次のように順序を設定します。
- アクセス →１
- 営業時間 →２
- 会社概要 →０（そのまま）
- 求人情報 →３
すると、以下のように任意の順で表示できました。小さい数字から大きい数字に並んでいます。
- 会社概要
- アクセス
- 営業時間
- 求人情報
＊ある程度、固定ページが増えてきたら試してみてください。
公開
公開日時を選ぼう
[固定ページ]タブの[公開]横にある青文字をクリックすると
- 現在
- 時間 日付 （予約公開・指定日公開）
から、公開する日時を選べます。
表示状態
次に表示状態を設定します。
表示状態は
- 公開
全ての人に公開 - 非表示
管理人と編集者のみ閲覧可能 - パスワード
パスワードを知っている人だけに表示
から選択しましょう。
公開ボタンを押す
最後に[公開]を押して固定ページを公開します。
書き間違えた場合は[更新]ボタンで更新してください。この際も日時指定することができます。
これで固定ページが公開できました
おめでとうごさいます🎉
広告｜AdSense
３日目 固定ページを増やそう
1日目・2日目を参考に、その他の固定ページを作っていきましょう。
固定ページ メニュー
- プライバシーポリシー
- お問合せページ
プライバシーポリシー ：１０分
個人情報の取扱い方針のことをプライバシーポリシーといいます。このプライバシーポリシーのページはLightning のVK Block Patternを使って作っていきましょう。
手順
１．新規の固定ページを開きます。
２．次に画面左上のブロック挿入ボタン[ + }を押します。
３．ブロック パターン メディア と並んでいるタブの内、[パターン]をクリックします。
４．パターンタブの検索窓に「プライバシーポリシー」と入力すると、候補のパターンがでてきます。この候補をクリック。
５．固定ページにパターンが貼り付けられます。次にブラウザの検索機能を開きます。（または Ctrl＋F ）
６．検索窓で『株式会社サンプル』を検索し、該当箇所に、適当な名前（サイト名や会社名・ブランド名など）を書き入れます。
最後に代表者の名前・またはハンドルネームを書き換えたらタイトルを入力し、保存して完成です。
お問合せページ ：２０分
Lightningでブログを作ろう第1週 4日目プラグインを設定しようでおすすめしているContact Form ７をつかって、お問合せフォームを作りましょう。インストールしていいない方は先にプラグインContact Form ７をインストールしてください。
お問合せフォームの項目
- 氏名（ニックネーム）
- メールアドレス
- 題名
- 本文
手順.
１．WordPress管理画面からお問合せをクリックします。
２．次に表示されたコンタクトフォームの画面上部[新規作成]をクリックします。以下のようなコンタクトフォームの設定画面が表示されます。
３．まずは、「ここにタイトルを入力」の枠に「お問合せフォーム」と入力します
４．氏名の横に（ニックネーム）を追加して入力します
５．保存をクリックして、お問合せフォームが完成しました。
６．次に「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください」に掲載されているショートコードをコピーします。
７．WordPress管理画面＞固定ページ＞新規作成＞から新しい固定ページを作ります。
８．段落に、６でコピーしたショートコードを①そのまま貼り付けるか②ブロッグのショートコード[/]を使って、お問合せフォームのショートコードを貼り付けます。
９．タイトルをお問合せに設定し、お問合せページ必要なコメントを入力します。
お問合せページ例：
お問合せ
見出し２
段落 当サイトへのご質問・お問合せは、
下記、お問合せフォームより承ります。
ショートコード
段落 お預かりした個人情報はお問合せ および 関連する業務にのみ利用します。詳しくは当サイトプライバシーポリシーをご確認ください。
なお、ご質問内容にかかわらず、返信までにはお時間を頂戴しております。あらかじめご了承ください。
広告｜AdSense
４日目 トップページを作ろう（固定）
ブログやサイトの顔になるトップページを作っていきます。以下は例です。
トップページ
見出し１
カバー
画像↓PNG
スペーサー↨
ぜったい 今より おもしろく
段落
スペーサー↨
ブログLab
見出し２
最新の投稿（×ブログLab）
タイトル
タイトルはトップページと入力します。あとで、タイトルは非表示に設定するので、トップページであることがわかる名前に設定してください。
カバー
カバー画像
カバー画像は、その上にブロックをオーバーレイできる画像です。Lightning G3から全幅設定が簡単にできるようになったので、ぜひ設定してみてください。
【設定】
- 固定背景のON/OFFを設定できます。例では固定ページをON
- 繰り返し背景のON/OFFを設定できます。
- 高度な設定からブロック名とHTMLアンカーを設定することができます。追加CSSも加えることができます。
【スタイル】
- 色ではテキスト、背景、オーバーレイの色を設定できます。
- フィルターではデュオトーンフィルターを設定できます。
- タイポグラフィ
- サイズではパディング、マージン、ブロッグの間隔、枠線の色と太さ、角丸を設定できます。
画像 PNG（サイトロゴ）
カバーには画像も重ねることができます。サイトアイコンやロゴをPNGの背景透過で作成しておくと例のように背景を透過させることができます。
PNGの背景透過画像は、【デザインAC】で無料で作ることができます。
詳しくは関連記事↓
【徹底調査】デザインACどんなツール？どんな機能？登録方法から使い方まで
無料デザインツールのデザインACでできることや、実際につかってみた感想を中心に書きました。使ってみたいけど…その前に、実際に使ている人の感想が聞きたい方におすすめ…
Zio-Start.com 
最新の投稿
最新の投稿
最新の投稿は、作成した投稿ページの一覧を表示させるブロッグです。作成した投稿ページにカテゴリーを設定しておくと、指定したカテゴリーの一覧を表示することができます。
【設定】
- 投稿コンテンツ 記事本文を表示します。
- 投稿者名 記事を作成した人の名前を表示します。
- 投稿日 投稿した日付を表示します。
- アイキャッチ画像 記事タイトルを合わせてサムネイルを設定します。
- 並び順 最新順・古い順・降順・昇順を選択します。
- カテゴリー 表示するカテゴリーを設定します
- 項目数 表示する項目数を設定します
- 高度な設定からブロック名とHTMLアンカーを設定することができます。追加CSSも加えることができます。
【スタイル】
- 色 テキスト、背景、リンクの色を指定することができます。
- タイポグラフィ
- サイズ マージンとパディングを設定できます。
All in One Expansion Unit＞カスタムCSSから表示設定をする
固定ページをデフォルト設定のまま公開すると上記のように表示されます。
今回作るトップページでは、All in One Expansion Unitのの追加CSS機能を使って
- site-header サイト名
- page-header ページタイトル
- breadcrumb パンくずリスト
の３項目を非表示にします。
.site-header
{
display:none;
}
.page-header
{
display:none;
}
.breadcrumb
{
display:none;
}
上記のコードを
[固定]タブ中のAll in One Expansion Unit＞カスタムCSSの枠内に書き込みます。無駄なスペースや改行があると正しく表示されないので、注意深く書き写してみてください。
正しく入力されると
- site-header サイト名
- page-header ページタイトル
- breadcrumb パンくずリスト
が非表示になります。非表示にできたら公開してください。
＊他の固定ページでも非表示にしたい場合は設定してみてください。
フロントページに設定する
トップページを作っただけでは、サイトのトップに表示されません。作ったトップページをサイトのフロントページに設定してみましょう。
手順.
1.WordPress管理画面＞外観＞カスタマイズの順にクリックし
2.ホームページ設定をクリックします。
3.ホームページ枠に、先ほど公開した「トップページ」を選択します。
4.最後に公開をクリックして完成です。
これでトップページを設定することができました。
広告｜AdSense
５日目 投稿ページを作ろう
４日までの内容で主要な固定ページが完成しました。次は投稿ページを作ってみましょう。
投稿ページで作る例
投稿ページは時間軸で整理されるページです。
- 日記
- 入荷情報
- お知らせ
- 役員動静
- コレクション
などに適した記事スタイルです。
特徴
✔ 次々に更新される情報を書いておくのに便利なスタイルです。
今回は日記を例にして練習してみましょう。
【基礎】投稿ページの作り方
新しい投稿ページを追加する
手順.
WordPress管理画面＞投稿＞新規投稿を追加 の順にクリックします。
投稿ページを編集する
手順.
1.編集方法は「１日目 固定ページを編集する」と同じように編集できます。
固定ページとの違い
固定ページと投稿ページの違いはほとんどありませんが、画面の黄色枠部分の[投稿]タブが[固定]タブと違います。
投稿タブ
[投稿]タブでは、概要のパートで 「ブログのトップに固定」を選択することができます。また、カテゴリーとタグを選択することができるので、時間軸だけでなくカテゴリーとタグで分類することができます。
投稿ページを公開しよう
投稿ページの公開方法も、基本的には２日目の「固定ページを公開しよう」と同じです。
- パーマリンクを設定
- 抜粋を入力
- アイキャッチ画像の設定
- コメントの設定
を行います。
次に固定ページで設定した「親」「順序」の代わりに「カテゴリー」と「タグ」を設定します。
広告｜AdSense
６日目 カテゴリーを作ろう
６日目は、投稿ページを分類するためのカテゴリーを作っていきましょう。
カテゴリーを作ろう
手順.
WordPreee管理画面＞投稿＞カテゴリー を順にクリックします。
2.次にカテゴリーを追加していきます
- 名前 ：カテゴリーの表示名になります
- スラッグ ：カテゴリーのURLになります
- 親カテゴリー ：追加するカテゴリーが子カテゴリーの時に、親カテゴリーを設定することができます
- 説明 ：表示名の前後に説明文として表示されることがあります
- 色 ：カテゴリーラベルの色になります
に入力していきます。
3.最後に新規カテゴリーを追加をクリックすればカテゴリーが作成されます。
投稿ページにカテゴリーを設定しよう
投稿タブからカテゴリーを設定する方法
投稿ページの編集画面黄色枠部分の投稿タブ中カテゴリーの項目からカテゴリーを設定します。
指定したいカテゴリーのチェックボックスにチェックを入れて、「下書き保存」もしくは「公開」「更新」を押してください。カテゴリーが設定されました。
クイック編集からカテゴリーを設定する方法
WordPress管理画面＞投稿の順にクリックします。投稿一覧を確認してください。
- 一覧中のクイック編集をクリックして
2.カテゴリーを指定します。黄色枠部分のチェックボックスにチェックを入れて左下の 更新 ボタンをクリックするとカテゴリーが設定されます。
広告｜AdSense
７日目 メニューをつくろう
グローバルナビゲーションやモバイルナビゲーションで使うメニューを作っていきます。
ヘッダーメニューを作ろう
1.WordPress管理画面＞外観＞メニューの順にクリックします。
2.編集するメニューを選択の項目で「ヘッドラインメニュー」を選択します。選択肢が表示されない場合は、そのまま３にすすみます。
3.続けて「メニュー名」に任意の名前を入力し、メニュー設定で「Header Navigation」を選択します。（フッターメニューを作成する場合は、「Footer Navigation」を選択してください。）
4. メニューを作成 をクリックします。
5.次にメニュー項目の追加を行います。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
からメニューに追加したい記事のチェックボックスにチェックをいれてメニューに追加をクリックします。
6.追加されたメニューは順不同になっています。なので並び替えます。
＜移動方法＞
- 長押しクリックをしながらアイテムをつかみます
- クリックを離すとはなした位置にアイテムが移動します。
すべて同列に表示することもできますが、少し右側に配置すると副題として表示することができます。副題に指定された項目は主題で表示されたメニューのぶら下がりメニューになります。
7.最後にメニューを保存をクリックして、メニューが完成です。
ヘッダーメニューを配置しよう
固定ページ「トップページ」を開きます。＋ボタンからナビゲーションを挿入します。
ナビゲーション
1.メニュー横の ⁝ をクリックします。
2.プルダウンメニューから、作成したメニューを選択し、「下書き保存」「公開」「更新」すると任意の位置に先ほど作成したメニューを追加することができます。
＊４日目 トップページを作ろうの項目で .site-headerを表示する場合は、ヘッダーメニューに作成したメニューが表示されます。
これでメニューをヘッダーメニューを設定することができました。
おめでとうございます🎉
同じようにフッターメニューとモバイルナビゲーションを作成することができます。
広告｜AdSense
まとめ
いかがだったでしょうか。Lightning でブログを作ろう！第２週では、ブログの主要な部分を作成しました。わかりにくい部分などありましたら、お問合せまたはコメント欄からお知らせください。
みなさんのブログ作りのお役にたてれば幸いです！次回 「 Lightning でブログを作ろう！第３週 」で、またお会いしましょう！
