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

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

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

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

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

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

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

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

テーマ…BusinessPress

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

(トップページ内の画像上にテキストやボタン配置(カバー)、お客様の声を作成、再利用ブロックでカバーを作成)

トップページの作成

画像上にテキスト、ボタン配置 (カバー)

「カバー」ブロックは簡単に画像の上にテキスト、ボタンを載せることができます。

さらに画像を固定する設定により、サイトの画面をスクロールさせたときに、画像に動きが出るので、かっこよく、是非、使用したいブロックです。

「+」→「カバー」を選択

画像を選択します。

テキストを入力→フォントサイズ調整→「Enter」キー→「+」ボタンを押します。
(右側「ブロック」タブでフォントサイズが調整できます)

「ボタン」を選択します。

「ボタン」のテキストは直接入力し、それ以外の設定は右側「ブロック」タブで「色設定」などを設定します。

ボタンの色は「カスタマイズ」で設定した「リンクカラー」、「リンクホバーカラー」の色を使いました。
「お問い合わせ」ボタンは「リンクカラー」、「ご予約はこちら」ボタンは「リンクホバーカラー」です。

↓カスタマイズの色設定↓

「リンク」で「ボタン」のリンク先を設定します。

「ボタン」を配置した「ブロック」を選択し、「配置を変更」→「中央揃え」にします。

①「カバー」全体を選択→②右「ブロック」タブ「固定画像」をON→③「配置を変更」を「全幅」

プレビューで確認すると、サイト画面をスクロールし、画像が固定されているので、見栄えが良いですね。

↓「カバー」ブロックの詳細設定は下記をご覧ください。

お客様の声

お客様の声の見出しを作成します。(「幅広」まで完了する)

「ブロック」で「枠線ブロック」を選択します。

右「ブロック」タブで「スタイル」、「色」を設定します。
「色」は男性…青、女性…赤にしてみます。

「枠線ブロック」でタイトル、本文を入力します。

「枠線ブロック」全体をグループ化し、「幅広」にします。

↓↓プレビューで確認↓↓

同じように「枠線ブロック」でお客様の声を作成します。

再利用ブロック

もう一度「カバー」を作成したいとします。

作成済みの「カバー」を使用したいので、前回作成した「カバー」を選択→「再利用ブロックに追加」→「再利用ブロック」の名前を入力→「保存」でブロックを更新します。

「+」→すべて表示→「再利用」タブで保存した「カバー」を選択します。

「再利用ブロック」のカバーが設定できました。

動画はこちら

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

今回は以上です。次回はメニューページを作成していきます。

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

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

テーマ…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回)今回はメニューのページ内のメニューテーブル、サービスの流れを作成します。とても簡単でわかりやすく、すぐに作成できます。
【動画有】店舗ホームページ作成【ワードプレス】(トップページ 1/2) (5/全11)
WordPressで店舗サイト作成の第5回目です。(テーマ: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をコピーしました