Diviヘッダーでブログ投稿カテゴリを視覚的に表示する方法

公開: 2020-07-15

グローバルヘッダーを作成するときは、ブログメニュー項目を含める可能性が高くなります。 Webサイトに多くのブログ投稿カテゴリがない場合は、1つのブログメニュー項目を選択するだけで十分な場合があります。ただし、さまざまなカテゴリのセットがあり、それぞれを強調表示する場合は、ドロップダウンメニュー内に各ブログカテゴリを視覚的に表示するなど、さまざまなアプローチを試すことをお勧めします。

このチュートリアルでは、Diviのテーマビルダーを使用してそれを行う方法を正確に示します。 Diviの組み込み要素とオプションを使用してドロップダウンメニューを作成し、それをいくつかのコードと組み合わせて、ブログメニュー項目内にドロップダウンメニューを配置できるようにします。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

ドロップダウン投稿カテゴリ

モバイル

ドロップダウン投稿カテゴリ

グローバルヘッダーを無料でダウンロード

無料のグローバルヘッダーを入手するには、まず下のボタンを使用してヘッダーをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

JSONファイルをアップロードする方法

上記でダウンロードできたzipフォルダーを解凍します。次に、WordPressWebサイト> Divi> Divi Libraryに移動し、JSONをアップロードします。

ドロップダウン投稿カテゴリ

レイアウトがDiviライブラリに保存されたら、Diviテーマビルダーに移動し、[グローバルヘッダーの追加]または[カスタムヘッダーの追加]をクリックして[グローバル/カスタムヘッダーの作成]を選択することにより、保存したレイアウトをインポートできます。 Diviライブラリの[保存したレイアウト]タブに移動し、前の手順でアップロードしたレイアウトを選択して、Diviテーマビルダーの変更をすべて保存します。

ドロップダウン投稿カテゴリ

すぐに機能するメニューを使用するには、以下のこのチュートリアルの最初の部分を実行する必要があります。個々のレベルのメニュー項目にCSSクラスを追加します。また、このチュートリアルのパート5に示すように、コードモジュール内のCSSクラスの1つを有効にする必要があります。

1.ブログメニュー項目にCSSクラスを追加します

外観のメニューに移動

このチュートリアルの最初の部分では、WordPressメニュー内のブログページメニュー項目に2つのカスタムCSSクラスを追加します。これを行うには、WordPressダッシュボード内のメニューに移動します。

ドロップダウン投稿カテゴリ

CSSクラスオプションを有効にする

ページの上部で、画面オプション内のCSSクラスオプションが有効になっていることを確認してください。

ドロップダウン投稿カテゴリ

ブログメニュー項目にCSSクラスを追加する

次に、ブログメニュー項目を見つけて、それに2つのCSSクラスを追加します。 CSSクラスの間にスペースを残してください。

CSSクラス：第1レベル第1レベル-1

ドロップダウン投稿カテゴリ

2.Diviのテーマビルダーを使用してカスタムヘッダーを作成します

Diviテーマビルダーに移動します

メニュー項目のCSSクラスが配置されたら、Diviに切り替えます。 Diviテーマビルダーに移動し、[グローバル/カスタムヘッダーの追加]を選択します。

ドロップダウン投稿カテゴリ

グローバルヘッダーの作成を開始します

次に、[グローバルヘッダーの作成]を選択して、テンプレートエディターにリダイレクトします。

ドロップダウン投稿カテゴリ

セクション設定

背景色

テンプレートエディタ内に、セクションがあります。そのセクションを開き、白い背景色を適用します。

背景色：#FFFFFF

ドロップダウン投稿カテゴリ

間隔

デザインタブに移動し、デフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

ドロップダウン投稿カテゴリ

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

ドロップダウン投稿カテゴリ

サイジング

モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
幅：95％
最大幅：100％

ドロップダウン投稿カテゴリ

間隔

次に、デフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

ドロップダウン投稿カテゴリ

メニューモジュールを行に追加

メニューを選択

次に、メニューモジュールを追加し、このチュートリアルの最初の部分で変更したメニューを選択します。

ドロップダウン投稿カテゴリ

ロゴをアップロード

次にロゴをアップロードします。

ドロップダウン投稿カテゴリ

メニューテキスト設定

[デザイン]タブに移動し、メニューテキストの設定を次のように変更します。

メニューフォント：Roboto Mono
メニューのフォントスタイル：大文字
メニューテキストの色：＃000000
メニューテキストサイズ：18px
メニューの文字間隔：-1px

ドロップダウン投稿カテゴリ

ドロップダウンメニューの設定

ドロップダウンメニューの線の色も変更します。

ドロップダウンメニューの線の色：#FFFFFF

ドロップダウン投稿カテゴリ

アイコン設定

次に、アイコン設定でハンバーガーメニューのアイコンの色を変更します。

ハンバーガーメニューアイコンの色：＃000000

ドロップダウン投稿カテゴリ

CSSクラス

そして、CSSクラスを追加してモジュール設定を完了します。

CSSクラス：カテゴリメニュー

ドロップダウン投稿カテゴリ

3.ブログのドロップダウンデザインを作成する

行＃2を追加

カラム構造

メニューモジュールを含む行が配置されたら、視覚的なブログカテゴリを含むドロップダウンメニューを作成します。これを行うには、2つの同じサイズの列を持つ新しい行を追加します。行全体がブログメニュー項目のドロップダウンメニューになります。

ドロップダウン投稿カテゴリ

背景色

行設定を開き、白い背景色を使用します。

背景色：#FFFFFF

ドロップダウン投稿カテゴリ

サイジング

[デザイン]タブに移動し、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：80vw（デスクトップ）、100％（タブレットと電話）
最大幅：50vw（デスクトップ）、100％（タブレットと電話）

ドロップダウン投稿カテゴリ

間隔

次に、パディング値を変更します。

トップパディング：10px
ボトムパディング：10px
左パディング：10px
ボトムパディング：10px

ドロップダウン投稿カテゴリ

ボックスシャドウ

微妙なボックスシャドウも使用しています。

ボックスシャドウブラー強度：30px
影の色：rgba（0,0,0,0.13）（デスクトップ）、rgba（0,0,0,0）（タブレットと電話）

ドロップダウン投稿カテゴリ

CSSクラス

次に、2つのCSSクラスを行に追加します。これらのCSSクラス（後でいくつかのコードと組み合わせて）は、行コンテナー全体をブログメニュー項目内にドロップダウンとして配置するのに役立ちます。

CSSクラス：dropdown-menu dropdown-menu-1

ドロップダウン投稿カテゴリ

ポジション

[詳細設定]タブに移動し、行の位置も変更します。

位置：絶対（デスクトップ）、相対（タブレットと電話）
場所：右上
垂直オフセット：100px（デスクトップ）、0px（タブレットと電話）
Zインデックス：11

ドロップダウン投稿カテゴリ

両方の列のメイン要素

最後になりましたが、各列のメイン要素に1行のCSSコードを追加して、行の設定を完了します。これにより、小さい画面サイズで列構造を維持できます。

width: 50% !important;

ドロップダウン投稿カテゴリ

列1にテキストモジュールを追加

カテゴリ名を追加

ブログのカテゴリを視覚的に表示する時が来ました！最初のテキストモジュールを列1に追加し、カテゴリタイトルをコンテンツボックスに追加します。

ドロップダウン投稿カテゴリ

カテゴリリンクを追加

次に、カテゴリへのリンクを追加します。

ドロップダウン投稿カテゴリ

グラデーションの背景

次に、次のグラデーションの背景を適用します。

色1：rgba（0,0,0,0.08）
色2：＃0a0a0a
開始位置：60％
終了位置：60％
背景画像の上にグラデーションを配置：はい

ドロップダウン投稿カテゴリ

背景画像

選択した背景画像をアップロードします。このチュートリアルとまったく同じ結果が必要な場合は、この投稿の冒頭でダウンロードできたフォルダーにあるイラストの1つをアップロードしてください。

背景画像サイズ：実際のサイズ
背景画像の繰り返し：繰り返しX（水平）

ドロップダウン投稿カテゴリ

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：Roboto Mono
テキストフォントの太さ：太字
テキストの色：#ffffff
テキストサイズ：1.9vw（デスクトップ）、3vw（タブレット）、3.5vw（電話）
テキスト文字の間隔：-0.1vw
テキスト行の高さ：1em

ドロップダウン投稿カテゴリ

サイジング

次に、サイズ設定を変更します。

幅：99％
モジュールの配置：左

ドロップダウン投稿カテゴリ

間隔

間隔の設定も変更します。

下マージン：10px
右マージン：1％（タブレットと電話）
トップパディング：60％（デスクトップ）、40％（タブレットと電話）
ボトムパディング：4％
左パディング：2％

ドロップダウン投稿カテゴリ

主な要素CSS

そして、モジュールのメイン要素に1行のCSSコードを追加して、モジュール設定を完了します。

cursor: pointer;

ドロップダウン投稿カテゴリ

テキストモジュールのクローンを作成し、列2に複製を配置します

最初のテキストモジュールが完成したら、モジュールのクローンを作成し、複製を列2に配置します。

ドロップダウン投稿カテゴリ

列2のテキストモジュールを変更する

カテゴリ名とリンクを変更する

複製モジュールのカテゴリタイトルとリンクを変更します。

ドロップダウン投稿カテゴリ

背景画像を変更する

背景画像も変更します。イラストはダウンロードフォルダにあります。

背景画像の繰り返し：繰り返しなし

ドロップダウン投稿カテゴリ

サイズを変更する

次に、サイズ設定でモジュールの配置を変更します。

モジュールの配置：右

ドロップダウン投稿カテゴリ

両方のモジュールのクローンを1回作成

両方のモジュール（各列に1つ）を完了すると、両方のモジュールを1回複製できます。

ドロップダウン投稿カテゴリ

カテゴリ名とリンクを変更する

重複するモジュール内のカテゴリ名とリンクを変更します。

ドロップダウン投稿カテゴリ

背景画像を変更する

背景画像と一緒に。新しいイラストは、この投稿の冒頭でダウンロードできたフォルダーにあります。

背景画像サイズ：フィット
背景画像の繰り返し：繰り返しなし

ドロップダウン投稿カテゴリ

背景画像サイズ：フィット
背景画像の位置：右下

ドロップダウン投稿カテゴリ

4.CSSとJQueryコードを追加します

行＃1のメニューモジュールの下にコードモジュールを追加します

ドロップダウンメニューのカテゴリ名を含む行が完成したら、セクションの最初の行のメニューモジュールのすぐ下にコードモジュールを追加します。

ドロップダウン投稿カテゴリ

CSSコードを追加する

次のCSSコード行をコードモジュールに追加します。

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

ドロップダウン投稿カテゴリ

JQueryコードを追加する

ブログメニュー項目内に、カテゴリを含む行を配置するのに役立ついくつかのJQuerycoeとともに。以下の印刷画面でわかるように、スクリプトタグの間にJQueryコードを配置してください。

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

ドロップダウン投稿カテゴリ

5.ブログのドロップダウンアイテムのカスタマイズが完了したら、CSSクラスを有効にします

すべてのドロップダウンアイテムのカスタマイズが完了したら、あと1つ、ドロップダウンメニューアイテムを含む行全体を非表示にする必要があります。これをコード内のロード関数と組み合わせると、ページのロード時にドロップダウンメニューが表示されなくなります。このCSSクラスを有効にすると、Visual Builder内に2番目の行は表示されなくなりますが、ワイヤーフレームモードでアクセスしたり、ドロップダウンメニューに変更を加えるときにCSSクラスを一時的に無効にしたりできます。クラスを有効にするには、CSSクラスの最初と最後にある「/ * * /」角かっこを削除します。

ドロップダウン投稿カテゴリ

6.投稿カテゴリのドロップダウンをさらに追加する

クローンブログカテゴリ行

カテゴリドロップダウンをさらに追加する場合は、作成したドロップダウン行全体のクローンを作成できます。

ドロップダウン投稿カテゴリ

レイヤーパネルで重複行にアクセスする

デスクトップでは絶対配置を使用しているため、行は互いに重なり合って配置されます。行に個別にアクセスするには、Divi Builder内のレイヤーパネルを開き、重複する行の設定を開きます。

ドロップダウン投稿カテゴリ

重複行CSSクラスの変更

重複する行の2番目のCSSクラスを変更します。使用している番号が連続していることを確認してください。

CSSクラス：ドロップダウンメニューdropdown-menu-2

ドロップダウン投稿カテゴリ

外観のメニュー項目にCSSクラスを追加する

次に、ダッシュボード内のWordPressメニューに戻り、次のCSSクラスを別のメニュー項目に追加します。これで完了です。

CSSクラス：第1レベル第1レベル-2

ドロップダウン投稿カテゴリ

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

ドロップダウン投稿カテゴリ

モバイル

ドロップダウン投稿カテゴリ

最終的な考え

この投稿では、Diviヘッダーとブログメニュー項目を使用してクリエイティブにする方法を紹介しました。具体的には、すべての画面サイズで見栄えのするドロップダウンメニュー項目としてブログカテゴリを視覚的に含める方法を示しました。このアプローチは、一目で最小限のルックアンドフィールを維持しながら、それぞれの異なるブログカテゴリを強調するのに役立ちます。 JSONファイルも無料でダウンロードできました！ご不明な点がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

Diviヘッダーでブログ投稿カテゴリを視覚的に表示する方法

プレビュー

デスクトップ

モバイル

グローバルヘッダーを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

JSONファイルをアップロードする方法

1.ブログメニュー項目にCSSクラスを追加します

外観のメニューに移動

CSSクラスオプションを有効にする

ブログメニュー項目にCSSクラスを追加する

2.Diviのテーマビルダーを使用してカスタムヘッダーを作成します

Diviテーマビルダーに移動します

グローバルヘッダーの作成を開始します

セクション設定

背景色

間隔

行＃1を追加

カラム構造

サイジング

間隔

メニューモジュールを行に追加

メニューを選択

ロゴをアップロード

メニューテキスト設定

ドロップダウンメニューの設定

アイコン設定

CSSクラス

3.ブログのドロップダウンデザインを作成する

行＃2を追加

カラム構造

背景色

サイジング

間隔

ボックスシャドウ

CSSクラス

ポジション

両方の列のメイン要素

列1にテキストモジュールを追加

カテゴリ名を追加

カテゴリリンクを追加

グラデーションの背景

背景画像

テキスト設定

サイジング

間隔

主な要素CSS

テキストモジュールのクローンを作成し、列2に複製を配置します

列2のテキストモジュールを変更する

カテゴリ名とリンクを変更する

背景画像を変更する

サイズを変更する

両方のモジュールのクローンを1回作成

カテゴリ名とリンクを変更する

背景画像を変更する

4.CSSとJQueryコードを追加します

行＃1のメニューモジュールの下にコードモジュールを追加します

CSSコードを追加する

JQueryコードを追加する

5.ブログのドロップダウンアイテムのカスタマイズが完了したら、CSSクラスを有効にします

6.投稿カテゴリのドロップダウンをさらに追加する

クローンブログカテゴリ行

レイヤーパネルで重複行にアクセスする

重複行CSSクラスの変更

外観のメニュー項目にCSSクラスを追加する

プレビュー

デスクトップ

モバイル

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。