テーマCSS編集を一緒に触ってみよう♪コードご紹介

テーマCSS編集を一緒に触ってみよう♪に
ご参加いただきありがとうございました。
サポートが必要な場合は
お気軽にお問い合わせくださいね。

セミナーの動画はこちらよりご覧ください。

YouTubeで見る

動画をご覧いただきましたら、励みになりますのでアンケートにてご感想をいただけますと嬉しいです。
今後の勉強会の参考にさせていただきます！
アンケートは以下のボタンよりご回答ください。

アンケートに回答する

ビフォーアフターが見たいというリクエストがあったので、私の作ったページのビフォーアフターをお見せします。

【Before】CSS設定前
https://honeycreate.hp.peraichi.com/csspro-before

【After】CSS設定後
https://honeycreate.hp.peraichi.com/csspro

アフターで設定したCSSコードは以下をご覧ください。
セミナー内で時間がなくて後程お見せしますと言った、『スマホとパソコンで表示を変える方法』もヘッダー部分に採用しています。（#section-2と#section-3の部分です）

テストページに使用したCSS（クリックして開きます）

@charset "UTF-8";

/* ページ全体の文字の色を変更 */
body {
	color: #082730;
}

/* ページ全体のボタンの色を変更 */
.c-btn a, .c-btn input, .c-btn .btn-customform-submit, .c-btn button {
	background-color: #45d0bb;
}

/* ページ全体のタイトルの色を変更 */
.p-heading-arrow--v2 {
	background-color: #072530;
}

.p-heading-arrow--v2:before {
	border-top-color: #072530;
}

/* スマホのヘッダー画像を非表示 */
#section-3 {
	display: none;
}

/* 上の方にあるボタンのスペース調整 */
#section-21 {
	margin: 3em 0;
}

/* 上の方にあるメッセージ文の調整 */
#section-5 p {
	font-size: 1.5em;
	line-height: 2em;
}

#section-5 p strong {
	color: #FDA828;
}

#section-5 .c-inner--lg {
	padding: 20px 40px 20px;
}

/* セリフタイトルの調整 */
#section-6 .p-heading__inner, #section-17 .p-heading__inner {
	padding-bottom: 40px;
}

#section-6 h2, #section-17 h2 {
	margin: 0 20px 20px;
}

/* 左または右に画像があるブロックのリスト調整 */
#section-10 li, #section-8 li {
	font-size: 1.5em;
	margin-bottom: 1em;
}

/* 開催概要の調整 */
#section-11 {
	padding: 3em 0 0;
}

#section-11 table {
	max-width: 600px;
	margin: 2em auto;
}

/* 特典部分の調整 */
#section-12 .p-heading-put-on-bdr__inner:before, #section-12 .p-heading-put-on-bdr__inner:after {
	background-color: #45d0bb;
}

#section-13 {
	margin: 0 0 3em 0;
	font-size: 1.2em;
}

#section-13 .c-wrapper--sm {
  	max-width: 600px;
}

/* 下の方のメッセージの調整 */
#section-15 {
	font-size: 2em;
	margin-top: 1em;
}

#section-16 {
	font-size: 1.3em;
	line-height: 1.8;
	margin-bottom: 1em;
}

/* プロフィール写真の調整 */
#section-18 .c-img--responsive img {
	max-width: 300px;
}

/* ここからスマホ用の設定 */
@media only screen and (max-width: 480px) and (min-width: 1px){
	
/* パソコン用のヘッダー画像を非表示 */
#section-2 {
	display: none;
}

/* スマホ用のヘッダー画像を表示 */	
#section-3 {
	display: block;
}

/* 上の方にあるボタンのスペース調整 */
#section-21 {
 	margin: 3em 0 2em;
}

/* 上の方にあるメッセージ文の調整 */
#section-5 .c-inner--lg {
	padding: 20px 10px 20px;
}
	
#section-5 p {
	font-size: 1.3em;
	line-height: 1.8em;
}	

/* プロフィール写真の調整 */
#section-18 .c-img--responsive img {
	max-width: 200px;
}
	
/* セリフタイトルの調整 */
#section-17 h2 {
	margin: 0 10px 20px;
}
	
}

/* 大きいディスプレイ用の設定 */
@media only screen and (min-width: 1280px){

/* 背景画像が全部見えるように調整 */
#section-10 div {
	background-position: left top !important;
 	background-size: contain !important;
}
#section-8 div {
	background-position: right top !important;
	background-size: contain !important;
}	
	
}