ある団体のホームページ(Cocoon wordpress)を運営していますが、各部の新着記事を表示するため、まとめサイトでRSSを使っています。
RSSにはWordpressプラグイン「Feedzy RSS Feeds Lite」を使っていますが、デフォルト項目の表示順が
①サムネイル、②タイトル、③日付(投稿・更新) となっているため
cssで
①サムネイル、②日付(投稿・更新)、③タイトル の順に変更しました。
/************************************
** ●プラグイン Feedzy RSS Feeds Lite カスタマイズ
************************************/
.feedzy-rss .rss_item {
margin: 0px 13px 5px 20px;
padding: 0 10px 17px 0px;
border-bottom: 2px dotted #ddd;
list-style: none;
display: flex;
flex-direction: column;
}
.feedzy-rss .rss_item .title {
font-weight: bold;
order: 3; /* タイトル項目を一番下に表示 */
}
.feedzy-rss .rss_item .title a {
display:flex;
justify-content: flex-start;
font-weight: normal;
font-size: 16px;
color: #666;
line-height: normal;
margin-left: 50px;
margin-bottom: 5px
}
.feedzy-rss .rss_item .rss_content small {
display:flex;
justify-content: flex-start;
font-size: 14px;
font-style: normal;
margin-left: 50px;
color: #007b43;
}
.feedzy-rss .rss_item .rss_image {
margin: 1.6em 0.8em 0 0;
position: absolute;
}
.feedzy-rss .rss_item:hover{ /* ホバー時の背景 */
background-color: #eaeaea;
border-radius: 6px;
transition: all 0.8s ease;
}