ブログデザイン[transparent]のCSS：背景を変更する

少しだけ、システムの話。

私のこのブログのデザインは

はてなブログのテーマストアにあった

【transparent】というデザインを基盤にしている。

レスポンシブデザインなため

PCとモバイル版共通のデザインに勝手になる仕様だ。

それにも関わらず、先日友人から

「スマホのデザインとPCデザインの背景が違う」という指摘を受けた。

確認してみると、確かに。

PC版

モバイル版

背景がオリジナルのままになっている。

これはいかん。

というわけで、CSSをいじって変更しようではないか。

ちなみにいじるのはここ。

[デザイン編集]→[カスタマイズ]→[｛｝デザインCSS]　と進むと現れる

CSSを下記のように書き換える。

画像背景に画像をアップロードすると

自動的に●●●の部分に画像URLが記入される。

そのURLをコピーし、

■■■の部分に貼り付ければ完成。

-------CSS----------------------------------------------------------

/* <system section="theme" selected="10257846132603818183"> */
@import url("https://blog.hatena.ne.jp/-/theme/10257846132603818183.css");
/* </system> */

/* <system section="background" selected="custom"> */
body{ background-image: url('●●●'); background-repeat: repeat-x; background-color:#undefined; background-attachment: fixed; background-position: center top;}
/* </system> */

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background-color: transparent;/* 背景の色 */
}
.nav-item {
   display: table-cell;
   list-style-type: none;
   text-align: center;
}
.nav-item a {
    display: block;
    color: #fff;/* #fff */
    padding: 10px 0;
    text-decoration: none;
    transition: 0.2s;/* 変化にかかる時間 */
}
.nav-item a:hover {
    background-color: #EEEEEE;/* マウスがホバーした時の背景色 */
    color: #000000;/* マウスがホバーした時の文字色 */
}

.nav {
    display: block;
    background-color: transparent;/* #g-navと同じ色を指定 */
}
#g-nav {
    width: 100%;/* ナビゲーションの幅 */
    margin: 0 auto;
}

@media(max-width: 768px) {
    #g-nav {
        display: block;
        overflow-x: auto;
    }
    .nav-item a {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 20px;
    }
}

/* PCでの背景設定 */
body {
    background-image: url('■■■');
}

/* スマホ・タブレットでの背景設定 */
@media only screen and (max-width: 768px) {
    body {
        background: none;
    }
    body::before {
        background: url('■■■');
        background-size: cover;
        background-position: center center;
    }
}    

--------------------------------------------------------------

モバイル版もPC版と同じ背景に

需要があるかどうか解らんが、一応ブログに書き残す。

さて、仕事に戻ります。