今回は Diviの各種モジュールのうちから「投稿タイトル」と「投稿ナビゲーション」のモジュールの使い方について、Divi初心者向けに図解したいと思います。

Divi モジュールの使い方7 投稿タイトルと投稿ナビゲーション

ここでは画像モジュールと広告モジュールに固有の設定について図解します。各モジュール設定のうち、デザイン設定の共通項については下記を参照ください

https://websvr.org/matome/wordpress-divi-design/

1.投稿タイトルを利用する

「投稿タイトル」はページの好きなところに投稿タイトルやアイキャッチ画像等を表示させることができます。

1)投稿タイトルモジュールを追加する

add-new-module「新たなモジュールを追加」をクリックし、
「投稿タイトル」をクリックします。

初期設定では、タイトルと執筆者などのメタ情報とアイキャッチ画像が表示されます。

2)投稿タイトルモジュールのコンテンツ設定

投稿タイトルモジュールではコンテンツに下記を設定できます。

  • 要素
  • リンク
  • 背景
  • Adminラベル
(1) 要素

要素では、何を表示させるのかを簡単に選ぶことができるようになっています。

  • タイトルを表示する:
  • メタ情報表示:
  • 投稿者を表示する:
  • 日付を表示する:
  • 日付形式:
  • 投稿カテゴリーを表示:
  • コメント数を表示:
  • 注目画像を表示:アイキャッチ画像のこと
  • 特集画像配置:アイキャッチ画像の表示場所
(2) リンク
  • モジュールリンクURL:
  • モジュールリンクターゲット:

3)投稿タイトルのデザイン設定

投稿タイトルモジュールではデザインで下記を設定できます。

  • テキスト:
  • タイトルテキスト:
  • メタ情報テキスト:
  • サイズ変更:
  • 余白:
  • 境界:
  • ボックスシャドウ:
  • フィルター:
  • 変換する:
  • アニメーション:

4)投稿タイトルの詳細設定

投稿タイトルモジュールでは詳細設定で下記を設定できます。

  • CSSIDとクラス:
  • カスタムCSS:
  • 表示/非表示:
  • トラジション:

2.投稿ナビゲーションを利用する

「投稿ナビゲーションモジュール」は投稿ページを前後に移動させるナビゲーションを表示させたいときに使用します。

1)投稿ナビゲーションモジュールを追加する

add-new-module「新たなモジュールを追加」をクリックし、
「投稿ナビゲーション」をクリックします。

サイトに下記のようなナビゲーションを追加できます。

2)投稿ナビゲーションモジュールのコンテンツ設定

投稿ナビゲーションモジュールではコンテンツに下記を設定できます。

  • テキスト:
  • カテゴリ:
  • ナヴィゲーション:
  • 背景:
  • Adminラベル:
(1) テキスト

テキストでは、ナビゲーションの文字を変更できます。空白にすると自動で記事のタイトルが設定されます。

  • 前のリンク:
  • 次のリンク:
(2) カテゴリ
  • カテゴリ:カテゴリ内の移動とするかどうかを設定
  • カスタム分類名:カテゴリーを指定したいときに入力
(3) ナヴィゲーション(ナビゲーション)
  • 以前の投稿リンクを隠す:前へを隠す
  • 次の投稿リンクを隠す:次へを隠す

2)投稿ナビゲーションモジュールのデザイン設定

投稿ナビゲーションモジュールではデザインで下記を設定できます。

  • リンクテキスト:
  • サイズ変更:
  • 余白:
  • 境界:
  • ボックスシャドウ:
  • フィルター:
  • 変換する:
  • アニメーション:

4)投稿ナビゲーションモジュールの詳細設定

投稿ナビゲーションモジュールでは詳細設定で下記を設定できます。

  • CSSIDとクラス:
  • カスタムCSS:
  • 表示/非表示:
  • トラジション:

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

Diviのモジュールの使い方6 アクションの呼び出しとボタン

今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います。Diviの使い方10 モジュールの使い方6...

Diviの使い方10 モジュールの利用1 画像 と 広告

今回は Divi の各種モジュールのうちから、画像モジュールと広告モジュールについて図解したいと思います。画像モジュールと広告モジュール Diviの使い方10-1...
divi-lesson3-2-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成2

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson3-3-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

今回は Divi のレイアウトライブラリを使ったサイト( Webページ...

Pin It on Pinterest