ARCHIVE STUDIO（SWELL+CSS）

実装例

「セクションパターン」では、実際に制作したサイトを基に、ブロックとCSSをどのように用いて制作したのか、セクションごとに共有します。

「SWELLのブロックでは物足りなくなってきた…」
「これからはCSSも使ってオリジナリティを出して生きたい！」
「体系的なCSSの書き方を習得したい！」
という方にはぜひ参考にしていただきたい内容です。

そのままの流用は禁止ですが、CSSについて理解がある方は、ぜひモディファイして制作に活かしてください。

今回は、デザインカンプに基づきSWELLで構築する例です。
ホームページとしての機能やレイアウト構築はSWELLを活用し、デザインの反映CSSで行う。Arkheのような制作思想です。

WordPressテーマカスタマイズに最適化した独自のCSS設計「NpCSS」を使用しています。

• テーマカスタマイズに最適化されたCSS記述ルールで保守性を高めたい
• いつも場当たり的にCSSを書いてしまっている…
• Revifyで配布されているCSSコードの見方がわからない…

という方は、この記事をご覧ください！

セクションパターン

ユーティリティクラス

このサイトで使用しているユーティリティクラスです。追加CSSに追加しておいてください。

/* ■■■ UTILITY ■■■■■■■■ */
.u-display {
	font-family: "Cinzel", serif;
}

.u-serif {
	font-family: "EB Garamond", serif;
}

@media (hover: hover) and (pointer: fine) {
	/* 追加CSSクラス：u-mtHover を付けた「メディアとテキスト」だけ */
	.wp-block-media-text.u-mtHover .wp-block-media-text__media {
		overflow: hidden;
	}

	.wp-block-media-text.u-mtHover .wp-block-media-text__media img {
		display: block;
		transform: scale(1);
		filter: saturate(0.2);
		transition: transform 1.2s ease, filter 1s ease;
	}

	.wp-block-media-text.u-mtHover:hover .wp-block-media-text__media img {
		transform: scale(1.02);
		filter: saturate(1);
	}
}

※Google Fonts の「Cinzel」と「EB Garamond」を読み込んでいます。

メインビジュアル

Commitmentセクション

Methodセクション

Strengthセクション

Contactセクション

Snow Monkey Forms