デモサイト「時計屋」を作成しました

作成したデモサイトはこちらです。

コンセプト

コンセプトは、「黒背景」です。

近年、黒背景の方が目に優しく疲れにくいという特徴から、ダークモードが流行しています。

HEPEREもカスタマイズを行うことでダークモード風のデザインになりますので、そのサンプルとして、本デモサイトを作成しました。

デザインカンプについて

デザインカンプはこんな感じです。

カスタマイズ方法

背景の設定

カスタマイザーを開き、以下のメニューから背景色を変更することができます。

カスタマイザー＞コンテナー（メインエリア、サイドバー）

以下の赤枠の部分を変更することで背景色を変更できます。

文字の設定

文字を白くする方法を説明します。

カスタマイザー＞全体デザイン＞フォントを開きます。

フォントをクリックします。

テキストの文字色を変更する機能が表示されます。
赤枠の入力値で文字色を変更してください。

同じ容量で見出し、リスト、引用など各種ブロックの文字色の調整をしてください。
これらの設定は全てカスタマイザー＞全体デザイン以下にメニューがあります。

追加CSS

フロントページのみCSSを適用しました。

各部ブロックに.frontpageクラスなどを追加し、余白を調整しています。

h1.frontpage {
	border-bottom: 1px solid rgba(255,255,255,.4);
	line-height: 0.98;
}

h2.frontpage {
	margin-top: 2.4em!important;
	margin-bottom: 0.4em;
}

.wp-block-separator.frontpage:not(.is-style-wide):not(.is-style-dots) {
	width: 100%;
}

hr.frontpage {
	margin-bottom: 2.8em;
	max-width: 500px;
	margin-top: 0;
}

p.frontpage.ceo {
	margin-top: 2em!important;
}

@media screen and (min-width: 1085px){
	p.frontpage.ceo {
		margin-right: 180px;
	}
}

@media screen and (max-width: 767px){
	h2.frontpage {
		margin-bottom: 10px!important;
	}
	p.frontpage {
		text-align: left;
	}
}

ゆる募：デモサイトの作成を手伝ってくださる方募集

デザインの知識がないため、おしゃれなデモサイト作りに苦労しております！
もし、私こそデモサイトを作らせてほしいという方がいらっしゃればお願いしたいです！

もしよければ、料金など含め、DMなどで相談させてください↓↓