ベストセラー人気 WordPress テーマTop 30 詳細

Elegant ThemesのDiviテーマでブログモジュールのサムネイルスタイルを変更する

Last Updated:2020年11月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

Diviテーマでブログモジュールのサムネイルスタイルを変更する

Diviテーマのブログモジュールでは、全体の幅(Full-width)とグリッド(Grid)二つのレイアウトを提供しています。 基本ブログモジュールが不足しているようです。 必要に応じてカスタマイズを介してレイアウトを変更することができます。

最も簡単な方法は、 前へで紹介したDivi Blog Extrasのようなプラグインを使用することです。 その後、様々なブログモジュールを使用することができます。

Elegant ThemesのDiviテーマでブログモジュールのサムネイルスタイルを変更する2

Divi Blog Extrasプラグインでは、次のようなスタイルのブログモジュールを提供しています。

Diviブログのプラグイン

この記事では、Full-widthレイアウトを少し応用して、左にサムネイルを配置し、右側に要約を表示する方法を説明します。

まずサムネイルを左に、要約を右に表示したい場合、次のCSSコードを使用するようにします。

.et_pb_post {
margin-bottom: 100px;
}
.et_pb_post a img {
height: auto;
float: left;
width: 200px;
left: 0;
margin-right: 14px;
margin-bottom: 10px;
}
@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:100%;
height: 300px;
}
}
// 출처: lhommedelecosse.com

インターネットに記載されているいくつかの方法の中で一番簡単な方法です。

参考までに基本的なブログモジュールのExcerpt長さが少し長い方です。 テーマソースを変更してExcerptの長さを調整することができます。

他の方法でCSSやjavascriptを使用して行数を調整することができます。 一部のIEのバージョンで正常に動作しない可能性がありますが、次のようなコードを使用してみることができます。

.ds-limit-excerpt .post-content p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 22px; /* fallback */
max-height: 66px; /* fallback */
-webkit-line-clamp: 3; /* number of lines to show, 표시할 라인 수 */
-webkit-box-orient: vertical;
}

ブログモジュールのCSSクラスで ds-limit-excerptを追加するようにします。 上記のコードは、 stackoverflowのに記載されているコードを応用したものです。 上記のコードでうまくいかないと、Googleを検索して、適切なjavascriptのコードを適用することができるようになります。

DiviテーマでのCSSコードは、Diviテーマオプションで提供されるユーザーカスタムCSS欄に追加します。 WordPress 管理者ページで Divi>テーマオプション>一般的なに移動すると、下部のユーザーカスタマイズCSSセクションがあります。

メモ:



コメントを残す

コメント