2週間前に投稿

WordPress Popular PostsをFlexbox表示してみる

2019年6月17日

この記事は約 4 分で読めます。

4.5

「 WordPress Popular Postsを
grid表示してみる 」という記事では
floatプロパティでサムネイルを
横並びに表示していますが、
今回は
Flexible Box Layoutを
試してみたいと思います。

Flexboxとは

Flexbox(Flexible Box Layout Module)とは
親要素に簡単な指示を記述することで、
複数の子要素について
さまざまなレイアウト調整ができる
CSS3の新しいレイアウトモジュールです。

結果を表示

見た目はfloatを使ったのと
変わらないのですが、
flex-direction プロパティを
row-reverse にして
サムネイルを右から左へ配置しています。

HTML Markup

HTMLマークアップは
以下を参照の事。
The HTML Markup

Flexboxのスタイル

.wpp-grid {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 margin: auto;
 padding: 0;
}

.wpp-grid li {
 position: relative;
 display: block;
 list-style: none;
 margin: 0;
 padding: 0;
 width: 33.333%;
}

.wpp-grid li .wpp-thumbnail {
 display: block;
 width: 100%;
 height: auto;
 border: 0;
}

.wpp-grid li .wpp-grid-overlay {
 position: absolute;
 display: block;
 top: 100%;
 right: 0;
 bottom: 0;
 left: 0;
 opacity: 0;
 transition: all .4s;
 background: rgb(0, 0, 0);
 background: rgba(0, 0, 0, 0.8);
}

.wpp-grid li:hover .wpp-grid-overlay {
 top: 0;
 opacity: 1;
}

.wpp-grid li a.wpp-post-title {
 color: #ff0000;
}

.wpp-grid li .wpp-post-title {
 position: absolute;
 display: block;
 top: 0;
 left: 0;
 opacity: 0;
 padding: 0 15px;
 width: 100%;
 line-height: 1em;
 text-align: center;
 transition: all .4s;
 box-sizing: border-box;
}

.wpp-grid li:hover .wpp-post-title {
 top: 50%;
 opacity: 1;
 transform: translateY(-50%);
}

.wpp-grid li .wpp-post-title:hover {
 color: #ffffff;
}

@media(max-width:768px) {
 .wpp-grid li {
  width: 50%;
 }
}

@media(max-width:480px) {
 .wpp-grid li {
  width: 90%;
 }
}

Reference

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
WordPress Popular PostsをFlexbox表示してみる

PluginsGrid Layout, Plugins, Short Code, WordPress

Posted by FOUR 4to6