FoundationベースのFC2ホームページテンプレート
CSSフレームワークを使ってFC2ホームページを作成
FoundationというCSSフレームワークがあります。
FC2 ホームページの作り方のエントリーでは、新規申し込みからindex.htmlのカスタマイズ、そしてHTMLを直接編集してレイアウトを組むところまでやってみた。
本記事では、
- ナビゲーションバー
- ヘッダーバナー
- メインコンテンツ
- サイドバー
で構成したテンプレートをCSSフレームワークのFoundationを利用してHTMLを組んでみます。
CSSフレームワークとはなにか？
FC2ホームページでホームページを作成しようとしている人なら知っていると思いますが、ホームページは
- HTML
- CSS
上の2つの要素で構成されています。
HTMLで作成したコンテンツデータを装飾するのがCSS
というイメージになります。
CSSフレームワークは、
ホームページ作成において頻繁に利用されるデザインのパターンを総合的に網羅したCSSのデラックス版
みたいな存在になります。
そして、Foundationは数あるCSSフレームワークの中の一つです。
ホームページ作成の初心者の方は、CSSフレームワークと聞いて難しそうなイメージを持つかもしれませんが、
CSSフレームワークを利用すればCSSを作成せずにホームページを作成することが可能
というメリットがあります。
Foundationについて興味がある方は公式ページから情報を得ることができます。
テンプレートのHTML
CSSを作成することなく具体的なテンプレートを作成しいてみます。
FC2ホームページのファイルマネージャで
page2.html
というファイル名を作成し、以下のHTMLを貼り付けてみましょう。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundationベースのテンプレート</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="container"><nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1><a href="#">ホームページのタイトル</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown"><a href="#">ドロップダウンリンク</a>
<ul class="dropdown">
<li><a href="#">最初のリンク</a></li>
</ul>
</li>
</ul>
<ul class="left">
<li><a href="#">サイトマップ</a></li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="panel"><img src="../../../img/960x280.png" alt="header" /></div>
</div>
<div class="row">
<div class="large-8 medium-8 columns">
<div class="row">
<div class="small-3 large-2 columns"><a class="th" href="#"> <img src="../../../img/125x125.png" alt="thumbnail" /> </a></div>
<div class="small-9 large-10 columns">
<div class="panel callout">テキスト</div>
<a href="#" class="button tiny">詳細ページへ</a></div>
</div>
<div class="row">
<div class="small-3 large-2 columns"><a class="th" href="#"> <img src="../../../img/125x125.png" alt="thumbnail" /> </a></div>
<div class="small-9 large-10 columns">
<div class="panel callout">テキスト</div>
<a href="#" class="button tiny">詳細ページへ</a></div>
</div>
<div class="row">
<div class="small-3 large-2 columns"><a class="th" href="#"> <img src="../../../img/125x125.png" alt="thumbnail" /> </a></div>
<div class="small-9 large-10 columns">
<div class="panel callout">テキスト</div>
<a href="#" class="button tiny">詳細ページへ</a></div>
</div>
<div class="row">
<div class="small-3 large-2 columns"><a class="th" href="#"> <img src="../../../img/125x125.png" alt="thumbnail" /> </a></div>
<div class="small-9 large-10 columns">
<div class="panel callout">テキスト</div>
<a href="#" class="button tiny">詳細ページへ</a></div>
</div>
<div class="row">
<div class="small-3 large-2 columns"><a class="th" href="#"> <img src="../../../img/125x125.png" alt="thumbnail" /> </a></div>
<div class="small-9 large-10 columns">
<div class="panel callout">テキスト</div>
<a href="#" class="button tiny">詳細ページへ</a></div>
</div>
</div>
<div class="large-4 medium-4 columns">
<div class="panel"><img src="../../../img/336x280.png" alt="ad" /></div>
<div class="panel">
<p>リンク</p>
<ul class="side-nav">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<script>// <![CDATA[
$(document).foundation();
// ]]></script>
</div>
</body>
</html>
page2.htmlのソースコードを上のHTMLにして上書き保存すればテンプレートは完成となる。ページ内にバナーやサムネイル画像を参照している部分があるので、画像をダウンロードするためのリンクをpage2.html内に用意したので、以下の手順で画像ファイルを設置して頂きたい。
- 画像ファイルをダウンロードしてzipを展開
- ファイルマネージャでimgフォルダを作成
- zip内の3つのpngファイルをimgフォルダに配置
ここまでの作業をするとpage2.htmlが閲覧可能な状態になる。
上のリンクからFC2ホームページで実際に作成したFoundationベースのテンプレートが確認できるので参考にして頂きたいと思います。
画像のサイズはそれぞれ、
- オレンジ色のビッグバナー → 960×280
- サイドバーのレクタングルバナー → 336×280
- 緑色のサムネイル → 125×125
になっています。
CSSフレームワークを利用することで、CSSの作成をすることなくホームページを作ることが出来ます。