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

WordPressWordpress Theme

Grazioso Wordpress theme

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

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

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

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

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

 


10日間返金保証つき

 

用意するもの

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

店舗外観

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

スイーツ

 

やること

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

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

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

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

Grazioso Wordpress theme概念

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

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

初期設定

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

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

 

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

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

Grazioso Wordpress theme概念

 

スラッグ(パーマリンク設定)

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

Wordpress 設定

 

投稿のカテゴリー設定

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

Wordpress 設定

 

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

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

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

 

メニュー設定

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

Grazioso設定

 

ウィジェット作成

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

Grazioso設定

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

  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の背景を設定します。

Graziosoウィジェット背景設定

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

Graziosoウィジェット背景設定

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

Graziosoウィジェット背景設定

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

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

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

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

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

配色を変える

Grazioso Wordpress theme

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

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

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

 

出来上がり

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

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

Graziosoスマホサンプル

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

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

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

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

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

 


10日間返金保証つき