設定手順

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

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

      setting1

  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. まずは「フォントの設定」を行います。
      サイト全体のフォントやその他タイトルやメニューなどのフォントを設定します。
      設置個所はこの画像(クリックで開く)を参考にしてください。

      各所のフォント、文字サイズ、太さを設定できます。
      setting2

    3. 設定完了したら「保存/更新する」ボタンを押して設定を保存します。
  7. 次に「ページ背景画像」を登録します。
    1. 「ファイルを選択」ボタンを押してメディアライブラリーを開き、選択またはアップロードしてください。
      不要な場合は登録せず、空欄にしてください。
      横1000px高さはお好みですが、デモサイトの背景画像のサイズは横1000px縦620pxです。
    2. 設定完了したら「保存/更新する」ボタンを押して設定を保存します。
  8. 次に「トップ記事編集」を行います。
    1. トップページのメイン記事3つを作成します。
      設定個所はこの画像(クリックで開く)を参考にしてください。

      各項目を埋めていきます。
      setting5

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

      setting11b
      タイトルと文章を入力して保存ボタンを押す。

    4. ■フッター中央にGoogleマップを表示させる方法■
      1. まずは、表示用のコードを取得します。
        コードの取得方法はこちら
      2. 上記同様に利用できるウィジェットの中からテキストを選んでドラッグ&ドロップしてください。
      3. タイトルとコードを内容の欄へコピー&ペーストして下さい。setting12
      4. テーマの更新ボタンを押して保存してください。
  13. ページ内背景を透過させたい場合。
    1. 「外観」「テーマの編集」へ
      setteing13
    2. 切り替わったページがstyle.cssの編集ページであるか確認して下さい。
      setting13b
      画像の部分を確認して下さい。style.css以外になっている場合はページを下へスクロールし、style.cssを探してクリックして下さい。
      setting13c
    3. style.cssの編集画面を最下部までスクロールして、下記の一行を追加して、「ファイルを更新」ボタンを押してください。
      setting13f
      追加するコード
以上で一通りの設定は完了です。
各固定ページ作りや問合せフォームの設置などサイトを作り上げるにはまだまだやる事はあるかと思いますが、ここまでの設定でホームページらしくなったのではないでしょうか?さまざまなプラグインなどを取り入れて、素敵なホームページにしてください。
ご不明な点につきましてはDEZABEEサポートチームへお問い合わせください。