無料HTMLテンプレート
ブログ形式・ビジネス・2列
記事の一覧と記事ページを備えた、日記や情報発信向けのテンプレートです。紺を基調に、落ち着いた見出しと整った余白で組んだデザインです。
このデザインについて
形式：ブログ形式
記事の一覧と記事ページを備えた、日記や情報発信向けのテンプレートです。新着記事のカード、ページ送り、カテゴリ、アーカイブ、プロフィールなど、ブログに欠かせない部品をそろえています。記事ページには目次・表・引用・筆者紹介・前後の記事への導線を入れてあります。
スタイル：ビジネス
紺を基調に、落ち着いた見出しと整った余白で組んだデザインです。会社・事務所・サービスの紹介など、信頼感を出したいサイトに向いています。見出しの帯や表の罫線を、読みやすさを優先して整えています。
カラム：2列
本文とサイドバーを横に並べるレイアウトです。画面の幅が768px以上では本文とサイドバーが横に並び、それより狭い画面ではサイドバーが本文の下へ回ります。
入っているページと部品
- アイキャッチ画像つきの記事カード一覧とページ送り
- 記事ページ（目次・表・引用・筆者紹介・前後の記事）
- プロフィール・カテゴリ・アーカイブ・タグの部品
- スマートフォンでは、メニューをボタンで開閉する形に切り替わります
- ページの先頭へ戻るボタン
ファイルの構成
blog-business-2col/
├── index.html トップ（記事一覧）
├── article.html 記事ページ
├── css/
│ └── style.css スタイルシート
├── js/
│ └── main.js 動き（メニューの開閉など）
├── images/ 仮の画像（7点）
└── README.txt 使い方の説明使い方
- 「ZIPをダウンロード」を押して、ファイルを保存します。
- ZIPファイルを展開（解凍）し、中の
index.htmlをブラウザで開くと、見た目を確かめられます。 - テキストエディタで HTML を開き、文章・画像・リンク先をご自分のサイトの内容に書き換えます。
- 色や文字の形は、
css/style.cssの先頭にある「色・文字・形の設定」でまとめて変えられます。 - 公開するときは、各ページの
<head>にページの説明（meta description）などを足してください。
