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

6月 18, 2019 | Diviの使い方, Divi関連

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

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

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

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

１．投稿タイトルを利用する

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

１）投稿タイトルモジュールを追加する

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

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

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

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

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

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

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

３）投稿タイトルのデザイン設定

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

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

４）投稿タイトルの詳細設定

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

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

２．投稿ナビゲーションを利用する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

divi-lesson8-3-logo

ワードプレス Diviの使い方８ 外観のカスタマイズ３ 色を変える方法

今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。Divi の使い方8 外観のカスタマイズ3 色を変える方法 ４．カラースキームでサイト全体の色を変える...
Divi-lesson9-logo

Divi レッスン９ テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...

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

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

Diviの使い方8 テーマのカスタマイズ4 追加CSS設定

Divi...

Diviの使い方10-5 お問い合わせフォームモジュールの利用方法

今回は Divi の各種モジュールのうちから、お問い合わせフォームモジュール（Contact Form）について図解したいと思います。 Diviの使い方10-5...
divi-lesson8-1-logo

Divi レッスン８ テーマのカスタマイズ１ 子テーマを作成する方法

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ（Divi Childe...

Pin It on Pinterest