【動画有】店舗ホームページ作成【ワードプレス】(トップページ 1/2) (5/全11)

WordPress関連
この記事は約6分で読めます。

こんにちは。プログラマーNです。

WordPressで店舗サイト(店舗のホームページ)を作成する方法(第5回目)です。

わかりやすく、すぐに作成できるような内容ですので、ご覧下さい。

店舗サイト「ととのえる」

↓使用しているサーバー、テーマ↓

レンタルサーバー… エックスサーバー

テーマ…BusinessPress

今回の内容は、トップページを作成していきます。

(トップページ内の文章、見出し、店舗の特徴、お知らせ一覧を作成)

トップページの作成

管理画面「固定ページ」→「固定ページ一覧」に表示されている「トップ」にカーソルを合わせ、「編集」を押します。

理念、伝えたいことを表示 (段落) 

本文で「+」ボタンを押します。

ブロックの候補が表示されます。

段落を押します。

ここに店舗の理念など、伝えたいことを書きます。

キーボード「Enter」キーを押すと次の新しいブロックへ進みます。また別の文章を入力してみます。

この記述した内容がどのように表示されているか確認してみます。
右上の「プレビュー」→「新しいタブでプレビュー」を押します。

このように表示されています。

「固定ページを編集」(トップページの編集)に戻り、2つある段落の1つ目の段落を文字をもう少し大きくしてみます。

1つ目の段落の文章を全て選択→右側「ブロック」の「タイポグラフィ」「フォントサイズ」が「デフォルト」になっています。「中」に変更します。

先ほど表示したプレビューでは、2つの段落に記述した内容が中央に狭く表示されていたので、もう少し幅を広く表示します。

2つの段落を全て選択→ブロックの詳細設定(1番右側にある「縦3点」)

「グループ化」を押します。

ブロックの「配置を変更」→「幅広」

プレビューで表示してみます。

2つの段落に記述していた内容は幅が広く表示されました。

見出し

次に店舗の特徴を表示していきたいので、見出しを作成します。

ブロック「見出し」→「H2」タグを選択

見出しで「ととのえる の特徴」(「ととのえる」とは店舗名)と入力し、ブロック「テキストの配置を変更」で「テキスト中央寄せ」にします。

右側「ブロック」のスタイルで装飾ができます。「二重線 上下線 黒」を選択してみます。

ブロック「配置を変更」→「幅広」

店舗の特徴 (カラム)

ブロック「カラム」→パターン「33/33/33」を選択します。

カラム毎(列毎)に「画像」、「見出し」、「段落」を作成していきます。

左側の「+」を押します。

ブロック「画像」で表示したい画像を選択します。

(「画像」は右側「ブロック」で「スタイル」を選択できます。「角丸」を選択しています)

画像を表示後、下の「+」→「見出し」→「H3」

「見出し」で、文章を入力、ブロック「テキストの配置を変更」で「テキスト中央寄せ」にします。
「段落」で文章を入力します。

左側カラムの「画像」、「見出し」、「段落」と同じような流れで中央カラム、右側カラムを作成します。

「カラム」全体を選択後、「幅広」にします。

(プレビューで確認)「幅広」後です。

↓「カラム」ブロックの詳細内容はこちらをご覧ください。

お知らせ一覧 (最新の投稿)

お知らせ一覧でお知らせを表示したいので、前準備で仮にお知らせを3ページ作成してみます。

管理画面「投稿」→「カテゴリー」で新規カテゴリーを追加します。

「名前」は「お知らせ」、「スラッグ」は「news-」と入力します。
(今回、「カテゴリー」を1つのみ作成し、わかりやすい「名前」、「スラッグ」にしてみました)

「新規カテゴリーを追加」ボタンを押し、「カテゴリー」に追加されました。

管理画面「投稿」→「投稿一覧」

「Hello world!」というタイトルのサンプルページがあります。このサンプルページは使用しないので、「ゴミ箱へ移動」を押します。

「新規追加」ボタンを押し、投稿ページを作成します。

タイトル(タイトルは「お知らせテスト1」と入力)と本文を入力し、一旦、「下書き保存」をします。(「下書き保存」をすると、右側「投稿」タブの「URLスラッグ」が入力できるようになります。)

右側「投稿」タブの「URLスラッグ」を入力(投稿1回目なので、news-1、投稿2回目以降はnews-2、news-3、news-4…)、「カテゴリー」を「お知らせ」にします。
その後、右上の「公開」ボタンを押し、公開します。

「投稿一覧」に「お知らせテスト1」が表示されました。

「お知らせテスト1」と同じように、「お知らせテスト2」、「お知らせテスト3」を作成します。
(「お知らせテスト2」のURLスラッグは「news-2」、「お知らせテスト3」のURLスラッグは「news-3」)

もし正しくパーマリンクが表示されない場合は、管理画面「設定」→「パーマリンク設定」の共通設定で「投稿名」にし、「変更を保存」ボタンを押します。

(再度、投稿ページの右側「投稿」タブを再設定してください。)

お知らせを3ページ分作成しましたので、「トップ」の「お知らせ一覧」を表示していきます。

「見出し」作成(「見出し」の「幅広」まで完了)

見出しの下のブロックで「+」を押し、「最新の投稿」を選択します。

「最新の投稿」にしたブロックを「幅広」にします。

(プレビューで確認) 「お知らせテスト3」のリンクを押すと、ページが表示されます。

動画はこちら

(「動画の第3回目」は「当ブログの第5回目」(今ブログ)です。)


今回は以上です。次回も引き続き、トップページを作成していきます。

↓使用しているサーバー、テーマ↓

レンタルサーバー… エックスサーバー

テーマ…BusinessPress

【動画有】店舗ホームページ作成【ワードプレス】(ご予約ページ) (11/全11)
WordPressで店舗サイト作成の第11回目です。(テーマ:BusinessPress)(全11回)今回はご予約のページを作成します。とても簡単でわかりやすく、すぐに作成できます。
【動画有】店舗ホームページ作成【ワードプレス】(予約システム設定) (10/全11)
WordPressで店舗サイト作成の第10回目です。(テーマ:BusinessPress)(全11回)今回はご予約システムの設定を行います。とても簡単でわかりやすく、すぐに作成できます。
【動画有】店舗ホームページ作成【ワードプレス】(お問い合わせページ) (9/全11)
WordPressで店舗サイト作成の第9回目です。(テーマ:BusinessPress)(全11回)今回はお問い合わせのページを作成します。とても簡単でわかりやすく、すぐに作成できます。
【動画有】店舗ホームページ作成【ワードプレス】(よくあるご質問ページ) (8/全11)
WordPressで店舗サイト作成の第8回目です。(テーマ:BusinessPress)(全11回)今回はアクセスのページで地図、よくある質問のページでFAQ(Q&A)を作成します。とても簡単でわかりやすく、すぐに作成できます。
【動画有】店舗ホームページ作成【ワードプレス】(メニューページ) (7/全11)
WordPressで店舗サイト作成の第7回目です。(テーマ:BusinessPress)(全11回)今回はメニューのページ内のメニューテーブル、サービスの流れを作成します。とても簡単でわかりやすく、すぐに作成できます。
【動画有】店舗ホームページ作成【ワードプレス】(トップページ 2/2) (6/全11)
WordPressで店舗サイト作成の第6回目です。(テーマ:BusinessPress)(全11回)今回はトップページ内の画像の上にボタン配置(カバー)、お客様の声、再利用ブロックの設定・使用を作成していきます。とても簡単でわかりやすく、すぐに作成できます。
【WordPress】店舗ホームページ作成(ヘッダー、フッター 2/2) (4/全11)
WordPressで店舗サイト作成の第4回目です。(テーマ:BusinessPress)(全11回)今回も各ページの共通部分の設定です。今回で共通部分の設定は完了です。とても簡単でわかりやすく、すぐに作成できます。
【WordPress】店舗ホームページ作成(ヘッダー、フッター 1/2) (3/全11)
WordPressで店舗サイト作成の第3回目です。(テーマはBusinessPress)(全11回)今回は各ページの共通部分の設定です。とても簡単でわかりやすく、すぐに作成できます。
【WordPress】店舗ホームページ作成(プラグイン) (2/全11)
WordPressで店舗サイト作成の第2回目です。(テーマはBusinessPress)(全11回)今回はプラグインの設定です。とても簡単でわかりやすく、すぐに作成できます。
【WordPress】店舗ホームページ作成(テーマ) (1/全11)
WordPressで店舗サイトを作成する際、まず何をすればよいか、どのようにすれば作成できるか、わからないことも多いかと思います。ですが、当ブログ内容をご覧になることで、とても簡単でわかりやすく、すぐに作成できます。今回は第1回目でテーマの設定です。(全11回)

コメント

タイトルとURLをコピーしました