オフィシャル4

オフィシャル4

「DG-STYLE」で提供しているテンプレートの「オフィシャル4」の設定方法について説明します。

オフィシャル4TOPデザイン

記事を強調したデザインの「オフィシャル4」のテンプレートです。

まずテンプレートの適用から進みましょう。

テンプレートの適用方法

サイトデザインの追加

まずテンプレートを適用したいデザインを選択、もしくは新しいデザインを追加して開きます。

  1. ヘッダーメニューの「デザイン設定」をクリック
  2. デザイン追加メニュー」より新しいデザイン追加
  3. 新しいデザインが開いたら完了

テンプレートの適用

デザインの選択ができたら、続いて「オフィシャル4」テンプレートを適用しましょう。

「オフィシャル4」テンプレートの適用
  1. ヘッダーメニューで「テンプレート選択」をクリック
  2. ブログタブにある「オフィシャル4」をクリック
  3. 表示されるメッセージから「はい」を選択
  4. 適用完了

はい、これでテンプレートの適用は終わりました。

ただし、テンプレートなので、グローバルメニューやロゴなどが設定されてない状態ですので、どこを設定すればいいか説明します。

テンプレートの設定箇所

ロゴ設定

「オフィシャル4」で使われている、「ロゴ」は全部で2か所あります。ロゴはロゴ設定で登録したロゴを使用します。

※ロゴ設定については、「サイトロゴを追加する」から確認できます。

ヘッダーロゴ変更

スマホヘッダーロゴ変更
  1. 仮ロゴイメージを「マウス右ボタン」でクリックして「オプション」を開く
  2. イメージ選択」から、登録したロゴを選択して完了

フッターロゴ変更

フッターロゴ変更
  1. シミュレーターの下までスクロールして、フッターに移動する
  2. 仮ロゴイメージを「マウス右ボタン」でクリックして「オプション」を開く
  3. イメージ選択」から、登録したロゴを選択して完了

グローバルメニュー設定

グローバルメニュー設定
  1. 「メニューが選択されてません。」を「マウス右ボタン」でクリックして「オプション」を開く
  2. メニュー選択」から、WP管理画面で登録したメニューを選択する
    ※登録方法は以下を参照してください。
    ※事前に登録されてない場合は、登録後「メニュー読み込み」をクリックすると追加されます。
メニューの登録について
WordPress管理画面

WordPress管理画面で「外観」→「メニュー」のところから、メニューを登録できます。

メインビジュアルの設定

メインビジュアルの設定
  1. 修正したい「イメージ」を「マウス右ボタン」でクリックして、「オプション」選択
  2. 「イメージ選択」から好きなイメージを選んで完了

※他のメインビジュアルイメージも同じ方法で修正しましょう。

バナーの設定

単純なイメージにテキストを載せたバナーを用意してあります。サービスや商品リンクなどに使ってみましょう。

バナーイメージの変更
  1. 修正したいバナーを「マウス右ボタン」でクリックして、「オプション」選択
  2. 「イメージ選択」から好きなイメージを選択して完了

※URLはオプションの中にある「リンク先指定」から設定してください。

バナーテキストの設定

バナーの真ん中にテキストがありますね。こちらも修正しましょう。

バナーテキスト設定
  1. 修正したいバナーを「マウス右ボタン」でクリックして、「パーツタイトル」選択
  2. タイトル名」を修正して完了
    ※空欄の場合は表示されなくなります。

カテゴリーの設定

カテゴリー設定
  1. 「カテゴリーが見つかりませんでした」を「マウス右ボタン」でクリックして、「オプション」選択
  2. カテゴリー欄から表示したいカテゴリーを検索して選択して完了

テキスト&背景イメージの設定

背景イメージのあるテキストエリアは会社紹介などをいれられます。

テキストの設定
テキストの設定
  1. 修正するテキストを「マウス右ボタン」でクリックして、「オプション」選択
  2. 「テキスト入力」を修正して完了

※他のテキストも同じ方法で修正しましょう。

背景イメージの設定
背景イメージ設定
  1. テキストの余白部分を「マウス右ボタン」でクリックして、「オプション」選択
  2. 「イメージ選択」から好きなイメージを選択して完了

※他のイメージも同じ方法で修正しましょう。

住所やGoogleマップの設定

Store欄では、実際の店舗の住所などを設定できます。テキストに関しては上で紹介している方法と一緒です。

ただ「最初の行が店の名前」で、「他の行は住所」の扱い(文字サイズ)になります。

Googleマップの設定

まず「Googleマップの埋め込みコード」を用意してコピーします。

Googleマップの埋め込みコード
  1. Googleマップから設定したい住所を検索してから「共有」を選択
  2. 表示されたメニューから「地図を埋め込む」を選択
  3. HTMLをコピー」をクリックすると完了
Googleマップを埋め込む
Googleマップ埋め込む
  1. 「内容を入力してください」を「マウス右ボタン」でクリックして、「オプション」選択
  2. 内容入力」に先コピーした、Googleマップコードを張り付けして完了

各記事リストの設定

次は各記事リストの設定を修正します。TOPページだけで2か所あります。

※この作業はサイトコンセプトによって、どの記事を見せるか違うので自分のサイトに合わせて変えてください。

TOPページ、記事リスト

TOPページ記事リスト設定
  1. 記事を「マウス右ボタン」でクリックして「オプション」を開く
  2. 記事表示数」や「記事絞り込み」の設定をして完了

※以下同じ感じて設定してください。イメージで場所のみ表示します。

記事リスト2

コピーライトの設定

コピーライト設定例
  1. サイトの下までスクロールする
  2. 「コピーライト」を「マウス右ボタン」でクリックして、「オプション」選択
  3. テキスト入力」に自分のサイトに合わせてコピーライトを入力して完了

修正したデザインを公開する

各修正が終わったら、サイトを保存して公開します。

デザイン公開
公開メッセージ
公開完了
  1. 緑色の文字の「公開中」をクリック
  2. メッセージが表示されたら「はい」をクリック
  3. 「公開中」が緑塗になり、下の名前が「公開したいデザイン名」に変わったら完了

※「デザイン設定がありません」とエラーが表示される場合は、保存してから再度公開してください。

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

オフィシャル7

オフィシャル7

「DG-STYLE」で提供しているテンプレートの「オフィシャル7」の設定方法について説明します。オフィシャル7 TOPデ

2021-06-21
ブログ6

ブログ6

「DG-STYLE」で提供しているテンプレートの「ブログ6」の設定方法について説明します。ブログ6TOPデザイン記事を強

2021-01-27
オフィシャル6

オフィシャル6

「DG-STYLE」で提供しているテンプレートの「オフィシャル6」の設定方法について説明します。オフィシャル6TOPデザ

2020-12-29
オフィシャル5

オフィシャル5

「DG-STYLE」で提供しているテンプレートの「オフィシャル5」の設定方法について説明します。オフィシャル5TOPデザ

2020-12-06
オフィシャル3

オフィシャル3

「DG-STYLE」で提供しているテンプレートの「オフィシャル3」の設定方法について説明します。オフィシャル3TOPデザ

2020-11-17
オフィシャル2

オフィシャル2

「DG-STYLE」で提供しているテンプレートの「オフィシャル2」の設定方法について説明します。オフィシャル2TOPデザ

2020-11-17
TOP