COCOONの人気記事ウィジェットは、新着記事ウィジェットと形が一緒なので、ウィジェットを並べると統一感があります。
ただ、アイキャッチ画像がたくさんになってしまうと、少し見づらく感じるかもしれません。
画像が多すぎるから
もう少しシンプルにしたい！
そこで、人気記事の画像を消して、こちらのような見た目にカスタマイズしてみました。
CSSを貼るだけで、人気記事の一覧を画像を消してシンプルなリストのように並べられますよ！
COCOONの人気記事ウィジェットを文字だけにする方法
デフォルトの状態のCOCOONの人気ウィジェットは、こちらのような表示です。
人気記事ウィジェットのカスタマイズは、「.entry-header .popular-entry-card」の周辺を指定してカスタマイズしていきます。
人気記事ウィジェットのアイキャッチ画像を消すCSS
このCSSをコピペで貼り付けると、COCOONの人気記事ウィジェットのアイキャッチ画像を削除できます。
| .entry-header .popular-entry-card-thumb { display: none; } |
このままでは記事タイトルの位置はそのままの状態で、画像のみが非表示になっています。
そのため、CSSで記事タイトルの位置を指定して、調節しましょう。
位置を指定して下線を付けるCSSはコピペできるように、次のページでご紹介させていただきます。
コピペだけで済ませたい方は、ぜひ参考にされてくださいね！
コメント