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-lesson5-logo

ワードプレス Diviの使い方５ Webサイトにアニメーションを設定する

Divi は Web...
divi-lesson1-logo

ワードプレステーマ Diviの使い方１ Diviとは？～インストールまで

WordPress（ワードプレス）のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、...

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

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

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

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

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

今回は一連の流れで、実際のサイト（ Webページ ）の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi...

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder...

Pin It on Pinterest