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

ワードプレス Diviの使い方７ 写真を文字の形に切り抜く方法

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop...

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

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

Diviモジュールの設定方法８ トグルとアコーディオン

今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。 Diviモジュールの設定方法８...
divi-lesson8-2-logo

ワードプレス Divi の使い方８ 外観のカスタマイズ２ サイトの文字の大きさを変える

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方８ 外観のカスタマイズ２...
divi-lesson4-logo

ワードプレス Diviの使い方４ 背景設定と新機能 Dividers

Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「...
divi-lesson3-3-logo

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

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

Pin It on Pinterest