Before＆After：Diviポストスライダーモジュール
エレガント ThemesのDiviテーマは全体文または特定のカテゴリ文をスライダー形式で表示するポストスライダー（投稿スライダー）モジュールを提供しています。
基本ポストスライダーは、比較的シンプルな形です。
この記事では、これらの基本的な記事のスライダーのスタイルを Facebookのニュースルーム（Newsroom）ブログページで使用されているスライダー形式で変更する方法について説明します。
最終的には、次のようなスタイルで投稿スライダーが変わります。
基本スライダーよりレイアウトが好きなりましたね。 実際の動作（デモ）を ここで確認することができます。
Diviポストスライダースタイルを変更する
まず、ページに Post Sliderモジュールを追加するようにします。 標準セクションを選択して、 投稿スライダー（Post Slider） モジュールを追加します。
Diviテーマでポストスライダーを使用する簡単な方法は」エレガント ThemesのDiviテーマでポストスライダーを使用する"文を参照してください。
投稿スライダーを追加すると、設定画面が表示されます。 これから一つずつ設定してみましょう。 ちなみにスクリーンショットは便宜上 Elegant Themesが提供するスクリーンショットを利用しました。 Diviテーマの場合、ハングル翻訳があまり良くないので、ハングル言語ファイルは削除するのが良いようです。
Content（コンテンツ）]タブ
ポストの数を適切に設定して Use Post Excerpt if Defined（定義されている場合の記事を引用使用）를 はいに設定します。 そして Automatic Excerpt Length（自動引用長）を適切に指定します。 ハングルでは180よりも少し短く設定することになります。
Design（デザイン）タブ
続いて Design（デザイン） タブをクリックします。
Background Overlay Color（背景オーバーレイ色）を白（#ffffff）に変更します。
Dot Nav Custom Color（Dot Navユーザー定義の色）を＃576d90に変更します。
Text Color（文字色）をDarkに変更します（日本語ファイルは 暗いですが」暗い」に翻訳されています）。
Header Font（ヘッダフォント） 濃く（bold）に設定して Header Font Size（ヘッダフォントサイズ）を34pxに設定します。 そして Header Text Color（ヘッダフォント色）を＃3b5998で、 Header Line Height（ヘッダ行の高さ）を42pxに指定します。
今 Body Text Color（本文フォント色）を＃141924に設定し、 Body Line Height（本文行の高さ）を24pxに指定します。
Use Custom Styles for Button을 はいに変更します。 Button Text Sizeを16pxに、 Button Borderを0pxに、 Button Hover Text Colorを＃666666に変更します。 そして Button Hover Background Colorをrgba（0,0,0,0）です。
ちなみにこの部分はハングル翻訳がとても変です。 」ボタン「この」バー「に翻訳されているようです。ハングルUIを使用している場合は参考にしてください。
Advanced（詳細）]タブ
これで、モジュール設定の上部に「Advanced（詳細）"タブをクリックします。CSS IDに"fb-post-slider"を入力します。
今CSSコードを次のように追加します。
Before（前）：
position:absolute; top:57px; right:-6px; content:""; border:4px solid transparent; border-top-color:#2C477F; border-left-color:#2C477F;
Main Element（ガソリンスタンド）：
border-radius: 3px; border:1px solid #dedede;
After（後）：
position:absolute; top:25px; right:-7px; display:block; content:"Top Stories"; color:#F9F4F7; background-color:#4573CC; padding:4px 15px; border-radius:2px; z-index:2!important;
Slide Description（スライドの説明）：
min-height:460px; width: 35%; min-width: 300px; float:left; padding: 57px 45px 50px 35px!important; font-family: 'Alegreya Sans', sans-serif; text-align:left;
Slide Title（スライドのタイトル）：
font-family: 'Alegreya Sans', sans-serif;
Slide Button（スライドボタン）：
padding:0!important; margin-top:0;
Slide Controllers（スライドコントローラ）：
margin-bottom:-55px;
Slide Arrows（スライド矢印）：
color:#ffffff!important; background-color:rgba(0,0,0,.4); font-weight:bold; border-radius:2px; -ms-transform: scale(1.2, 2.5); /* IE 9 */ -webkit-transform: scale(1.2, 2.5); /* Safari */ transform: scale(1.2, 2.5);
今モーダルウィンドウの右下にあるチェックボックスをクリックして、モジュールの設定を保存します。
ユーザーカスタムCSS
次に行うことは、CSSコードを追加して、スライドのレイアウトを調整する必要があります。
まず、背景画像のサイズと位置、そしてスライダーテキストとオーバーレイの位置を調整します。 次のCSSコードを WordPress 伝言板のDivi>テーマオプション> General>ユーザーカスタムCSSボックスに追加します。
#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
background-size: 70%;
background-position: top right;
padding-left: 0;
overflow: visible!important;
}
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
width: 30%;
min-width: 300px;
}
今の日付を除くポストメタを隠し日付を書かタイトルの上に移動させることです。 次のコードを上記のコードのすぐ下に入力するようにします。
#fb-post-slider .et_pb_slide_content .post-meta {
height: 0px;
overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
position: absolute;
top: 32px;
left: 35px;
color: #898f9c;
font-size: 16px
}
ポストスライダーモジュールにマウスを置くと、以前の矢印と矢印が表示されます。 Facebook Newsroomスライダーでは、次の矢印のみです。 以前の矢印が表示されないようにするには、上記入力されたコードに続いて、次のCSSコードを追加します。
#fb-post-slider .et-pb-arrow-prev {
display: none
}
今、次のコードを使用して点状のナビゲーションアイコンをスライダーの下に移動させて位置を調整する必要があります。
#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
height: 8px;
width: 8px;
order-radius: 50%
}
#fb-post-slider.et_pb_slider {
overflow: visible!important
}
最後に、スライダーのアニメーションを変更してモデルにした Facebook ニュースルームスライダーにもう少し同様作成するようです。 全く同じではありませんが、jQueryを使用せずに可能な限り同様に見えるようにすることです。 （jQueryを使用すると、サイトの速度を低下させるため、あまりお勧めできません。）
.et-pb-active-slide .et_pb_slide_description {
animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
transition: opacity 2.5s!important
}
@media all and (max-width: 1252px) {
#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
background-size: 90%
}
}
@media all and (max-width: 980px) {
#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
background-size: 100%;
background-position: top center;
}
}
これですべて完了しました。 ページを更新してみると次のようにスライダーが表示されます。
サンプルを ここで確認することができます。
最後に、
Diviテーマでポストスライダーのレイアウトを変更すること、思ったより簡単ではないが、ゆっくりと応じてみると、比較的簡単にできることです。 このようなスライダーを別のモジュールで作っていてくれればいいんじゃないかと思いますね。
コメントを残す