軽量で簡単なWordPressテーマ「ライトワード」

固定ページ制作 基本操作

WordPress を使って魅力的なウェブサイトを構築する上で、「固定ページ」の作成は欠かせない基本スキルの一つです。会社概要やお問い合わせ、サービス紹介といった重要な情報を、訪問者に分かりやすく提供するために固定ページは活用されます。

このマニュアルでは、特に多機能で人気のWordPressテーマ「LiteWord」をお使いの皆様を対象に、全く白紙の状態から新しい固定ページを作成し、基本的なコンテンツ（テキスト、見出し、画像など）を追加していくまでの一連の操作方法を、ステップごとに丁寧に解説いたします。

WordPressでのページ作成が初めての方や、LiteWordテーマの機能をより深く理解したい方にとって、このマニュアルが固定ページ作成の確かな一歩となり、将来的にはテンプレートのカスタマイズや、ご自身のアイデアを活かしたオリジナルのページデザイン制作へと繋がることを目指しています。

基本的な操作方法を一つずつ確認しながら、実際に手を動かしていただくことで、より実践的なスキルが身につくはずです。それでは、さっそく固定ページの作成を始めていきましょう。

1. 固定ページの新規追加

まずは、新しい固定ページを作成する基本的な手順です。

1.1. WordPressダッシュボードへのログイン

WordPressの管理画面にログインします。

1.2. 新規追加画面へのアクセス

以下のいずれかの方法で、固定ページの新規追加画面を開きます。

  • ダッシュボード左側のメニューから「固定ページ」にマウスを合わせ、表示される「新規追加」をクリックします。
  • 画面上部にあるメニューバーの「新規」にマウスを合わせ、「固定ページ」をクリックします。

1.3. 作成方法の選択

新規追加画面が開いたら、中央に表示される「白紙」をクリックして、ページ作成を開始します。

1.4. ページタイトルの入力

ページ編集画面の一番上（通常は「タイトルを追加」と表示されている箇所）に、作成するページのタイトルを入力します。（例: テストページ、会社概要など） このタイトルは、後述するURL（スラッグ）の初期値としても使用されます。

2. ページのURL（スラッグ）設定

固定ページのURL、特にその一部である「スラッグ」を適切に設定することは、SEO（検索エンジン最適化）やユーザーの利便性にとって重要です。

パーマリンクとスラッグについて:

  • パーマリンク: ウェブサイト上の各ページに恒久的に割り当てられるURL全体を指します。（例: https://example.com/sample-page）
  • スラッグ: 上記パーマリンクの中で、ページ固有の文字列部分（例: sample-page）を指します。WordPressの編集画面では、この部分を直接編集できます。最近のWordPressではこの部分を指して「スラッグ」という表記が使われています。

ここでは、主に英数字で分かりやすいスラッグに設定することをおすすめします。

2.1. 下書き保存とスラッグの自動生成

ページタイトルを入力したら、まず画面右上または右サイドバーにある「下書き保存」をクリックします。 この操作により、入力したページタイトルに基づいてスラッグの初期値が自動的に設定されます。 例えば、日本語でタイトルを入力した場合、その日本語がそのまま、またはローマ字に変換された形でスラッグの候補として表示されることがあります。

2.2. スラッグの確認と変更

下書き保存後、画面右側のサイドバー（設定パネル）の「要約」セクション（または「ページ」タブ）を開きます。 そこに「URL」または「スラッグ」という項目があり、現在設定されているスラッグ（URLの末尾部分）が表示されています。 初期設定されたスラッグが日本語のままであったり、長すぎる場合は、この「URL」または「スラッグ」と表示されている部分（多くの場合、現在のスラッグ文字列そのもの）をクリックして編集モードにし、任意の英数字（およびハイフン）で構成される分かりやすい文字列に変更します。（例: company-profile, service-listなど）

2.3. 変更の保存

スラッグを変更したら、再度「下書き保存」または「更新」をクリックします。これで、ページのURL（スラッグ部分）が設定されます。

2.3.1. 【注意点】WordPress全体のパーマリンク設定

このスラッグ設定がウェブサイトのURLに正しく反映されるためには、WordPress全体のパーマリンク設定が「基本」（例: ?p=123のような形式）以外になっている必要があります。通常は「設定」>「パーマリンク設定」で「投稿名」などの分かりやすい形式に設定します。 LiteWordテーマを使用している場合、WordPressのパーマリンク設定が「基本」のままだと、テーマの一部の機能が正常に動作しないことがありますので、事前に確認・設定しておくことを強く推奨します。

3. 保存と公開ステータスの管理

作成中のページは、いつでも保存状態や公開ステータスを変更できます。

3.1. 下書き保存

ページをまだ一般公開したくない場合や、作業途中で保存したい場合は、画面右上の「下書き保存」をクリックします。この状態では、ログインしている管理者や編集者のみが内容を確認できます。

3.2. 公開

ページの内容が完成し、一般に公開したい場合は、画面右上の「公開」をクリックします。確認のメッセージが表示されたら、再度「公開」をクリックすると、ページがウェブサイト上に公開されます。

3.3. 公開済みのページを下書きに戻す

一度公開したページを非公開（下書き状態）に戻したい場合は、編集画面右側のサイドバー（設定パネル）の「要約」セクション（または「ページ」タブ）にある「公開状態」（または「ステータスと公開状態」）の項目で、現在の「公開」となっている部分をクリックします。表示されるオプションから「下書きに戻す」や「下書き」を選択し、「更新」をクリックします。

4. 基本的なコンテンツの追加

固定ページにテキストや画像などのコンテンツを追加していきます。WordPressのブロックエディタでは、これらのコンテンツを「ブロック」という単位で追加・編集します。

4.1. テキスト（段落ブロック）の入力

ページ内のコンテンツ入力エリア（「文章を入力、または / でブロックを選択」と表示されている部分など）をクリックし、直接テキストを入力します。これが「段落ブロック」となります。

4.1.1. 改行の種類

  • キーボードの Enter キーを押すと、新しい段落ブロックが作成され、行間が比較的広く開きます。
  • 行間を狭くしたい場合（段落内改行）、Shift キーを押しながら Enter キーを押します。

4.2. 文字装飾（フォント・文字色など）

テキストの一部分だけフォント（書体）や文字色などを変更できます。

  1. 変更したいテキスト部分をマウスでドラッグして範囲指定します。
  2. 範囲指定すると、その部分の上にツールバーが表示されます。
    • 太字: B アイコンをクリックすると太字になります。
    • リンク: 鎖のアイコンをクリックするとリンクを設定できます（詳細は後述）。
    • LiteWord専用機能: LiteWordテーマが有効な場合、ツールバーに専用のアイコン（例: 下線のついたA、点線四角のAなど）が表示されることがあります。これらをクリックすると、フォントの種類、文字サイズ、文字色、背景色（ハイライト）などを部分的に変更できるメニューが開きます。 注意点：LiteWord専用機能の互換性 LiteWord専用のフォント変更機能は、他のテーマに切り替えた場合には適用されない可能性があります。
    SEOにおける太字の活用 SEO対策として特定のキーワードを強調したい場合、ツールバーの B ボタン（太字）を使用するのが一般的で簡単です。

4.3. 見出しブロックの設定

見出しは、文章の構造を明確にし、読者が内容を理解しやすくするだけでなく、SEO対策においても非常に重要な要素です。

  1. 見出しにしたいテキストを入力します（または既存の段落ブロックを選択します）。
  2. そのブロックを選択した状態で、ツールバーの左側にあるブロックタイプアイコン（通常は段落アイコン）をクリックします。
  3. 表示されるメニューから「見出し」を選択します。
  4. 見出しブロックに変換されると、ツールバーで H2、H3、H4などの見出しレベルを選択できます。 H1タグの使用に関する重要な注意点 H1 タグは、ページのタイトルに自動的に使用されるため、本文中で見出しとして H1 を使用しないでください。SEOの観点から、本文中の見出しは H2 から始め、その下の階層として H3、H4 というように構造的に使用します。
  5. 見出しのデザイン設定 (LiteWord) 見出しのデザイン（例: 下線、アクセントカラーなど）は、LiteWordテーマの場合、WordPressのカスタマイズ画面でサイト全体またはページタイプごとに設定できます。
    1. ページのプレビュー画面上部（管理者バー）にある「カスタマイズ」をクリックします。
    2. カスタマイザーのメニューから「デザイン設定」>「固定ページ」（または「投稿ページ」など、設定したいページタイプ）を選択します。
    3. 「見出し設定」といった項目があれば、そこで H2 や H3 などのデザインを選択・調整します。
    4. 設定後、カスタマイザー上部の「公開」ボタンをクリックして変更を保存します。編集画面にはデザインが直接反映されない場合がありますが、実際の公開ページやプレビュー画面では適用されます。

4.4. リストブロック（箇条書き）の設定

項目を箇条書きで表示したい場合に使用します。

  1. リストにしたいテキストを入力します（各項目を改行で区切っておくとスムーズです）。
  2. そのブロック（または複数の段落ブロック）を選択し、ツールバーのリストアイコン（通常は点が3つ縦に並んだアイコンや、数字付きのリストアイコン）をクリックします。
  3. これでリストブロックに変換されます。Enter キーで改行すると、自動的に次のリスト項目が追加されます。
  4. プレビュー画面で表示を確認します。LiteWordテーマの場合、初期設定では四角い点などが表示されることがあります。

4.5. リンクの設定

テキストや画像に、他のページ（内部リンク）や外部サイトへのリンクを設定できます。

  1. リンクを設定したいテキスト部分をマウスでドラッグして範囲指定します。
  2. 表示されるツールバーのリンクアイコン（鎖のようなマーク）をクリックします。
  3. 入力欄が表示されるので、リンク先のURLを入力（またはペースト）します。サイト内の既存ページを検索して選択することも可能です。
  4. 入力欄の右側にある設定アイコン（歯車マークなど）をクリックすると、「新しいタブで開く」オプションなどを設定できます。外部サイトへのリンクの場合は、このオプションをオンにすることが一般的です。
  5. 設定後、適用ボタン（エンターキーまたは矢印アイコンなど）をクリックします。
  6. 「下書き保存」または「公開（更新）」して、実際のページでリンクが正しく機能するか確認します。

4.6. 画像ブロックの挿入

ページ内に画像を挿入する手順です。

  1. 画像を挿入したい位置で、新しいブロックを追加するためのプラスボタン（+）をクリックします。これは、既存のブロックの下や、ブロック間にマウスオーバーすると表示されます。
  2. 表示されるブロック検索窓に「画像」と入力するか、一覧から「画像」ブロックを選択します。
  3. 画像ブロックが挿入されると、画像のアップロード方法を選択するオプションが表示されます。
    • アップロード: お使いのパソコンに保存されている画像ファイルをWordPressにアップロードして使用します。
    • メディアライブラリー: すでにWordPressにアップロード済みの画像の中から選択します。ファイルをこの画面にドラッグ＆ドロップしてメディアライブラリーに追加することも可能です。
    • URLから挿入: インターネット上に公開されている画像のURLを指定して表示します。（著作権に注意してください）
  4. 画像を選択またはアップロードしたら、「選択」ボタン（または同様のボタン）をクリックします。
  5. 画像がページに挿入されると、その画像ブロックを選択した状態で、右側のサイドバー（設定パネル）の「ブロック」タブで詳細設定が可能です。 代替テキスト（altテキスト）の重要性と設定 代替テキストは、画像が表示されない場合に代わりに表示されるテキストです。SEOにとっても重要な要素なので、画像の内容を簡潔に説明するテキストを入力しましょう。 LiteWordテーマの画像設定機能について LiteWordテーマでは、画像の角を丸くする設定や、影をつけるといったデザイン調整がサイドバーや画像ブロックのツールバーから行える場合があります。また、画像ブロックのツールバーで、画像の配置（左寄せ、中央寄せ、右寄せ）なども設定できます。

5. LiteWord独自の機能・ブロックの利用

LiteWordテーマには、ページ制作を効率化し、デザイン性を高めるための独自のブロックや設定が用意されています。

5.1. メインビジュアル（ファーストビュー）の設定

ページの最上部に表示され、訪問者の第一印象を大きく左右する背景画像とキャッチコピーなどを含むセクションです。

  1. メインビジュアルを追加したい固定ページの編集画面を開きます。
  2. ページの一番上（または任意の場所）でプラスボタン（+ ブロックを追加）をクリックし、表示される検索窓の右側にある「すべて表示」をクリックしてブロックライブラリを開きます。
  3. ブロックライブラリの「パターン」タブや、LiteWordテーマ専用のセクション（もしあれば）の中から、「Fast View」（ファーストビュー）やそれに類する名称のブロックパターンを探し、目的のデザインを選択します。
    • 【H4 注意点】ブロックの挿入位置と移動: LiteWordの特定のブロック（特に複雑なレイアウトを持つもの）は、ページの一番下に挿入される場合があります。その場合は、挿入されたブロックを選択し、ツールバーに表示される上下の矢印ボタンを使って、ページの一番上など、目的の位置まで移動させる必要があります。
    • LiteWordテーマによっては、エディタ画面上部のプラスボタン横にLiteWord独自のブロック挿入アイコンが用意されている場合があります。こちらから選択すると、デザインのプレビューを見ながら追加できるため、分かりやすいことがあります。
  4. メインビジュアルには、「トップページ用」と「下層ページ用（トップページ以外の固定ページ用）」など、用途に合わせた複数のパターンが用意されている場合があります。ページの目的に合わせて選びましょう。
  5. 追加したメインビジュアルブロック内で、背景画像を変更したり、表示されるテキスト（見出し、説明文）、ボタンの文言やリンク先などを編集できます。ブロックを選択すると、右サイドバーやブロック自体のツールバーで設定項目が表示されます。
    • 【H4 注意点】LiteWord専用機能: このメインビジュアル機能はLiteWordテーマ専用の機能です。他のテーマに切り替えると表示されなくなったり、レイアウトが崩れたりする可能性があります。

5.2. LiteWordカスタムブロックの活用

LiteWordテーマには、あらかじめデザインされた様々な用途のカスタムブロックが多数用意されていることがあります。これらを利用することで、専門的な知識がなくても見栄えの良いページを効率的に作成できます。

5.2.1. カスタムブロックの選択方法

  • 通常のブロック追加と同様に、プラスボタン（+ ブロックを追加）をクリックし、「すべて表示」から探します。LiteWord独自のカテゴリや、特定の接頭辞（例: LWブロックなど）がついている場合があります。
  • LiteWord独自のブロック挿入アイコン（もしあれば）からも選択できます。

5.2.2. よく使われるLiteWordカスタムブロックの例

  • レイアウト付きの見出し: 中央揃えになっていたり、アクセントの線や装飾が付いている見出しブロック。
  • カラム（列）: ページを2列や3列などに分割し、左右に画像とテキストを配置したり、サービスの特徴を並べたりするのに便利です。WordPressのデフォルト機能にもカラムブロックはありますが、LiteWordのカスタムブロックの方がよりデザイン性に優れている場合があります。
  • CTA (Call To Action): 「お問い合わせはこちら」「資料請求」など、ユーザーに特定の行動を促すための目立つボタンやセクション。背景画像や詳細なデザイン、リンク先を設定できることが多いです。
  • フロー: 申し込み手順やサービスの利用の流れなどを、ステップごとに分かりやすく図示するブロック。
  • テーブル（表）: 料金表やスペック比較など、情報を整理して表示するのに使います。WordPressのデフォルトのテーブルブロックよりも、デザインが整っていることが多いです。
  • 装飾リスト: アイコンが付いていたり、デザイン性の高い箇条書きリスト。

5.2.3. カスタムブロックのメリットと注意点

  • メリット: これらのカスタムブロックを活用することで、HTMLやCSSといった専門知識がなくても、デザイン性の高いコンテンツパーツを簡単に追加できます。
  • 【H4 注意点】LiteWord専用カスタムブロック: これらのカスタムブロックもLiteWordテーマ専用です。テーマを変更すると利用できなくなる点に注意してください。
  • 【H4 今後の展望】: テーマによっては、今後さらに便利な有料・無料のカスタムブロックが追加される予定があるかもしれません。

6. まとめ

このマニュアルでは、WordPressテーマ「LiteWord」を使用して固定ページを新規作成し、基本的なコンテンツを追加・編集する方法、そしてLiteWord独自の便利な機能を活用する手順について解説しました。

テキストの入力、見出しの設定、画像の挿入といった基本操作に加えて、LiteWordが提供するメインビジュアル機能や多彩なカスタムブロックを積極的に利用することで、白紙の状態からでも効率的に、かつデザイン性の高い固定ページを作成することが可能です。

最初は難しく感じるかもしれませんが、まずはこのマニュアルを参考に、実際にさまざまなブロックを試してみて、どのように表示され、どのような設定ができるのかを確認しながら作成を進めるのがおすすめです。実践を通じて、WordPressとLiteWordテーマの操作に慣れていきましょう。