Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法

Before&After:Diviポストスライダーモジュール

エレガント ThemesのDiviテーマは全体文または特定のカテゴリ文をスライダー形式で表示するポストスライダー(投稿スライダー)モジュールを提供しています。

基本ポストスライダーは、比較的シンプルな形です。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法16
Diviの基本記事のスライダー

この記事では、これらの基本的な記事のスライダーのスタイルを Facebookのニュースルーム(Newsroom)ブログページで使用されているスライダー形式で変更する方法について説明します。

最終的には、次のようなスタイルで投稿スライダーが変わります。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法17基本スライダーよりレイアウトが好きなりましたね。 実際の動作(デモ)を ここで確認することができます。

Diviポストスライダースタイルを変更する

まず、ページに Post Sliderモジュールを追加するようにします。 標準セクションを選択して、 投稿スライダー(Post Slider) モジュールを追加します。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法18Diviテーマでポストスライダーを使用する簡単な方法は」エレガント ThemesのDiviテーマでポストスライダーを使用する"文を参照してください。

投稿スライダーを追加すると、設定画面が表示されます。 これから一つずつ設定してみましょう。 ちなみにスクリーンショットは便宜上 Elegant Themesが提供するスクリーンショットを利用しました。 Diviテーマの場合、ハングル翻訳があまり良くないので、ハングル言語ファイルは削除するのが良いようです。

Content(コンテンツ)]タブ

ポストの数を適切に設定して Use Post Excerpt if Defined(定義されている場合の記事を引用使用)有りに設定します。 そして Automatic Excerpt Length(自動引用長)を適切に指定します。 ハングルでは180よりも少し短く設定することになります。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法19

Design(デザイン)タブ

続いて Design(デザイン) タブをクリックします。

Background Overlay Color(背景オーバーレイ色)を白(#ffffff)に変更します。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法20Dot Nav Custom Color(Dot Navユーザー定義の色)を#576d90に変更します。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法21Text Color(文字色)をDarkに変更します(日本語ファイルは 暗いですが」暗い」に翻訳されています)。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法22Header Font(ヘッダフォント) 濃く(bold)に設定して Header Font Size(ヘッダフォントサイズ)を34pxに設定します。 そして Header Text Color(ヘッダフォント色)を#3b5998で、 Header Line Height(ヘッダ行の高さ)を42pxに指定します。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法23Body Text Color(本文フォント色)を#141924に設定し、 Body Line Height(本文行の高さ)を24pxに指定します。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法24Use 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)です。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法25ちなみにこの部分はハングル翻訳がとても変です。 」ボタン「この」バー「に翻訳されているようです。ハングルUIを使用している場合は参考にしてください。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法26Advanced(詳細)]タブ

これで、モジュール設定の上部に「Advanced(詳細)"タブをクリックします。CSS IDに"fb-post-slider"を入力します。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法27今CSSコードを次のように追加します。

Before(前):

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法28Main 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の投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法17サンプルを ここで確認することができます。

最後に、

Diviテーマでポストスライダーのレイアウトを変更すること、思ったより簡単ではないが、ゆっくりと応じてみると、比較的簡単にできることです。 このようなスライダーを別のモジュールで作っていてくれればいいんじゃないかと思いますね。

Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法30

メモ:


コメントを残す

*メールアドレスは公開されません。