jetpack関連記事とwordpress関連記事タイトルの修飾　⇒　STINGER8設定その13

修飾を合わせる

コンテンツエリアを見ると、jetpack関連記事とwordpress関連記事タイトルが手つかずになっている。

これをH2と同じフォーマットにする。

ついでに全てレスポンシブ対応にする。

レスポンシブ対応

H2などに掛けているcssを修正する。

レスポンシブ対応に。

h2,.menu_underh2,.point,h3.jp-relatedposts-headline{
border-left: solid 10px #fc0;
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-1x-600.jpg);
background-size:cover;
margin-top: 5em;
padding: 0.5em 2em 0.5em 1em;
color: white;
clear: both;
font-size: 18px !important;
}

タブレット

@media screen and (min-width: 600px) and (max-width: 961px) {
h2,.menu_underh2,.point,h3.jp-relatedposts-headline{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-2x-1200.jpg);
background-size:cover;
}
}

retina

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 601px), only screen and (min-resolution: 192dpi) and (max-width: 601px) {
h2,.menu_underh2,.point,h3.jp-relatedposts-headline{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-2x-1200.jpg);
background-size:cover;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 961px), only screen and (min-resolution: 192dpi) and (max-width: 961px) {
h2,.menu_underh2,.point,h3.jp-relatedposts-headline{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-4x-2400.jpg);
background-size:cover;
}
}

jetpack関連記事

jetpack関連記事の設定をする。

入れ子になっていて、かなりややこしい。

h3.jp-relatedposts-headline{
display: block !important;
float: none !important;
margin-top: 5em !important;
}
h3.jp-relatedposts-headline em:before{
display: none !important;
}

wordpress関連記事

wordpress関連記事の設定をする。

.point{
position: static !important;

}
.point-in{
padding: 0 !important;
margin: 0 !important;
color: white !important;
background-color: transparent !important;
display: block;
position: static !important;
}

こんなものかな。