このページの本文へ

Jekyllで購入ボタンなどの動的なウィジェットを超簡単に作る方法

2017年07月24日 18時46分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

静的サイトジェネレーター「Jekyll」を使って、ブログやサイトで使い回せる動的なウィジェットを簡単に作る方法を紹介します。

静的なサイトを生成するツール「Jekyll」は、軽量ですがマニアックなツールだとWebデザイン界隈で認識されています。しかし、その印象はJekyllの一部でしかありません。できることが多く、技術者ではないユーザーやクライアントが簡単なサイトを作れる強力なツールです。

クライアントやチームメンバーが簡単に変更できて、どんなプロジェクトにも転用できる、HTMLウィジェットを作成しながらJekyllを解説します。Rubyプラグインは不要です。Shopify製のオープンソースのテンプレート言語Liquidと、昔ながらのHTMLで作成します。

変数の設定

静的サイトを動的にカスタムするための変数を設定します。いくつかの方法がありますが、インライン変数とFront matterの2つを紹介します。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く