カスタムテンプレートとデザインをDiviのブログ投稿フォーマットに追加する方法（パート3/3）

公開: 2017-05-04

Diviのブログ投稿フォーマットにカスタムスタイルを追加する方法に関するシリーズの最終日である3日目の3日目へようこそ。 デフォルトでは、Diviには、標準、ビデオ、オーディオ、見積もり、ギャラリー、リンクの6つのブログ投稿形式が付属しています。 このシリーズでは、phpとcssを使用してそれらをカスタマイズする方法を説明します。

今日は、Diviのブログ投稿フォーマットにカスタムテンプレートとスタイルを追加する方法に関するシリーズの最終日です。シリーズのこの最後の日はデザインに捧げられます。 single.phpをカスタマイズし、子テーマをアクティブにすると、ブログ投稿フォーマットにスタイルを追加する準備が整います。

それぞれに独自のデザインタッチを追加しながら、6つの投稿フォーマットすべてについて説明します。このチュートリアルの終わりまでに、Diviに付属しているデフォルトのブログ投稿形式に代わる6つの見栄えの良い選択肢ができあがります。

また、さまざまな投稿形式の注目要素を表示する非常にユニークなブログページもあります。たとえば、リンク形式では、注目の画像のサムネイルの代わりにカスタムリンクボックスが表示されます。ギャラリー形式の投稿では、注目の画像のサムネイルの代わりに、ギャラリー画像の画像スライダーが表示されます。等々。

これは、今日のチュートリアルの後のブログページの外観です（下のgifのグリッドレイアウトでDiviブログモジュールを使用しています）。

始めましょう。

テーマカスタマイザでの一般的なデザイン設定の設定

まず、テーマカスタマイザーを使用していくつかの一般的なスタイルの変更を行う必要があります。 WordPressダッシュボードから、Divi→テーマカスタマイザー→一般設定→レイアウト設定に移動し、以下を変更します。

ウェブサイトの側溝の幅： 2
[カスタムサイドバー幅を使用する]をオンにします
サイドバーの幅： 30

また、[テーマカスタマイザー]で、[配色]に移動し、[オレンジ]を選択します。

それでは、これまでの標準的な投稿がどのようになっているのかを見てみましょう。

お分かりのように、それでもいくつかのスタイリングが必要ですが、すべてが適切な場所にあります。ページの全幅にまたがるヒーローセクションがあります。注目の画像がまだないため、背景には、以前にsingle.phpファイルに追加したグラデーションのみが表示されます。また、投稿のタイトルとメタはヒーローセクション内にあります。次に、残りのデザイン要素を追加します。

すべての投稿フォーマットのヒーローセクションのスタイリング

各投稿フォーマットは同じヒーローセクションとサイドバーデザインを共有するため、最初にこのカスタムCSSを追加できます。テーマカスタマイザーに戻り、下部にある[追加のCSS]をクリックして、次のカスタムCSSを追加します。

.hero-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	max-height: 450px;
	background-color: #333;
}

.single-post #main-content #left-area {padding-top: 0px;}

/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}

/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}

 @media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
 }

次に、標準の投稿がどのように表示されるかを確認します。

ヒーローセクションとサイドバーのスタイリングが整ったら、個々の投稿フォーマットをスタイリングする準備が整います。

標準の投稿フォーマットのスタイリング

標準の投稿形式は、すべてのブログ投稿のデフォルトの形式です。投稿を編集するときに、標準の投稿形式を選択できます。

この標準フォーマットで行うのは、注目の画像を追加することだけです。この注目の画像は画面の幅全体に広がるため、2000 x600の画像を使用することをお勧めします。unsplash.comの画像を使用しています。

注目の画像を追加したら、標準の投稿がどのように表示されるかを確認してください。

ビデオ投稿フォーマットのスタイリング

ビデオ投稿フォーマットのスタイルを設定するには、投稿にビデオフォーマットが選択されていることを確認してください。

次に、動画のURLまたは埋め込みをコンテンツに追加します。ビデオフォーマットは、最初のビデオURL、ビデオタグ、または埋め込みを取得して、投稿コンテンツの上部に表示します。このビデオは、ブログページの注目の画像も置き換えます。

この例では、YouTubeビデオのURLを使用しています。

2000 x600の注目画像を投稿に追加します。

次に、注目の動画にスタイルを追加して、動画に白い境界線を付け、ヒーローセクションと重なって少し目立つように、少し高くします。

テーマカスタマイザ→追加のCSSに移動し、次のカスタムCSSを追加します。

/* ---- Format the Position of the Video Wrapper ---- */
 
@media only screen and (min-width: 980px) {
 /*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}

次に、新しいビデオ形式の投稿を確認してください。

または、この投稿を全幅にして、別の優れたデザインオプションにすることもできます。投稿を編集し、ページの右上にあるDivi投稿設定で全幅のページレイアウトを選択するだけです。

次に、全幅のビデオ形式の投稿を確認してください。

オーディオポストフォーマットのスタイリング

音声投稿形式の場合は、投稿に音声形式が選択されていることを確認してください。

2000 x600の注目画像を追加します。

次に、オーディオファイルを投稿に追加します。これは、.mp3、.m4a、.ogg、または.wavファイルにすることができます。オーディオファイルをメディアライブラリにアップロードし、3つの異なる方法（メディアプレーヤーの埋め込み、メディアファイルへのリンク、または添付ページへのリンク）で投稿に挿入できます。

これらの3つのオプションのいずれかが機能します。ただし、この例では、オーディオファイルに単純なURLを追加するだけです。 WordPressは、このオーディオURLを投稿の上部にあるメディアプレーヤーに変換します。

それでは、オーディオフォーマットの投稿を見てみましょう。

それは悪いことではありませんが、もっと良いかもしれません。オレンジ色のメディアプレーヤーの下に表示されている重複メディアプレーヤーを非表示にして、オレンジ色のメディアプレーヤーに背景画像を追加しましょう。

テーマカスタマイザ→追加のCSSに移動し、次のカスタムCSSを追加します。

/* ----- Add Background Image to the Audio Player &amp; Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
 }

/* ---- Hide the Duplicate Audio Player  ------ */ 
div#mep_1 {display: none;}

次に、画像を見つけてメディアギャラリーにアップロードします（約700 x 300である必要があります）。次に、URLをコピーして、「ここに画像のURLを入力してください」と表示されている上記のCSSに貼り付けます。

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

次に、新しいオーディオ形式の投稿を確認してください。

見積もり投稿フォーマットのスタイリング

見積もり投稿フォーマットについては、投稿に見積もりフォーマットが選択されていることを確認してください。

次に、2000 x600の注目画像を投稿に追加します。

見積もり形式では、ブロック見積もりのショートコードを使用して、カスタム見積もり表示を生成します。したがって、カスタム見積もりを表示するには、コンテンツにブロック見積もりを追加します。

今あなたの投稿をチェックしてください。

注目の引用ボックスを小さなCSSでカスタマイズして、背景画像と右上の大きな引用を付けましょう。

テーマカスタマイザ→追加のCSSに移動し、次のカスタムCSSを追加します。

/* ---- Add Background Image to the Quote Box ---- */
 
.et_quote_content {
 
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
 
}

/* ---- Add the Quotation Symbol to the Quote Box ---- */
 
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px; 
font-color: #fff;
content: "\201C" !important;
}

/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}

画像を見つけてメディアギャラリーにアップロードします（約700 x 300である必要があります）。次に、URLをコピーして、「ここに画像のURLを入力してください」と表示されている上記のCSSに貼り付けます。

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

次に、最終結果を確認します。

ギャラリー投稿フォーマットのスタイリング

ギャラリー投稿フォーマットの場合、投稿にギャラリーフォーマットが選択されていることを確認してください。

次に、2000 x600の注目画像を必ず追加してください。

ギャラリー投稿フォーマットを使用すると、メディアギャラリーから投稿コンテンツ内にギャラリーを作成できます。

投稿用のギャラリーを作成するには、最初に少なくとも6つの画像をメディアギャラリーにアップロードします。画像のサイズはさまざまですが、ギャラリーには画像をフルサイズに拡大するライトボックス効果があるため、約1200 x800の画像を作成できます。

次に、メディアギャラリーで画像を選択し、[ギャラリーの作成]を選択して、[新しいギャラリーの作成]ボタンをクリックします。

これで、コンテンツにギャラリーのショートコードが含まれているはずです。

このギャラリーは、3列幅のモザイクレイアウトで投稿に表示されます。ギャラリーはまた、ブログページの注目の画像をギャラリー画像のスライダーに置き換えます。

さあ、あなたの投稿をチェックしてください。

ギャラリーにCSSを追加して、ヒーローセクションと重なるように少し上げて、各画像の周囲の余白を変更してみましょう。

テーマカスタマイザ→追加のCSSに移動し、次のカスタムCSSを追加します。

/* ---- Position &amp; Style the Gallery to Overlap the Featured Image ---- */
 
@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
 
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important; 
background: #fff !important;
}

/* ---- Set Background Color, Margins &amp; Padding for the Gallery Image ---- */
 
.et_gallery_item { margin: 0 0 0 0 !important;}
 
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}

次に、最終結果を確認します。

リンク投稿フォーマットのスタイリング

リンク投稿フォーマットについては、投稿にリンクフォーマットが選択されていることを確認してください。

次に、2000 x600の注目画像を投稿に追加します。

リンク投稿フォーマットは、投稿の最初のリンクを取得し、ボックス内のコンテンツの上部に表示します。このカスタムリンク表示は、ブログページのこの投稿の注目画像のサムネイルにも置き換わります。

先に進み、投稿へのリンクを追加して、投稿のデザインを確認してください。

次に、カスタムリンクボックスに背景画像を追加し、リンクURLの左側にアイコンを追加して、デザインを少し改善しましょう。
テーマカスタマイザ→追加のCSSに移動し、次のカスタムCSSを追加します。

/* ---- Add thick border to the left side and Lower the link box ---- */

.et_link_content {
border-bottom: 8px solid #ddd; 
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059; 
border-radius: 25px; 
}

/* ---- Font Settings within the Link box ---- */

.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}

/* ---- Link Symbol on the right side ---- */
 
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px; 
color: #fff;
content: "\e02c";
}

/* ---- Position &amp; Style the Gallery to Overlap the Featured Image ---- */

@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}

次に、画像を見つけてメディアギャラリーにアップロードします（約700 x 300である必要があります）。次に、URLをコピーして、入力したCSSスニペットの「ここに画像のURLを入力してください」と表示されている場所に貼り付けます。

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

次に、投稿がどのように表示されるかを確認します。

それでおしまい！

すべての投稿フォーマットが設計されたので、ブログページで作成されるクールなレイアウトを確認します。さまざまな投稿フォーマットの注目アイテムがどのように表示されるかを確認できます。

注：デフォルトのエディターまたはDivi Builderを使用してブログを表示できますが、デザインは引き続き機能します。

レスポンシブ？

すべての投稿フォーマットは完全にレスポンシブで、すべてのデバイスでうまく機能します。画面サイズを縮小して変更すると、ギャラリー形式の投稿がどのように表示されるかの例を次に示します。

最終的な考え

おめでとうございます！これですべて完了です。ブログ投稿フォーマットのカスタマイズに関するこの3部構成のシリーズを楽しんでいただけたでしょうか。どちらかといえば、次のプロジェクトで持っていく価値のある何かを学んだことを願っています。チュートリアルが完了したので、ブログ投稿形式の独自のデザイン要素を自由に試してみてください。

以下にコメントを送信してください。あなたからの便りを楽しみにしています。