レスポンシブ対応のグリッドレイアウトを簡単に実装できるテンプレート Gridfolio

レスポンシブ対応のグリッドレイアウトを簡単に実装できるテンプレートを紹介します。

グリッドフォリオ

Gridfolioを使えば、簡単にレスポンシブ対応のグリッドレイアウトを実装することができます。

まずはこちらの動作サンプルをご覧ください。

各行に表示するボックスの個数は自由に設定することができます。

ポートフォリオサイトなどに使いやすいテンプレートです。

JavaScriptベースで実装します。

スポンサーリンク

デモ

デモページを用意しました。

使い方

ダウンロードページ上部にある「Download ZIP」ボタンからダウンロードします。

ダウンロード

CSSとして、index.cssを読み込みます。

JavaScriptとして、require.min.jsとindex.jsを読み込みます。require.min.jsはクラウドから読み込みました。</body>閉じタグの直前で読み込みましょう。

HTMLを用意します。HTMLは1行だけです。

HTMLファイルと同じ階層に、gridfolio.jsをアップロードしておきます。

フォルダ階層

※index.js内のスクリプトが、require.min.jsを使って、gridfolio.jsを自動的に読みこむようになっています。

gridfolio.jsを開いて、表示する項目を設定します。

var gf_content = の中で、表示する項目を設定できます。

// row の部分が1行のエリアです。// block の部分が一つのブロックです。

下記の画像は、1行のrowに、blockが4つ並んでいます。

レイアウトのサンプル

blockの中の各項目を設定します。

  • title: ブロックに表示するテキスト
  • link: テキストのリンク先
  • imageURL: ブロックに表示する画像のURL
  • keywords: ブロックに表示するキーワード

rowとblockは自由に増減させることができます。1行目はblockを4つ表示して、2行目はblockを3つ表示してなどのレイアウトも可能です。

グリッドフォリオ

var gf_styles = の部分のCSSを調整して、見た目を変更することができます。

以上で、実装は完了です。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 662