有料テーマ「Precious」のテーマオプションを設定する

テーマオプションの設定 有料テーマ「Precious」

テーマオプションとは、テーマに付属する独自の機能で、一般的に無料テーマにはありません。
基本カラーやロゴの設定、トップ画像の設定等が、専門知識無しでできるような機能になっています。
テーマオプションは、有料テーマの特典とも言えるでしょう。

このホームページ制作オンライン講座の中で、一番ボリュームが大きい作業となっています。

PCやスマホで解説動画を見ながら作業を進め、一通り終わったら、このページの解説を読みながら確認すると分かりやすいと思います。

 

「Precious」のテーマオプションの設定 解説動画

有料テーマ「Precious」のテーマオプションの設定について解説しています。

 

テーマオプションを設定する

有料テーマ「Precious」のテーマオプションは、とても使いやすく、トップ画像のデザインを整えてくれます。
また、バナーの設定が最大7箇所できるので、他サイト(アメブロやFacebook等、自分がホームページの他に運営してるサイト)に簡単に誘導することができます。

左のサイドバー「外観」にポインタを合わせ、「テーマオプション」をクリックします。

次の画面が表示されますので、基本設定・ロゴ(ヘッダー)・トップページの設定・トップページ下部の広告・お知らせと商品の設定・フッターバーの設定の順に設定していきます。
まずは「基本設定」です。

サイトのメインカラーでは、このホームページのメインカラーを一色選択します。
初期色は使いやすい青なので、このままでもいいと思います。
変更したい場合は、色の上にポインタを合わせ、クリックすると、次のような画面が表示されるので、クリックしながら色を選び、設定したい色が見つかったら、「色を保存」のボタンをクリックしてください。

メインカラーは、次のように「お知らせのタイトル」や業務内容、ブログのタイトル等にポインタを合わせた時に色が変化します。

「フォントサイズ」では、記事の詳細ページと固定ページのフォントサイズを変更できます。
基本的には、このままで大丈夫です。

「各項目の表示設定」では、表示しないもののチェックをはずします。
ここでは、「投稿者名」と「コメント」が表示されないように設定しました。

「twitterとfacebookの設定」では、SNSにリンスするアイコンをフッターに表示したい場合に、自分のSNSのURLを入れます。
ここでは、twitterのURLを入力し、フッターにtwitterのアイコンを表示させました。

「ソーシャルボタンの表示設定」では、投稿記事の上と下に表示するソーシャルボタンを設定できます。
チェックを外して表示しないこともできます。

ソーシャルボタンの表示は、次の通りです。
左寄せとカラム幅、colorとmonoで表示方法が変わります。

「twitterボタンの設定」に自分のアカウントを入力すると、ソーシャルボタンを使って読者が自分の記事を共有する際に、自分のアカウントが表示されるようになります。
(twitterをやっていない場合、表示させる必要がない場合は、入力しなくて大丈夫です)

「カスタムCSS」では、CSSという言語を使い、デザインやレイアウトを調整することができます。
コードやプログラム言語の専門知識がない場合は、空欄にすることをお勧めします。

次に「ロゴ(ヘッダー)」の設定をします。

ロゴは、PC表示用とスマホ表示用で大きさの違う画像をあらかじめ作っておきましょう。
(ここでは、PC表示用として190×60ピクセル、スマホ表示用として80×20ピクセルのロゴ画像を作成しました)
ステップ1では、PC表示用のロゴを設定します。
「ファイルを選択」ボタンをクリックし、ロゴ画像を選択します。

あらかじめ作成したロゴ画像を選択し、「開く」ボタンをクリックします。

「アップロードする」ボタンをクリックします。

ロゴ画像がアップロードされ、表示されます。

ロゴの位置を調整します。
表示されているロゴ画像をドラッグしながら、位置を決定します。

位置が決まったら、「ロゴの位置を決定する」ボタンをクリックします。

次にスマホ用のロゴ画像を設定します。
「画像を選択する」ボタンをクリックします。

ファイルをアップロードをクリックします。

あらかじめ作成したロゴ画像を選択し、「開く」ボタンをクリックします。

ロゴ画像にチェックが入っていることを確認し、「この画像を利用する」ボタンをクリックします。

スマホ用のロゴ画像が表示されていることを確認し、「設定を保存」ボタンをクリックします。
これで、ロゴの設定が完了しました。

次に「トップページの設定」に進みます。

トップページの設定では、最初にトップ画像を設定します。
トップ画像とは、次の赤枠で囲んだ部分の画像のことを言います。
ホームページのトップに表示され、ホームページの顔と言える部分になります。

トップ画像は、5枚までスライド表示させることができます。
ここでは、1枚設定します。
画像はあらかじめ作成しておきましょう。推奨サイズは1140×400ピクセルです。

「スライダー画像の選択」の「画像を登録する1」、「ファイルを選択」ボタンをクリックします。

あらかじめ作成した画像を選択し、「開く」ボタンをクリックします。

画像が表示され、設定が完了です。
トップ画像を複数設定し、スライドさせたイ場合は、同様に「画像を登録する2」や「画像を登録する3」にも画像を設定してください。

次にスマホ用のトップ画像を設定します。
スマホ用画像の推奨サイズは360×240ピクセルです。

「スマホ用画像を登録する1」の「画像を選択する」ボタンをクリックします。

「ファイルをアップロード」のタブをクリックし、「ファイルを選択」ボタンをクリックします。

あらかじめ作成したスマホ用画像を選択し、「開く」ボタンをクリックします。

画像にチェックが入っていることを確認し、「この画像を利用する」ボタンをクリックします。

画像が表示され、設定が完了しました。

画面を下にスクロールし、「スライダーの下に表示するバナーの設定」に移ります。
バナー画像はあらかじめ作成しておきましょう。推奨サイズは365×150ピクセルです。

スライダー下のバナーとは、次の赤枠で囲んだ部分を言います。
ここでは、左から「バナーの画像1」に「事務所概要」、「バナーの画像2」に「代表者紹介」、「バナーの画像3」に「お問い合せ」のバナーを設定します。

「バナーの画像1」の「ファイルを選択」ボタンをクリックします。

「事務所概要」用のバナー画像を選択し、「開く」ボタンをクリックします。

同様に、「バナー画像2」の「ファイルを選択」ボタンをクリックし、「代表者紹介」用バナー画像を選択し、「開く」ボタンをクリックします。

同様に、「バナー画像3」の「ファイルを選択」ボタンをクリックし、「お問い合せ」用バナー画像を選択し、「開く」ボタンをクリックします。

バナー画像1,2,3が設定できたら、「画像を保存」ボタンをクリックします。

スライダーの下に表示するバナーが3つ設定できました。

次に、それぞれのバナーのURLを設定します。

バナーの画像1の下、「バナーのURL1」(下の赤枠部分)には、事務所概要ページのURLを入力します。

上のバーのサイトのタイトルにポインタを合わせ、「サイトを表示」をクリックします。
※設定の保存をしておきましょう(画面をスクロールして、一番下の「設定を保存」ボタンをクリックします)

メニューの「事務所概要」をクリックし、事務所概要ページを開きます。

ページのURLを範囲指定してコピーします。

上のバーのサイトのタイトルにポインタを合わせ、「ダッシュボード」をクリックし、ダッシュボードを開きます。

左のサイドバー「外観」の「テーマオプション」をクリックします。

「トップページの設定」のタブを開きます。(すでに開いていたら、そのままで大丈夫です)
下にスクロールし、「スライダーの下に表示するバナーの設定」を表示させます。

「バナーのURL1」の欄に、先ほどコピーした事務所概要ページのURLを貼り付けます。

下にスクロールし、「設定を保存」ボタンをクリックします。

同様に「バナーのURL2」には「代表者紹介ページのURL」を設定し、「バナーのURL3」には「お問い合せページのURL」を設定します。
手順は次の通りです。

  1. サイトを表示する
  2. メニューから「代表者紹介」または「お問い合せ」をクリックして開く
  3. ページのURLをコピーする
  4. ダッシュボードを表示する
  5. 左のサイドバー「外観」の「テーマオプション」をクリックして開く
  6. 「トップページの設定」タブが開いているのを確認
  7. 下にスクロールし、「スライダーの下に表示するバナー」の「バナーのURL2」または「バナーのURL3」にコピーしたURLを貼り付ける
  8. 下にスクロールし、「設定を保存」ボタンをクリックする

 

次に、中央バナーを設定します。

中央バナーとは、次の赤枠で囲んだ部分を言います。
画像はあらかじめ作成しておきましょう。推奨サイズは800×130ピクセルです。

「ファイルを選択」ボタンをクリックします。

中央バナーに設定する画像を選択し、「開く」ボタンをクリックします。

「画像を保存」ボタンをクリックします。

中央バナーの画像の設定が完了しました。

中央バナーに電話番号を表示した画像を設定した場合、「バナーのURL4」に次のように電話番号を設定すると、スマホでバナーをタップすることで、電話をかけることができます。
tel:<事務所または携帯の電話番号>を入力します。

スマホで中央バナーをタップすると、次のような表示が現れ、「発信」をタップすると、電話がかかります。

次に「その他の設定」です。

ここでは、次の赤枠部分のように変更しました。
入力したら「設定を保存」ボタンをクリックします。

「その他の設定」により、トップ画面が次のように変更されました。
赤枠部分が変更した箇所です。

次に「ページ下部の広告」を設定します。
こちらは、表示したいものがない場合は、設定しなくても問題ありません。

ページ下部の広告には、バナーの画像1・2(推奨サイズは385×130ピクセル)または、バナーの画像1・2と3(推奨サイズは800×130ピクセル)が設定できます。
次の画面から、それぞれのバナー画像を「ファイルを選択」ボタンをクリックして、あらかじめ作成した画像を選択、「画像を保存」ボタンをクリックして設定します。
また、それぞれのバナー画像にリンクさせるページのURLを「バナーのURL1」「バナーのURL2」「バナーのURL3」に入力、設定します。

次に「お知らせと商品の設定」タブを開き、「商品ページの設定」の「見出しの設定」に業務内容と入力します。
これは「業務内容一覧」を開いた時に、見出しに「業務内容」が表示されます。
「設定を保存」ボタンをクリックして完了です。

次に「フッターバーの設定」タブを開き、スマホのフッターバーを設定します。

スマホのフッターバーとは、下のスマホの画像の赤枠部分のように、画面をスクロールすると現れ、タップすることで電話を掛けたり、お問い合せ画面を開く機能です。

スマホのフッターバーを表示させたい場合は、次の赤枠部分「フッターバーの表示方法」から、「フェードイン」か「スライドイン」をチェックします。
表示させない場合は、「表示しない」にチェックを入れます。

フッターバーを設定する場合は、次の赤枠部分「新しいアイテムを追加する」ボタンをクリックします。

「新しいアイテム」というバーが現れるので、クリックして開きます。

ここでは、電話番号を設定します。
「ボタンタイプ」を「デフォルト」から「電話番号」に変更します。

次のように、「ボタンのラベル」に「電話で問合せ」と入力し、「電話番号」に事務所や携帯の電話番号をハイフンなしで入力し、「ボタンのアイコン」の「電話番号」にチェックを入れます。

次に「新しいアイテムを追加する」ボタンをクリックし、お問い合せページを開くフッターバーを追加します。
フッターバーは1つでも表示されますが、2つか3つ表示させた方がバランスがいいでしょう。

「新しいアイテム」のバーをクリックして開き、次の通り設定します。
「ボタンのタイプ」は「デフォルト」、「ボタンのラベル」は「お問い合せ」、「リンク先のURL」には、下の「設定を保存」ボタンをクリックしてからお問い合せページのURLを入力し、「ボタンのアイコン」は「メール」にチェックを入れます。

「リンク先のURL」にお問い合せページのURLを入力したら、「設定を保存」ボタンをクリックして、お問い合せバーの設定が完了です。

「フッターバーの表示方法」の「フェードイン」か「スライドイン」にチェックを入れ、「設定を保存」ボタンをクリックすると、スマホのフッターバーが表示されます。

 

これで、すべてのテーマオプションの設定が完了です。
お疲れさまでした!!

 

ブログ一覧