テーマ＆スキンを『Cocoon』の『m-sora』にかえてみました。

彼の起業に向けて、彼のサイト作成準備の為、WPのテンプレートを検索していて、自分が気に入ったもの『Cocoon』の『m-sora』を発見♡

試しにこのブログのテンプレを『Cocoon』の『m-sora』にかえてみました。

『Cocoon』「m-sora」

かえつつ～背景はこれまでの画像は使いたい！

最初
「外観」→「カスタマイズ」→「背景画像」→「フルスクリーン」
で設定してみたのですが、画像がかわらず暫く苦戦。。。（苦笑）

＊＋・＋＊＋・＋＊＋・＋＊

【m-soraの背景を変更する方法】

m-soraの「style.css」にある背景画像記述を変更する。

※　必ずバックアップをとりながら作業して下さい。

＊＋・＋＊＋・＋＊＋・＋＊

「Cocoon設定」→「テーマ情報」
からスキンの「style.css」格納先を調べます。

スキン：/wp-content/themes/cocoon-master/skins/m-sora/style.css

サーバーにあるスキンの「style.css」を開き、
背景画像記述の箇所を変更します。

冒頭部分の背景画像を指定するソースをみつけます。


body {
background:#fff url("https://im-cocoon.net/wp-content/uploads/bg.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
}
body::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url("https://im-cocoon.net/wp-content/uploads/bg.jpg") center no-repeat;
background-size: auto;
background-size: cover;
}

https://im-cocoon.net/wp-content/uploads/bg.jpg　コチラを削除します。

↓　削除後。


body {
background:#fff url("") no-repeat;
background-size: cover;
background-attachment: fixed;
}
body::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url("") center no-repeat;
background-size: auto;
background-size: cover;
}

上書き保存で完了デス。

既に
「外観」→「カスタマイズ」→「背景画像」→「フルスクリーン」
で設定していたので、背景画像さえ削除したら上手くいきました♡

良かったら参考にして下さい♪

コメント