Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (35,789Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (17,850Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (16,400Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,686Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,674Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (15,515Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,258Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,615Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,013Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,671Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,488Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,311Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,979Views)
  • 翻訳機能をWebサイトに埋め込む方法 (9,587Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,564Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,905Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,841Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,602Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (5,495Views)
  • TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方 (5,362Views)
  • BASE Tempalateの超初歩(続き) BASEの変数の使い方の基本を知ろう

    2015年10月14日(水)
    256Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    前回まで

    前回は、BASE TemplateのBlock機能を説明しました。
    これは、Blockタグで囲った要素について、ブラウザーでページを表示させた時に表示させるか、させないか、の出し分けを可能にする機能です。

    詳しくは下記リンクから、該当記事を御覧ください。
    BASE Templateの超初歩 ページごとに要素を出し分ける方法について学ぶ | htmlコーディングパートナーの小棹制作所

    「商品管理」に学ぶ、BASEの変数の役割

    今回は、BASE Template作成におけるもうひとつの重要要素「変数」について学びます。

    まずは、BASEにおける変数の役割について。

    BASEにおける変数がもっとも理解しやすいのは、商品追加作業です。

    BASEでは、「商品名」「価格」「商品説明」などの商品情報入力に「商品管理」画面を使ます。
    登録後、マイショップを見ると、商品情報が反映されます。

    商品登録 BASE

    Cosaoshop

    なぜでしょう?

    それは、ここに変数が使われているためです。

    BASE TemplateのHTML内に、「商品名」を表示させる変数、「価格」を表示させる変数、「商品説明」を表示させる変数などを組み込みます。
    すると、その変数が「商品管理」ページで入力した情報を、マイショップに表示させる働きをするのです。

    変数の種類

    BASEにおける変数は、最初から決められており、自分で勝手に増やすことはできません。

    変数の種類は、たとえば前述した商品まわりで言うと

    • {ItemId} 商品のID
    • {ItemTitle} 商品の名前
    • {ItemPrice} 商品の価格
    • {ItemStock} 商品の在庫数

    などが用意されています。

    このほか、各ページヘのリンクアドレスを出力させる変数、SEO対策にheadタグ内に商品のメタ情報を出力するタグ、ショップのSNS(Twitter Facebookなど)IDを出力させるタグなど、BASE内の一連の機能を実装するための変数が用意されています。

    詳細は下記公式githubページで確認してください。
    baseinc/template-docs · GitHub

    簡単な使用例

    たとえば、ショップのロゴをトップページへのリンクとして表示させたいときは

    <html>
    <head>
    ...
    </head>
    <body>
    <h1><a href="{IndexPageURL}">{LogoTag}</a></h1>
    </body>
    </html>
    

    こんなかんじ(baseinc/template-docs · GitHub 「変数の例)」より引用)

    つづいて、前回学んだblock要素と組み合わせて、SEO対策として商品ページが表示されている時、商品のメタ情報がhead内に出力させるには以下のような記述になります。

    <head>
    ... 
    {block:ItemPage}{MetaItemInfoTag}{/block:ItemPage} 
    ...
    </head>
    

    (baseinc/template-docs · GitHub 「HTMLヘッダー」項目より引用)

    おわりに

    前回のblock要素の使い方につづいて、今回は変数の使い方について学びました。

    「変数とは、BASEでECサイトを運用するのに必要な情報を、BASE Template内(HTML内)にて決められた書き方をすることで、ショップに出力するもの」
    と考えておけば、おおきな間違いはないと思います。

    あとは、下記、すべてのblock要素と変数が解説されているサイトを元に、HTMLに組み込んでいけば、基本的なBASE機能を持ったショッピングサイトは作れるようになるはずです。
    baseinc/template-docs · GitHub

    まとめ

    弊社・小棹制作所では、BASE Templateの作成・カスタマイズ代行作業サービスを開始しました。 お問い合わせは当ページ上部メニュー「お問い合わせ」ページ、もしくは下記「かんたんお問い合わせボックス」またはメール「yujikosao@me.com」までご連絡ください。ご相談のみでも歓迎です。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.