Coconaru’s Web

フリーランスのWebデザイナーのメモ帳です

Japacartテーマのカスタマイズ

スマホ、PCでデザインを変える場合
@media only screen and (max-width: 767px) {
//スマホのスタイル記述
}
@media only screen and (min-width: 768px) {
//PCのスタイル 記述
}

ボタンを丸くする
.button {
border-radius: 10px;
}

ページの先頭へボタンの色
.pagetop {
background-color: 色;
}
.pagetop svg {
fill: 色;
}

背景色

body {

background-color: 色;

}

 

coconaru.hateblo.jp

coconaru.hateblo.jp

Japacartテーマのカスタマイズ

スマホ、PCでデザインを変える場合
@media only screen and (max-width: 767px) {
//スマホのスタイル記述
}
@media only screen and (min-width: 768px) {
//PCのスタイル 記述
}

ボタンを丸くする
.button {
border-radius: 10px;
}

ページの先頭へボタンの色
.pagetop {
background-color: 色;
}
.pagetop svg {
fill: 色;
}

背景色

body {

background-color: 色;

}

 

Japacartでショップを作る手順メモ

自分用のメモです。

WordPressをインストール

Japacartテーマをインストール

古いバージョンをインストールしても管理画面で更新できる。
テーマのzipファイルは解凍しないように気を付けること。

Japacart子テーマをインストール

メールのテンプレートを編集する必要があるため子テーマをインストールすること。
子テーマをインストールしないとテーマのアップデートがあった場合に上書きされてしまうので注意が必要。

Japacart Blocksをインストール

テーマと同様古いバージョンをインストールしても管理画面で更新できる。

Yoast SEOをインストール

Japacart SEOは使用しなくてもOK。

固定ページを全部削除してゴミ箱からも削除する

One Click Demo Importをインストール

データのインポートができない場合は、手動でインポートをする。

インポートデータを下記からダウンロード。

https://japacart.com/wp/wp-content/uploads/2021/02/manual-import-files.zip

One Click Demo Importのページで「Switch to manual import」ボタンを押す

Japacartテンプレートをインポート

パーマリンクを更新する

特に設定の変更はしなくていい

 

その他必要なこと

Googleアナリティクスコードを取得

Search Consoleとの連携

 

 

coconaru.hateblo.jp

CSSで背景の下を空ける

背景の下をグラデーションにする場合

    background: linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 100%), url(../../assets/images/xx.jpg);
    background-repeat: repeat;
    background-position: top center;

背景の下を空ける場合

    background: linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 80%), url(../../assets/images/xx.jpg);
    background-repeat: repeat;
    background-position: top center;

スマートフォンで画像を横スクロール

スマートフォンで画像を横スクロールする方法

    &__img {
        @include sp {
            width100%;
            overflow-xauto;
            &-inner {
                width901px;
            }
    }

htaccess で http から https にリダイレクトする方法

htaccess で http から https にリダイレクトする方法

下記を.htaccessに記述する

 

# http → https リダイレクト
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

 

WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」になったら

WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」になって固まってしまった

ルートにある「.maintenance」ファイルを削除することで解決する