高機能有料テーマ「Avada」を使ってみる Vol.05

トップページに新着の記事を少し並べてみたがFusion Blog Grid Layoutって…

あっさりとしていて、それはそれで良いのだがもう一つデザイン要素を追加したい。
で、テーマオプションなどを色々と触ってみたのだがいまいち痒いところに手が届かない。
そこで、次のスタイルを追加した。

.fusion-blog-layout-grid .post .flexslider, .fusion-blog-layout-grid .post .fusion-content-sep, .fusion-blog-layout-grid .post .fusion-post-wrapper, .fusion-blog-layout-timeline .fusion-timeline-date, .fusion-blog-layout-timeline .fusion-timeline-line, .fusion-blog-layout-timeline .post, .fusion-blog-layout-timeline .post .flexslider, .fusion-blog-layout-timeline .post .fusion-content-sep, .fusion-blog-timeline-layout .post, .fusion-blog-timeline-layout .post .flexslider, .fusion-blog-timeline-layout .post .fusion-content-sep, .fusion-events-shortcode .fusion-events-thumbnail, .fusion-events-shortcode .fusion-layout-column, .fusion-portfolio.fusion-portfolio-boxed .fusion-content-sep, .fusion-portfolio.fusion-portfolio-boxed .fusion-portfolio-content-wrapper, .product .fusion-content-sep, .product-buttons, .product-buttons-container, .products li
.fusion-blog-layout-grid{
   -moz-border-radius: 10px;    /* 古いFirefox */
   -webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px !important;         /* CSS3 */
border:none !important;     /* 線の存在自体を不必要にする */
border-color:rgba(0,0,0,0.0) !important;     /* なおかつ線は透明（線の色をつけたい場合は上記border要素を削除） */
}

.fusion-blog-layout-grid .fusion-content-sep{
margin-top:0px !important;
margin-bottom:-30px !important;
padding-top:0px !important;
}

.fusion-blog-layout-grid .fusion-post-content-container{
margin-top:0px !important;
padding-top:0px !important;
}

 /* blogのグリッドレイアウトのアイキャッチのみデザインを変更 */
.fusion-blog-layout-grid .fusion-image-wrapper{
   -moz-border-radius: 10px;    /* アイキャッチを角丸：古いFirefox */
   -webkit-border-radius: 10px; /* アイキャッチを角丸：古いSafari,Chrome */
border-radius: 10px !important;         /* アイキャッチを角丸：CSS3 */
}

.fusion-blog-layout-grid .post .flexslider, .fusion-blog-layout-grid .post .fusion-content-sep, .fusion-blog-layout-grid .post .fusion-post-wrapper, .fusion-blog-layout-timeline .fusion-timeline-date, .fusion-blog-layout-timeline .fusion-timeline-line, .fusion-blog-layout-timeline .post, .fusion-blog-layout-timeline .post .flexslider, .fusion-blog-layout-timeline .post .fusion-content-sep, .fusion-blog-timeline-layout .post, .fusion-blog-timeline-layout .post .flexslider, .fusion-blog-timeline-layout .post .fusion-content-sep, .fusion-events-shortcode .fusion-events-thumbnail, .fusion-events-shortcode .fusion-layout-column, .fusion-portfolio.fusion-portfolio-boxed .fusion-content-sep, .fusion-portfolio.fusion-portfolio-boxed .fusion-portfolio-content-wrapper, .product .fusion-content-sep, .product-buttons, .product-buttons-container, .products li

.fusion-blog-layout-grid{

-moz-border-radius: 10px; /* 古いFirefox */

-webkit-border-radius: 10px; /* 古いSafari,Chrome */

border-radius: 10px !important; /* CSS3 */

border:none !important; /* 線の存在自体を不必要にする */

border-color:rgba(0,0,0,0.0) !important; /* なおかつ線は透明（線の色をつけたい場合は上記border要素を削除） */

}

.fusion-blog-layout-grid .fusion-content-sep{

margin-top:0px !important;

margin-bottom:-30px !important;

padding-top:0px !important;

}

.fusion-blog-layout-grid .fusion-post-content-container{

margin-top:0px !important;

padding-top:0px !important;

}

/* blogのグリッドレイアウトのアイキャッチのみデザインを変更 */

.fusion-blog-layout-grid .fusion-image-wrapper{

-moz-border-radius: 10px; /* アイキャッチを角丸：古いFirefox */

-webkit-border-radius: 10px; /* アイキャッチを角丸：古いSafari,Chrome */

border-radius: 10px !important; /* アイキャッチを角丸：CSS3 */

}

単純にChromeで対応したCSSを調べ、まんま追加したい要素のみ足してみた。
何を足したかはCSSのコメントに追加。

注意すべきは、例えば画像の角丸であればどの要素の画像に対して角丸にするかをしっかり書くこと。
でなければ、「fusion-image-wrapper」で指定された多くの要素がかってに角丸になってしまう。

今回は「fusion-blog-layout-grid」の「fusion-image-wrapper」だけを角丸にした。
なので、

.fusion-blog-layout-grid .fusion-image-wrapper{〜

1	.fusion-blog-layout-grid .fusion-image-wrapper{〜

のようにクラスを指定している。
一応…これで思った通りに表示してくれている。