自分で組み立てるテンプレート｜サイドコンテンツ用パーツ

サイドコンテンツ用パーツ

必ず事前にlayout（2カラム or 3カラム）を組み込んでおいて下さい。

サイドコンテンツ用パーツ一覧

side1

サイドメニュー。

html

/*side共通設定
---------------------------------------------------------------------------*/
.side, .side2 {
	--side-space: 10px;	/*下の.box1-parts h3と.box1-partsでここの数値を読み込みます。10pxの余白管理用。*/
}

/*side（サイド設定）
---------------------------------------------------------------------------*/
/*h3見出し*/
.side h3,.side2 h3 {
	font-weight: 500;
	font-size: 1rem;
}

/*box1-parts内のh3見出し*/
.box1-parts h3 {
	margin: calc(0.5rem - var(--side-space)) 0.5rem 0.5rem;
}

/*box1-parts内じゃない方のh3見出し*/
.side > h3,.side2 > h3 {
	background: rgba(0,0,0,0.1);	/*背景色。0,0,0は黒の事で0.1は色が10%出た状態。*/
	text-align: center;		/*テキストをセンタリング*/
	border-radius: 5px;		/*角を丸くする指定*/
	margin-bottom: 0;		/*下のマージンをなくす*/
}

/*sidemenu-parts（サイドメニュー設定）
---------------------------------------------------------------------------*/
.sidemenu-parts {padding: 0;margin: 0;list-style: none;}

/*メニュー１個あたり*/
.sidemenu-parts li {
	border-bottom: 1px solid var(--border-color);
}
.sidemenu-parts a {
	display: block;text-decoration: none;
	background: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	padding: 0.2rem 1rem;	/*上下に0.2文字分、左右に1文字分の余白*/
}

/*色がついたボックス（box1-parts）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1-parts {
	background: rgba(0,0,0,0.1);	/*背景色。0,0,0は黒の事で0.1は色が10%出た状態。*/
	padding: var(--side-space);		/*ボックス内の余白。.sideの--side-spaceを読み込んでいます。*/
	border-radius: 5px;				/*角を丸くする指定*/
}

css

サイドコンテンツ用パーツ

サイドコンテンツ用パーツ

サイドコンテンツ用パーツ一覧

side1

自分で作る
テンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

サイドコンテンツ用パーツ

サイドコンテンツ用パーツ

サイドコンテンツ用パーツ一覧

side1

自分で作るテンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート