Number.001 / 2コラム左サイドバーのテンプレート

こちらはbodyのlinear-gradientで背景画像を表現しています。サンプル画像を選択したのち、ボタンで以下の箇所を変更してお使い頂けます。※スマホからは閲覧できません。

background:
linear-gradient(A,rgba(*,*,*, B) C, rgba(255, 255, 255, 0.5) D),
linear-gradient(E,rgba(*,*,*, F) G, rgba(255, 255, 255, 0.5) H);
background-size: I J;
background-color: *;

他のテンプレートに設定する際は、上記に該当する箇所をコピペでbodyのCSSに貼り付けてください。

■htmlファイル

こちらはファイル名と文字コードを以下のように保存してください。

ファイル名：「index.html」
保存文字コード：「utf-8」

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>あなたのＨＰタイトル</title>
<meta name="keywords" content="ページのキーワードA,B,C">
<meta name="description" content="ページの説明">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="outer">
<header>
<div class="header-inner">
<h1>あなたのＨＰタイトル</h1>
<p>あなたのＨＰの説明文</p>
</div>
</header>
<div id="content">
<div class="inner">
<h2>記事ページ見出し・大</h2>
<p>文章あれこれ</p>
<h3>記事ページ見出し・中</h3>
<p>文章あれこれ</p>
<h4>記事ページ見出し・小</h4>
<p>文章あれこれ</p>
</div>
<aside>
<div class="left-title">サイドバータイトル</div>
<div class="link">
<ul>
<li>記事ページへのリンク</li>
<li>記事ページへのリンク</li>
</ul>
</div>
</aside>
</div>
<footer>© 2010 あなたのホームページ</footer>
</div>
</body>
</html>コピー

■スタイルシート

こちらはCSSになります。

ファイル名：「style.css」
保存文字コード：「utf-8」

CSS

@charset "UTF-8";
body {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	background: #fff;
	background-size: 40px 40px;
}
#outer {
	margin: 0 auto;
	width: 1000px;
	background-color: #fff;
}
header {
	height: 80px;
	padding: 20px 30px;
}
.header-inner {
	padding: 0;
	font-size: 12px;
}
h1 {
	font-size: 24px;
	margin: 0;
	padding: 0;
}
h1 a {
	color: #000;
	text-decoration: none;
}
h1 a:hover {
	text-decoration: underline;
}
h2 {
	font-size: 22px;
	margin: 0;
	padding: 10px;
	background-color: #D6E7EE;
}
h2 a {
	text-decoration: none;
	color: #265699;
}
p {
	margin: 1em 0;
}
.aka {
	color: #B0231D;
	font-weight: bold;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #094a94;
}
#content {
	padding: 0 20px;
}
#content::after {
	content: "";
	display: table;
	clear: both;
}
.inner {
	float: right;
	width: 640px;
	margin: 0;
	padding: 10px 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
aside {
	padding: 20px;
	color: #676767;
	width: 220px;
	float: left;
	background-color: #f8f8f8;
}
.left-title {
	padding: 10px;
	font-weight: bold;
	color: #333;
}
.link {
	margin: 0;
	padding: 0 0 10px 0;
}
.link a {
	color: #094a94;
	text-decoration: none;
}
.link a:hover {
	text-decoration: underline;
}
ul {
	margin: 0 0 0 1em;
	padding: 0;
}
.link li {
	list-style: none;
	padding: 4px 0;
}
footer {
	text-align: center;
	color: #666;
	font-size: 15px;
	height: 100px;
	padding-top: 40px;
	clear: both;
}
blockquote {
	border: 1px solid #ccc;
	padding: 5px;
	margin: 10px;
}
@media (max-width: 768px) {
#outer {
	width: 100%;
	padding: 0;
}
#content {
	padding: 0 10px;
}
.inner, aside {
	float: none;
	width: 100%;
}
.inner {
	margin: 0;
	padding: 10px 0;
	box-shadow: none;
}
aside {
	padding: 10px 0;
}
.header-inner {
	font-size: 10px;
}
h1 {
	font-size: 20px;
}
h2 {
	font-size: 20px;
}
}コピー

【I,J】
【A】
【E】
【B,F】
境界の位置
【C,D】
【G,H】
【C,D,G,H】 （1px未満の線は表示されません。）
グラデーション終了地点（「C < D、G < H」で調整してください。）
【D】
【H】
下地にbackground-colorを追加

【A,E】

何がでるかな？

（画像、サイズ、1枚目傾き、2枚目傾きを各ランダムで選択）

（1枚目、2枚目の境界の位置を10～90%の範囲でランダム）

（1枚目、2枚目50～100%の範囲でのグラデーションをランダム）
※お好みでB、Fの透過や下地を追加してお使いください。

2～3回セットのため、2～3回戻せば1つ前になります。

（※画像は右クリックなどで保存ください）

文字を入れてキャプチャする場合はテキストを入力してください:

フォントファミリー:（※ローカルにある場合のみ）
游ゴシックメイリオヒラギノ角

フォントサイズ:
40px 50px 60px 70px

テキストシャドウを適用しますか？

サンプルイメージ

Number.001 / 2コラム左サイドバーのテンプレート

あなたの素晴らしい作品からいろいろ勉強させてください。

（※公開、二次使用はされません）

HOME > 2コラム・左サイドバー一覧