記事一覧のカードを無理やり丸くしてみた

cocoon

WordPressで人気の無料テーマCOCOONの記事一覧の記事カードを無理やり丸くしてみたよ。

注意:『縦型カード3列』を選択した場合のカスタマイズです。

まず、タイトルを編集するにはCSSを追加してあげる必要があります。

「ダッシュボード」の左にある「外観」の「カスタマイズ」をクリックします。

ページが移動したら「追加CSS」をクリックします。

画像に alt 属性が指定されていません。ファイル名: 追加CSS.png

CSSは以下の画像の「ここに入力していきます。」に書いていきます。

画像に alt 属性が指定されていません。ファイル名: 追加CSS2.png

書き方は簡単!以下のコードをそのままコピペ!!

/*記事カード画像を丸くする*/
@media (min-width:1270px)
{
.entry-card-thumb-image{
height:260px;
}
}
@media screen and (min-width:1030px) and ( max-width:1270px) {
.entry-card-thumb-image{
height:18vw;
}
}
@media screen and (min-width:830px) and ( max-width:1030px) {
.entry-card-thumb-image{
height:27vw;
 }
}
@media (max-width:843px) {
.entry-card-thumb-image{
height:43vw;
 }
main.main, div.sidebar {
padding: 10px 5px;
}
}
@media (max-width:480px) {
.ect-vertical-card .entry-card-wrap
.entry-card-thumb{
margin-bottom:10px;
}
}

/*全体に適応*/
.main{
padding:10px 10px;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
border-radius:50%;
}
.cat-label{
position: static;
padding:3px 5px;
}
.entry-card-snippet{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /*記事カードの記事内容の行数指定*/
}

コードの下から2行目は記事カードの記事内容の行数の指定です。(画像参照)

※スマホ等の幅の狭い端末には記事内容は表示されません。(cocoon仕様)

その他のカスタマイズ

■ 記事内容を表示したくない場合 .entry-card-snippetを書き換えます。

.entry-card-snippet{
display:none;
}

コメント