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

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

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, 新着情報
-, , ,

執筆者:

関連記事

iphone4s

たった10秒でiPhoneで電話ができないトラブルを解決する方法

iPhone4Sにしてから、実に快適。かつ写真はキレイだしiCloudは便利だし、言うことない! と思っていたら、iOS5.0.1にアップグレードした際に電話の発信も着信も不可能になるというトラブルが …

Amplifyが面白そう

google chrome storeがオープンしていろいろ見ていて目についたのが、Amplify。 どうやら簡単にwebページをクリップして、いろいろなサイトにポストできるようだ。 かちびと.net …

Evernote

Evernoteのノートがどんどん複製されて容量が圧迫される現象が発生した

Evernoteをガシガシと使い倒している俺。 仕事においてもプライベートでも、今や無くてはならない物となっている。 Evernote 5.2.3(無料) カテゴリ: 仕事効率化, ユーティリティ 現 …

バッジ

バッジの表示 ⇒ トップページの作り込み10

fontawsomeでお手軽バッジ バッジを使うことは意外と多い。 特にネットショップの場合はランキングを表示することがほとんどで、その順位を表すのにバッジがよく使われる。 今までは画像でバッジを作っ …

中小機構セミナー

高松でセミナー講師として8月7日登壇します

下記要領で開催されるセミナーの講師として、登壇することとなりました。 GMOメイクショップ株式会社代表取締役社長の向畑憲良様と一緒にお話しさせていただきます。 今回はまだネットショップをオープンしてい …