Diviテーマの全体の幅(Fullwith)ブログモジュールでサムネイルを左に移動させる方法

0

Diviテーマは、両方のブログのモジュールを提供しています。 多少単純面があるが、Elegant Themesで提供されるレイアウトパックに含まれているブログのページを活用すると、選択が幅が少し広がりそうです。

この記事では、Fullwidthブログモジュールを活用して、サムネイル(特性画像)を左に、要約文を右に配置する方法について説明します。

左のサムネイル、右に要約文が表示されるようにDiviブログモジュールを変更する

セクションとカラムを適当に作成し、 Insert Module(s)をクリックして、 Blog(ブログ) モジュールを追加します。

Diviブログモジュールを追加する

その後、Blogモジュールを設定する画面が表示されます。

Diviブログモジュールを変更する

Content(コンテンツ)]タブから Show Excerpt(抜粋示す)を選択します。 メタ項目(日付、作成者、カテゴリなど)のいずれかを選択するようにします。

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

Diviテーマのブログモジュールを変更する

レイアウトFullwidth(満杯幅)を選択します。

保存した後に WordPress 伝言板> Divi> Theme Options(テーマオプション)> General(一般)に移動し、一番下 Custom CSS(ユーザーカスタマイズCSS)次のコードを追加します。

/*------------------------------------------------*/
/*-------- Place Thumbnail Left and Excerpt Right ------------*/
/*------------------------------------------------*/

.et_pb_posts .et_pb_post a img,
.archive .et_pb_post a img,
.search .et_pb_post a img {
max-width: 210px!important;
float: left;
padding-right: 20px;}

.et_pb_post .entry-featured-image-url {
margin-bottom: 0px !important;
}

@media only screen and ( max-width: 1180px ) {
.et_pb_posts article .post-content {
width: 445px;
float: right;
}}

@media only screen and (max-width: 980px) {
.et_pb_posts .et_pb_post a img,
.archive .et_pb_post a img,
.search .et_pb_post a img{
float:none;
max-width: 250px!important;}}

次に上部のIntegration(統合)]タブに移動し、次のjQueryのスクリプトを追加します。

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et_pb_posts article").each(function(){
jQuery(">a:first-child", this).insertBefore(jQuery(".post-meta", this));
});
console.log("done");
});
</script>

保存した後のページを見てみると、次の図のようにサムネイルが左側に配置されて要約文を右に配置されている形式に変更されます。

Diviブログモジュールを変更する

CSSを利用して、read moreを右に移動させることができます。 ぎこちない部分があればCSSやjQueryを使用して適切に変更するようにします。

メモ:

コメントを残す

コメントを入力してください!
名前を入力してください