人気記事ウィジェットを文字だけにする方法【COCOONカスタマイズ】

COCOONの人気記事ウィジェットの画像を非表示にして、文字タイトルだけを表示したいと思ったことはありませんか?そこで、シンプルなリスト形式で人気記事を表示できるカスタマイズのコピペで使えるCSSについてまとめています。

COCOONの人気記事ウィジェットは、新着記事ウィジェットと形が一緒なので、ウィジェットを並べると統一感があります。

ただ、アイキャッチ画像がたくさんになってしまうと、少し見づらく感じるかもしれません。

画像が多すぎるから

もう少しシンプルにしたい!

そこで、人気記事の画像を消して、こちらのような見た目にカスタマイズしてみました。

CSSを貼るだけで、人気記事の一覧を画像を消してシンプルなリストのように並べられますよ!

COCOONの人気記事ウィジェットを文字だけにする方法

デフォルトの状態のCOCOONの人気ウィジェットは、こちらのような表示です。

人気記事ウィジェットのカスタマイズは、「.entry-header .popular-entry-card」の周辺を指定してカスタマイズしていきます。

人気記事ウィジェットのアイキャッチ画像を消すCSS

このCSSをコピペで貼り付けると、COCOONの人気記事ウィジェットのアイキャッチ画像を削除できます。

.entry-header .popular-entry-card-thumb {
display: none;
}

このままでは記事タイトルの位置はそのままの状態で、画像のみが非表示になっています。

そのため、CSSで記事タイトルの位置を指定して、調節しましょう。

位置を指定して下線を付けるCSSはコピペできるように、次のページでご紹介させていただきます。

コピペだけで済ませたい方は、ぜひ参考にされてくださいね!

コメント