ヘッダーをPCとモバイルとで表示変更

WordPress cocoonを使っていますが、ヘッダー画像がPCでもモバイルでも画面いっぱいに表示されるようにしました。

PCで作ったヘッダー画像は、モバイルでは縦横比のからみで高さが画面いっぱいにならないので、「ヘッダーのPCとモバイルで表示変更」をcssで行いました。

@media screen and (max-width: 834px) {
/* PC用ヘッダー非表示 */
.logo > a img {
visibility: hidden;
}
/* モバイル用ヘッダー表示 */
.logo > a .site-name-text {
display: inline-block;
width: 414px;
max-width: 100%;
height: 550px;
max-height: 100%;
background: url(“ヘッダー画像URL”) no-repeat;
background-position: center;
}
}

こちらのページを参考にさせていただきました。

〔デザイン〕PCとモバイルでヘッダー画像を変える方法

こんにちは、りんごです！デザインの自由度の高いWordpressでブログを書いていると、定期的にデザイン（レイアウト）を変えたくなる時が来ますよね。私はブログを開くたびに変えたくな...