設定手順

  1. まずはDEZABEEテーマSingle002をインストールします。
    1. ダウンロードページからダウンロードしたzipファイルを解凍(展開)せずにわかりやすい場所(デスクトップ等)に保管してください。
    2. WordPressへログインし、メニューの「外観」>「テーマ」へ
    3. ページ左上にある「新規追加」ボタンをクリックします。
    4. ページ左上にある「テーマのアップロード」ボタンをクリックします。
    5. ページ中央にある「ファイルを選択」ボタンをクリックします。
    6. DEZABEEからダウンロードしたzipファイル選択し、開くボタンをクリック
    7. ページ中央にある「今すぐインストール」ボタンをクリックします。
    8. インストールされたら、有効化をクリック
  2. メディア設定
    1. 左メニューの「設定」「メディア」へ
    2. ここでは画像をアップロードした時に自動で生成される画像のサイズを設定します。
    3. 本テーマでは、サムネイルのサイズ、中サイズ、大サイズは以下のサイズを推奨します。

      サムネイルのサイズ:幅220 高さ220
      中サイズ:幅400 高さ0
      大サイズ:幅1280 高さ0
      ※高さ0は不問という意味になります。
      ※画像は本デモサイトの設定です。

      size

  3. パーマリンク設定
    1. 左メニューの「設定」「パーマリンク設定」へ
    2. 固定ページや投稿などのURLに関する設定をします。
    3. 投稿名で設定しておくと、URLが数値や日付けなどにならない為URLでどんなページか判断出来る為オススメです。 parma
  4. 固定ページをつくります。
    1. メニューを作る為に、予め固定ページを作ります。本文は無しでかまいません。
    2. 「固定ページ」>「新規追加」で登録しましょう。
    3. 3でパーマリンク設定を投稿名にしていると、タイトルが自動でURLになります。日本語でもそのままURLになります。
    4. 自身で決めたい場合はスラッグを編集するか、ページ編集画面のタイトル入力欄の下にある「編集」ボタンで編集できます。
    5. 制作する予定の固定ページを全て新規追加してください。※後ほど追加、削除も可能です。
  5. メニューを登録します。
    1. 「外観」「メニュー」へ
    2. 「固定ページ」>「新規追加」で登録しましょう。
    3. まずは新規メニュー追加、もしくはメニューを保存を押してメニューをつくります。
    4. メニューの名前はなんでも構いません、ご自身で管理するためのメニューの名前になります。
    5. トップページ最上部に表示させたいメニューのメニュー設定の「テーマ位置」primary Menuのチェックボックスにチェックを入れてください。
    6. primary Menuのチェックボックスにチェックを入れたメニューが全ページ共通のメニューになります。
      その他、フッター用などを用意すると良いと思います。menu
  6. トップページを編集
    1. 「外観」「テーマオプション」へ
    2. まずは「フォントの設定」を行います。
      サイト全体のフォントやその他タイトルやメニューなどのフォントを設定します。
      設置個所はこの画像(クリックで開く)を参考にしてください。

      各所のフォント、文字サイズ、太さや下線などを設定できます。
      font

    3. 設定完了したら「保存/更新する」ボタンを押して設定を保存します。
    4. 次に「基本設定」を行います。
    5. 各項目を設定してください。いつでも変更できますので仮でも構いません。
      設定個所はこの画像(クリックで開く)を参考にしてください。

      各所のテキストを設定できます。
      kihon

    6. 設定完了したら「保存/更新する」ボタンを押して設定を保存します。
    7. 次に「画像設定」を行います。
    8. 各画像を登録してください。いつでも変更できますので仮でも構いません。
      設定個所はこの画像(クリックで開く)を参考にしてください。

      メインヘッダー推奨サイズ:幅1280px 高さ550px
      Gallery画像サイズ:幅・高さ220px(正方形)
      gazou

    9. 設定完了したら「保存/更新する」ボタンを押して設定を保存します。
    10. 次に「マップエリア設定」を行います。
    11. Googleマップを使用する場合は、埋め込みコードを取得してください。
      ※埋め込みコードの取得方法はコチラ
      埋め込みコード内にサイズの指定があるので、width=”100%” height=”400“の赤字部分でサイズを指定して下さい。
      ※width=”100%” height=”400″は推奨サイズです。

      Googleマップを使用せず、オリジナルの画像にしたい場合は、Googleマップを使用しない場合の箇所にチェックを入れ、画像を登録してください。
      マップ画像サイズ:幅1280px高さ:任意
      map

    12. 設定完了したら「保存/更新する」ボタンを押して設定を保存します。
  7. サイトのロゴ、サイト名を設定
    1. 「外観」「カスタマイズ」へ
    2. ■サイト名に画像を使用する場合■
      背景透過のPNGで作成することをオススメします。推奨サイズは横380px 高さ:96px ですが、メニューの長さなどに応じてサイズ調整してください。
      画像の登録は「外観」>「カスタマイズ」>「ヘッダー画像」にて登録してください。アップロードも同時に行えます。
      ※起点(左上)位置の調整はできません。
      画像の登録が完了したら、保存して公開ボタンを押してください。
      logosetteo
    3. ■サイト名に画像を使用しない場合■
      「外観」>「カスタマイズ」>「ヘッダー画像」にて登録されている画像を「画像を非表示」ボタンで削除してください。
      logosettei
      保存して公開ボタンを押してください。
      サイト名はサイトのタイトルが表示されます。「外観」>「カスタマイズ」>「サイト基本情報」または「ダッシュボード」「設定」「一般設定」にて変更して下さい。
      saitomei
  8. 配色を設定
    1. 「外観」「カスタマイズ」「色」へ
    2. 各所の色が設定できます。
      colorリアルタイムで色が切り替わらない場合は、保存して公開ボタンを押してからブラウザの更新ボタンを押してみて下さい。
  9. フッターウィジェットの設定
    1. 「外観」「ウィジェット」へ
      footer
    2. 本テーマではフッターが三分割されています。デモサイトの様に左にメニュー、中央にFacebookタイムライン、右にInstagramを設定する方法です。
    3. ■フッター左側にメニューを表示させる方法■
      利用できるウィジェットの中からカスタムメニューを選んでドラッグ&ドロップしてください。
      dd
      タイトルと登録済のメニュー選んで保存ボタンを押す。
      フッター専用のメニューを登録すれば選択肢に追加されます。
      新規メニューの登録は「外観」「メニュー」新規メニューを作成から登録可能です。 ft1

    4. ■フッター中央にFacebookのタイムラインを表示させる方法■
      1. 表示用のコードを取得する。
        コードの取得方法はこちら
      2. Step.2のコードをheader.phpに書き込みます。
        「外観」「テーマの編集」へ
        右のテンプレートのリストから「テーマヘッダー(header.php)」を探しクリックします。
      3. テーマヘッダー(header.php)」の編集画面になったら<head>を見つけて、その下にStep.2のコードを貼り付けます。
        ft2
      4. テーマの更新ボタンを押して保存してください。
      5. 「外観」「ウィジェット」でStep.3のコードを設定します。
        フッター中央所へ利用できるウィジェットの中からテキストを選んでドラッグ&ドロップしてください。
        ft2b
        タイトルにFaceBook、内容にStep.3のコードを貼り付けます。
        ft2c
      6. 保存ボタンを押してください。
    5. ■フッター右側にInstagramの画像を表示させる方法■
      1. Instagramの画像を表示させるためのプラグイン(外部プログラム)をインストールします。
      2. 「ダッシュボード」「プラグイン」をクリック
      3. 新規追加をクリック
        ft3a
      4. 右上の枠に WP Instagram Widget と入力しキーボードのENTERキーで検索してください。
        ft3b
      5. WP Instagram Widgetの今すぐインストールボタンを押します。
        ft3c
      6. プラグインを有効化をクリックし有効化します。
        ft3d
      7. 有効化したら「外観」「ウィジェット」へ戻ります。
      8. フッター右側に利用できるウィジェットの中からInstagramをドラッグ&ドロップします。
        ft3
      9. 各所を入力して保存してください。詳しくは使用プラグインページのWP Instagram Widgetの部分を見て下さい。
  10. コピーライトの設定
    1. 「外観」「テーマオプション」「基本設定」の11で文字の変更が可能です。未入力ですとサイトの名前が表示されます。
      copy2
    2. 「外観」「テーマオプション」「FONT設定」の14にてFONT・サイズ・フォーム・文字装飾・表示位置(寄せ)が設定可能です。copy
以上で一通りの設定は完了です。
各固定ページ作りや問合せフォームの設置などサイトを作り上げるにはまだまだやる事はあるかと思いますが、ここまでの設定でホームページらしくなったのではないでしょうか?さまざまなプラグインなどを取り入れて、素敵なホームページにしてください。
ご不明な点につきましてはDEZABEEサポートチームへお問い合わせください。