アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css 新着情報

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

投稿日:2019年5月7日 更新日:

修飾を合わせる

コンテンツエリアを見ると、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;
}

こんなものかな。

-CMS, css, 新着情報
-, , ,

執筆者:

関連記事

怪しいものではありません。簡単にauケータイでテザリングができる「NEX-fi」

Amplify’d from www.gizmodo.jp なんと、auケータイでテザリングができる周辺機器「NEX-fi」が発売されました。モバイルデータ通信定額対応機種に、このNEX-fiを接続す …

WorldCard Mobile

WorldCard Mobileを入れた

名刺管理ソフトWorldCard Mobile 前々から気になっていたiPhoneアプリ「WorldCard Mobile」を導入してみた。 無料バージョンで試してみると、実に認識力が高い。 価格は1 …

MacBook Pro with Retina Display

MacBook Pro with Retina Displayを買うべきこれだけの理由

先日から話題となっているMacBook Pro with Retina Displayを注文した。 当初はMacBook Air 13″を購入しようと思っていたのだが、急遽変更した。 &n …

料理の写真を撮る

ソーシャルメディア全盛の今、レストランで写真を撮ることについて考えてみた

あちこちで食事の写真を撮っているのを見かけるようになった Facebookやtwitterが流行している現在、レストランなどに行くと出された料理をスマホで撮影している人をよく見かけるようになった。 ま …

ページで100%幅表示を可能にする ⇒ STINGER8設定その14

100%幅の表示を可能にする STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。 サイドバーを消し、幅を制限している設定をクリアしていく。 page. …