Foundation 6.2で作ったテンプレート特別版 ここがパワーアップ!

Foundationテンプレート特別版イメージ
,

ブログを書きながら作ってきたテンプレート、絶賛「無料配布中」です。ただ、ほとんどデフォルトのままで若干消化不良な感じがしていました。結局は飽き足らず、ちょっと手を入れてみました。

通常版に続く特別版は、各所がパワーアップしています。

ヘッダーにスライドショーを標準装備

FoundationのOrbitという機能で、カルーセルを設置しました。Foundationのドキュメントをコピペしただけですが、動作もいい感じです。JavaScriptもCSSもあらかじめ用意されているので、HTMLを貼り付けて画像のパスを差し替えるだけで、気軽にスライドショーを実装できます。

Foundationテンプレート特別版イメージ2

グローバルナビのカラーを変更。マウスを上に置くと色も変わる

通常版ではデフォルトの色のままでしたが、シックなグレーに変更してあります。hoverも指定してありますので、オンマウスでメニューの色が変化します。本当は、各ページにナビを貼り付けて.activeを付与してやることで現在のページが分かるのですが、今回はこのままで良しとしましょう。

Foundationテンプレート特別版イメージ3

文字サイズを変更、見出しも修正済

Foundationのデフォルトだと、文字の大きさのバランスが悪いので、ヘッダー、フッター、見出しなど整えてあります。見出し2、見出し3はスタイルを適用してあります。見出しは、もっと作り込んでもいいのかもしれませんが、シンプルさを優先します。

Foundationテンプレート特別版イメージ5

フッターを3カラムに変更。SNSサイトへのリンクも設置可能

2カラムから3カラムに作り替え、真ん中にFoundationのフォントアイコンを使った、SNSのリンクを設置しました。フッターの使い方もいろいろ方法がありますよね。今回はサイドバーがないので、こんな感じにしました。

Foundationテンプレート特別版イメージ4

やばい、止まらなくなってきた。カラーバリエーションとかも作っちゃおうかな。。