ワードプレステーマ『Grazioso』で１からサイト作成　1時間もかからずちゃんとしたサイトが作れる

2018年12月12日2020年5月9日WordPress

ワードプレステーマ Grazioso を使うとパーツを組み上げる要領でホームページを作れるので、初心者でもかんたんに扱える、きちんと読んでもらえるページが作れるとこちらのページに書いたけれど、文字で書いてもたぶん分かりにくいですよね。

ということで、このページではGraziosoの基本的な使い方を紹介しつつ、サンプルとして甘味処の店舗案内とお知らせを表示させるウェブサイトを作ってみます。

順を追って作っていくので、一通りの手順は分かるかと。

必要なところを埋めるていくだけで、ホームページ（フロントページ・トップページ）とお知らせブログ記事の設定、メニュー作成の３点で、きちんとしたサイトができてしまいます。

WordPressの使い方を知っていればスグに使いこなせるようになる、というくらい分かりやすくて使いやすいです。

 

 

用意するもの

お店のイメージ画像大きめ　１枚

商品のイメージ画像300×250　１枚

 

やること

WordPressとGraziosoはインストール済みの状態から始めます。

1. 推奨プラグインのインストール
2. WordPressインストール後の初期設定
3. ホームページ（フロントページ・トップページ）のウィジェット配置
4. トップのウィジェットにお店の外観を背景画像として設定

サイト作成で分かりにくいのはウィジェットの使い方。

トップページのボディ部分は「Home」というウィジェットエリアに設置したウィジェットがそのまま表示されます。

トップページに表示させたいことは全て、ウィジェットに記述してHomeに設置することになります。

WordPressに馴染みのない人にも分かりやすいよう、初期設定はテーマとは無関係なWordpressも順にやっていきます。

初期設定

ウェブサイトのタイトルなどは適当に設定。

ページ上部のヘッダーエリアに表示するサイトタイトルは、WPの設定とは別にGraziosoの[テーマオプション]から設定できます。

 

推奨プラグインをインストール

上に表示されている推奨プラグインを全部インストール

 

スラッグ（パーマリンク設定）

パーマリンクはお知らせということで、月と投稿名に。

 

投稿のカテゴリー設定

スラッグが日本語のままだと使えないので、カテゴリ名を「お知らせ」スラッグを information に。

 

サンプルとして投稿と固定ページをつくる

投稿ページとして、「年末年始の営業のお知らせ」というタイトルのページを自分で作ります。

固定ページは自動で生成されている「プライバシー」ページをそのまま公開して、メニューに加えます。

 

メニュー設定

メニュー名は適当に。
下のドロップメニューとモバイルメニューの2つの項にチェックを入れておきます。

 

ウィジェット作成

ややこしくなるので、[Home]ウィジェットエリアに設置されているウィジェットを全部消去した上で、改めて設置していきます。

全て削除したら、あらためて[Home Widgets]エリアに次の４つのウィジェットを配置します。

1. カスタムコード #1
2. インフォメーション
3. 最近の投稿
4. カスタムコード #2

配置ができたら、ウィジェットにテキストや画像を入れていきます。

①カスタムコード #1
背景画像は後で入れるので、とりえあえずテキスト表示だけ。

<div style="padding-top:2em"><p style="text-align:center;font-size:2em;">和菓子屋</p>
<p style="text-align:center;font-size:4em;">和菓子店</div>

②インフォメーション

• タイトルに『営業時間』
• テキストに『<b>平日</b><br>10:00 ～ 19:00<br><b>土曜・日曜・祝日</b><br>8:00 ～ 19:00<br><br><b>休業日：</b>1月1日～3日』
• URLに『用意した画像のURL』

③最近の投稿

• タイトルに『お知らせ』
• 表示する件数は適当で

④カスタムコード #2

• Googleマップなどで取得した、地図埋め込みコードを「コンテンツ」の中にペースト。

ウィジェットは変更したら保存を忘れずに。

ぜんぶ終えてトップページを開くと、入力したテキストや画像が表示されているはず。

カスタムコード #1の背景画像を設定

次にページのトップに来るカスタムコードの背景画像を設置しましょう。

[外観] > [ウィジェット背景設定] には、追加したウィジェットの背景動画・画像の設定項目が並んでいます。

今回はカスタムコード#1の背景を設定します。

「画像を選択」を押すと、メディアライブラリにアップした画像が表示されます。

お店の外観の画像の「表示する」を押して、バックグラウンド画像として使う設定をします。

キャプションは特になくてもいいと思いますが、代替テキストとタイトル、説明はきちんと入れておきます（多少なりとも検索順位に影響が出る）。

画像のリンクURLは、「ファイルのURL」ボタンを押せば自動で入ります。

サイズは適宜決め、必ず「投稿に挿入」ボタンを押して、確定させてください。

これでトップページの頭の部分に、お店画像が背景として表示されているはずです。

スマホとパソコンでは表示される画像がサイズが異なるので、ウインドウのサイズを変えては確認しつつ調整していきます。

配色を変える

ウィジェットごとの背景や文字色は、[外観] > [テーマオプション]からお好みで行ってください。

「最新の投稿」ウィジェットの配色は「リストウィジェット」で変更できます。

このページでメニューバーの色も変更できるので、いろいろ試してみてください。

 

出来上がり

出来上がりはこんな感じですね。いや、色使いとかそういうのはおいといて。

ウィジェットを組み立てるだけでできちゃうことが分かったでしょ？

配色や順番、画像の加工などの工夫は必要ですが、とりあえずそれなりの見栄えのウェブサイトが欲しい！という状況なら、これを使うといいと思います。

「美しい」サイトとなると難しいですが、適切な文字サイズと配置さえしっかりした『Grazioso』なら、何もしなくても情報を伝えるという目的は十分に果たせます。

知識がなくても普通に「読みやすい」サイトが作れますし、もちろん知識があればお店のイメージを上げるような美しいサイトにも変身させられます。

商品を売るためのランディングページも時間をかけることなく作れますよ。

目的さえ絞れば、『Grazioso』は初心者からプロまで使い倒せるテーマだと思います。