{"_id":"5544d76bd8833c0d0058280f","__v":1,"category":{"_id":"5544d76ad8833c0d00582806","__v":1,"pages":["5544d76bd8833c0d00582809","5544d76bd8833c0d0058280a","5544d76bd8833c0d0058280b","5544d76bd8833c0d0058280c","5544d76bd8833c0d0058280d","5544d76bd8833c0d0058280e","5544d76bd8833c0d0058280f","5544d76bd8833c0d00582810","5544d76bd8833c0d00582811","5544d76bd8833c0d00582812","5544d76bd8833c0d00582813","5544d76bd8833c0d00582814"],"project":"55227389b4a0de0d00de7e28","version":"5544d76ad8833c0d00582801","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-13T06:13:25.383Z","from_sync":false,"order":9999,"slug":"_-3","title":"テーマ開発"},"project":"55227389b4a0de0d00de7e28","user":"552342f6e20da719000e7925","version":{"_id":"5544d76ad8833c0d00582801","__v":1,"project":"55227389b4a0de0d00de7e28","forked_from":"55227389b4a0de0d00de7e2b","createdAt":"2015-05-02T13:55:54.059Z","releaseDate":"2015-05-02T13:55:54.059Z","categories":["5544d76ad8833c0d00582802","5544d76ad8833c0d00582803","5544d76ad8833c0d00582804","5544d76ad8833c0d00582805","5544d76ad8833c0d00582806"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.0.0","version":"4.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-13T08:16:43.374Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"ドラッグアンドドロップだけでブロックの位置を変更することが出来ます。\n\nレイアウトグリッドはCSSフレームワークである「Bootstrap 2.3」に準拠しています。\nBootstrapについての詳しい情報は[Bootstrap公式サイト](http://getbootstrap.com/2.3.2/)をご確認ください。\n\nCS-Cartの管理パネルの**デザイン > レイアウト**でレイアウトを管理できます。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"レイアウトの設定\"\n}\n[/block]\nレイアウトには以下の設定があります：\n\n- ★**Grid columns** - グリッドは16列固定となりました（CS-Cart4.2.4）\nグリッド内にグリッドを配置することが出来ます。\n\n\n\n- **Layout width** - choose the Fixed, Fluid, or Full width layout.\n　　　　　　　　　**固定**、**流体**または**フル幅**のレイアウトを選択\n\n　　　　　　　　　　For the Fluid layout you can define the min and max site width.\n　　　　　　　　　流体レイアウトに最小値と最大値のサイト幅を定義することができます。\n\n　　　　　　　　　　With the Full width layout the site will be adapted to the full screen width.\n　　　　　　　　　　**フル幅**のレイアウトのサイトはフル画面の幅に適応します。\n\nWith the Fixed layout you can define the column width in pixels (px).\n**固定**レイアウトを使用すると、ピクセル（px）で列幅を定義することができます。\n\nOne column width and the gutter between them are defined in the css/tygh/grid.less file.\nOne column widthとそれらの間の溝は、*css/tygh/grid.less*ファイルに定義されています。\n\nThey are defined with the LESS variables: :::at:::gridColumnWidth and @gridGutterWidth. As default they equal 40px and 20px.\nこれらはLESSの変数で定義されています：`@gridColumnWidth` と `@gridGutterWidth` 。デフォルトでは40pxと20pxに等しいです。\n\nWith the following equation *(@gridColumns * @gridColumnWidth) + ((@gridGutterWidth * (@gridColumns - 1)\n以下の(@gridColumns * @gridColumnWidth) + ((@gridGutterWidth * (@gridColumns - 1)*\n\nit is easy to find out the site max width (1175px by default).\nサイトの最大幅を探すのは簡単です。(デフォルトでは1175px)\n\nYou can also use Media queries to change the blocks width depending on the screen width.\nまた、画面の幅に応じてブロックの幅を変更するには、**メディアクエリ**を使用することができます。\n\nIn the Fluid layout the column width is defined in percents (%).\n**流体**レイアウトでは列幅はパーセント(％)で定義されている。\n\nOne column width and gutter width are defined proportionally according to the values of the variables used for the Fixed layout.\nOne column widthと溝幅は固定レイアウトのために使われる変数の値に応じて比例的に定義されています。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Layout includes\"\n}\n[/block]\n##Locations\n\nLocation defines the certain page appearance. When adding a location, set:\nロケーションは、特定のページの外観を定義します。場所を追加する場合は、設定：\n\n- Name - location name.\n　　　　ロケーション名\n\n- Dispatch - specific page or page type that the location is associated with.\n　　　　　　　特定のページやロケーションが関連しているページタイプ\n\n　　　　　　　The dispatch parameter has the following format: [controller_name].[mode_name], where [controller_name] - is the name of the controller, and [mode_name] - is the mode in which the controller works.\n　　　　　　　ディスパッチパラメーターには以下の形式があります：[*controller_name*].[*mode_name*]：[*controller_name*]はコントローラーの名前、[*mode_name*]はコントローラーが作動するモードの名前\n　　\n　　　　　　　This value is added to index.php?dispatch= part of the page and points to a specific location.\n　　　　　　　この値は*index.php?dispatch*に追加されます＝特定のロケーションへのぺーじと位置の一部\n\n　　　　　　　For example, index.php?dispatch=checkout.cart points to the cart contents page while index.php?dispatch=checkout.checkout points to the checkout page.\n　　　　　　　例えば、*index.php?dispatch=checkout.cart*はカートのコンテンツを示しますが、一方で、*index.php?dispatch=checkout.checkout*はチェックアウトページを示します。\n\n　　　　　　　You can choose the predefined values from the drop-down list.\n　　　　　　　ドロップダウンリストから定義済みの値を選択することができます。\n\nSuch site elements as header and footer are usually identical for every page.\nヘッダーやフッターのようなサイトの要素は、通常すべてのページで同様です。\n\nNot to duplicate this content for each page, use the Default location.\n各ページにこのコンテンツを複製するのではなく、デフォルトのロケーションを使用します。\n\nDefault location is not attached to some page but defines the common locations appearance.\n**デフォルト**のロケーションはいくつかのページに添付されていますが、共通のロケーションの外観は定義していません。\n\nDefault location must be always defined. To make a location default, choose the Default checkbox in the location settings.\nデフォルトのロケーションは常に定義されています。ロケーションのデフォルトを作るには、ロケーション設定の**デフォルト**チェックボックスを選択します。\n\n##Containers\n\nLocation layout consists of 4 containers: top panel, header, content, and footer.\nロケーションのレイアウトは4つのコンテナで構成されています：**トップパネル**、**ヘッダー**、**コンテンツ**、**フッター**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/zccBBb5TwC2NUSJgOFmC_tpl010.png\",\n        \"tpl010.png\",\n        \"834\",\n        \"844\",\n        \"#2479a8\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe top panel, header, and footer containers are defined only for the Default location.\n**トップパネル**、**ヘッダー**及び**フッター**は**デフォルト**ロケーションでのみ定義されます。\n\nIn bootstrap containers have the following structure:\nブートストラップコンテナはいかの構造をもっています；\n\nFor the Fixed layout:\n固定レイアウト：\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"container\\\">...</div>\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nFor the Fluid layout:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"container-fluid\\\">...</div>\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n##Grids\n\nGrids are placed in containers. In Bootstrap grid includes .span and .row. As the default, the 16-column grid is used in CS-Cart.\nグリッドはコンテナに位置しています。ブートストラップのグリッドは.span と .row. を含んでいます。結果的に、16列のグリッドがCS-Cartで使用されます。\n\n画像\n\nYou can define the following parameters for a grid:\n以下のパラメーターをグリッドに定義することができます：\n\n- **Width** - number of columns used in the container. For child containers, this number cannot exceed the the length of the root container.\n　　　　　コンテナに使用される列の数。子コンテナの場合、この番号はルートコンテナの長さを超えることができない。\n\n　　　　　This setting defines .span to be used for a block (.span1-.span16).\n　　　　　この設定はブロックに使用する.span を定義します。(.span1-.span16)\n\n- **Content alignment** - container position inside the root (or parent) container: Right, Left or Full Length.\n　　　　　　　　　　　　ルートコンテナ内のコンテナの位置：右、左、全長\n\n　　　　　　　　　　　　Adds the ty-float-left class for the left alignment and the ty-float-right class for the right alignment.\n　　　　　　　　　　　　左揃えにするために`ty-float-left`を追加し、右揃えにするために`ty-- float-right`を追加します。\n\n- **Offset** - adds the block shift from the left side. Uses the same values as .span. The .offset class is added for grid.\n　　　　　　左側からブロックリストを追加します。*.span*と同じ値を使用します。`.offset` クラスはグリッドに追加されます。\n\n- **User-defined CSS-class** - used to add a CSS-class.\n　　　　　　　　　　　　　　　CSSクラスを追加するために使用する\n\n##Blocks\n\nBlock is a separate box which represents a particular storefront component. Blocks are added in grids.\nブロックは特定のストアフロントの一部を表す独立したボックスです。ブロックはグリッドに追加されます。\n\nThey are created based on schemas. Schema is a file where all blocks, their settings and templates are defined.\nスキーマを基にして作成されます。スキーマは全てのブロックにあるファイルで、設定やテンプレートは定義されます。\n\nThe path to the blocks schema file: app/schemas/block_manager/blocks.php\nブロックスキーマへのパスは：*app/schemas/block_manager/blocks.php*\n\nBlock settings:\n\n- **Name** - block name.\n　　　　ブロック名\n- **Template** - template (.tpl) defined for a block. Block templates are stored in the templates/blocks/ directory.\n　　　　　　ブロックごとに定義されたテンプレート。ブロックテンプレートは*templates/blocks/* ディレクトリにあります。\n\n- **Wrapper** - template to include content. Wrappers are stored in the /templates/blocks/wrappers/ directory.\n　　　　　コンテンツを含んだテンプレート。ラッパーは*/templates/blocks/wrappers/*ディレクトリにあります。\n\n- **User-defined CSS-class** - used to add a CSS-class.\n　　　　　　　　　　　　　　CSSクラスを追加するために使用する\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"If you need to place a block in the top panel, header, or footer (containers that are used only in the Default location) for a certain page, use the HTML block with Smarty support.\\n特定のページにトップパネルやヘッダー､フッター(デフォルトのロケーションのみで使用されるコンテナ)を置く必要がある場合は、Smarty supportでHTMLブロックを使用します。\\n\\nIn this block use the $runtime.controller and $runtime.mode variables to define the current page.\\nこのブロックでは現在のページを定義するために`$runtime.controller` と `$runtime.mode`変数が使用されます。\"\n}\n[/block]\n\n例；\n\nTo display some text in the header of the Categories page:\n**カテゴリー**ページのフッターにテキストを表示するには：\n\nCreate the HTML block with Smarty support block in the header container.\n- ヘッダーのコンテナに**HTML block with Smarty support**ブロックを作成します。\n\nIn the block write the following code:\n- ブロックに以下のコードを書きます：\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{if $runtime.controller == \\\"categories\\\" && $runtime.mode == \\\"view\\\"}\\n        <p>Categories page</p>\\n{/if}\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Layout Export/Import\"\n}\n[/block]\nYou can export the created layout to a file of import previously created layout.\n作成したレイアウトを以前レイアウト作成しインポートしたファイルにエクスポートすることができます。\n\nTo do it, in the Design > Layouts section of the administration panel click the gear button in the right upper corner of the page and choose the desired action.\nそれを行う為には、管理パネルの*Design > Layouts* セクションに移動し、ページの右上隅のギアボタンをクリックします、そして、目的のアクションを選択します。\n\nWhen creating the new theme, export layout to the layouts directory after adjusting blocks (remove the old files previously).\n新しいテーマを作成する場合は、ブロックを調子した後レイアウトをレイアウトディレクトリへエクスポートします。\n\nThis layout will be authomatacally enabled when installing a theme.\nこのレイアウトはテーマをインストールすると自動的に有効になります。\n\nExport/Import file includes:\nエクスポート/インポートファイル：\n\nLayout settings.\n- レイアウトの設定\n\nContainers, grids, and blocks structure and settings.\n- コンテナ、グリッド及びブロックの構造と設定\n\nBlocks content. It is defined in the Content tab and depents on the block type.\n- ブロックのコンテンツ。コンテンツタブに定義さており、ブロックのタイプによ異なります。\n\nFor example, for the HTML block and HTML block with Smarty support blocks it is text included in the text area.\n例えば、**HTMLブロック** と **Smarty supportでのHTMLブロック**はテキストエリアに含まれるテキストです。\n\nIn the block of the Products type the criteria of products display (newest, recently viewed) and their settings are defined.\n製品タイプのブロックでは製品表示の基準（最新、最近表示した）と設定は定義されています。\n\nBut not all the blocks have content.\n全てのブロックがコンテンツを持つわけではない。\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Layout is installed only when you install a theme.\\nレイアウトはテーマがをインストールする時のみインストールされます。\\n\\nIf you install a theme and then switch to another one, the Layout of the latest installed theme will be active.\\nもしテーマをインストールし他のものに切り替える場合、インストールされたテーマの最新のレイアウトは有効です。\"\n}\n[/block]","excerpt":"レイアウトは、ストアフロントのルック＆フィールをカスタマイズする強力なツールです。","slug":"layout","type":"basic","title":"レイアウトエディター"}