Drupal-themes-and-layouts
Drupal-テーマとレイアウト
この章では、テーマとレイアウト*について学習します。 Drupalは、インストール時に *Bartik テーマをデフォルトテーマとしてインストールします。 Drupal公式サイトから有料または無料のテーマを選択できます。 一般に、レイアウトはテキストとグラフィックの配置です。 サイトで使用するさまざまなレイアウトを念頭に置いて、テーマを選択することをお勧めします。
ステップ1 *-https://www.drupal.org [Drupal official site]にアクセスして、 *Get Started をクリックします。
- ステップ2 *-次の画面に示すように、*すべてのテーマ*をクリックします。
- ステップ3 *-テーマのリストを取得します。 お好みのテーマを選択し（*適応テーマ*は、この章で後ほど説明する*レイアウトと一般設定*で構成されるため、選択してください）、次の画面に示すように*バージョン*をクリックします。
- ステップ4 *-次に、[ファイルのダウンロード]を右クリックし、次の画面に示すようにリンクアドレスをコピーします。
- ステップ5 *-*アーカイブファイル*をクリックしてテーマを直接ダウンロードすることもできます。次の画面に示すように、モジュールはコンピューターにローカルにダウンロードされます。
- ステップ6 *-*外観*に移動し、次の画面に示すように*新しいテーマのインストール*をクリックします。
- ステップ7 *-*ステップ（4）*でコピーしたリンクアドレスを貼り付け、次の画面に示すようにインストールボタンをクリックします。
- ステップ8 *-リンクアドレスをダウンロードし、次の画面に示すように*インストール*をクリックした場合、リンクアドレスをコピーする代わりにテーマアーカイブをアップロードすることもできます。
- ステップ9 *-次の画面が表示され、インストールが完了するまで待ちます。
- ステップ10 *-次に、次の画面に示すように、*新しく追加されたテーマを有効にする*をクリックします。
- ステップ11 *-デフォルトでは、テーマは無効になっています。 それらを有効にするには、次の画面に示すように、[有効にしてデフォルトを設定]をクリックします。
- ステップ12 *-次の画面に示すように*設定*をクリックして、サイトの外観を設定します。
ステップ13 *-*レイアウトと一般設定*オプションが画面にポップアップ表示されます。この*適応テーマ*は、*標準レイアウト、タブレットレイアウト、Smalltouchレイアウト、*パネルとパネル*で構成されています。 これらのオプションは、すでに使用されている現在のAT管理テーマの表示設定を制御します。 サイトにテーマが表示されると、これらの設定が使用されます。 次に、これらのレイアウトを1つずつ説明します。
- ステップ14 *-*標準レイアウト*では、デスクトップ、ラップトップ、その他の大画面デバイスのレイアウトを選択できます。
- サイドバーの位置を選択-ラジオボタンをクリックしてサイドバーの位置を選択できます。
- 各サイドバーの幅を設定します-最初のサイドバーと2番目のサイドバーの幅を、％またはpxまたはemで設定できます。
- ページ幅の設定-ページの幅を設定できます。
- 最大幅を設定します-最大幅を設定するには、チェックをオンまたはオフにします。
- このレイアウトのメディアクエリ-メディアクエリは、メディアデバイスごとに異なるスタイルルールを定義し、このレイアウトのデフォルトでは 1025px になります。
ステップ15 *-次に、次の画面に示すように*タブレットレイアウト*をクリックします。 タブレットデバイスには、 *Landscape および Portrait の2つの向きがあります。 向きごとに異なるレイアウトを構成できます。
*Landscape tablet* および *Portrait tablet* では、サイドバーの位置、各サイドバーの幅、およびページ幅を選択できます。 *Landscape tablet* のメディアクエリは、min-width：769pxおよびmax-width：1024pxになります。 *Portrait tablet* の場合、最小幅：581pxおよび最大幅：768pxステップ16 *-次の画面に示すように、 *Smalltouch Layout をクリックします。 * Smalltouchレイアウト*には、 Landscape および Portrait の2つの向きもあります。 向きごとに異なるレイアウトを構成できます。
*Landscape Smalltouch* では、サイドバーの位置を選択して幅を設定できます。 *Portrait Smalltouch* は常に、メインコンテンツの下に横に積み上げられたサイドバーを持つ1つの列に表示されます。 *Landscape Smalltouch* のメディアクエリはmin-width：321pxおよびmax-width：580pxになり、 *Portrait Smalltouch* のメディアクエリはmax-width：320pxになります。- ステップ17 *-次に、次の画面に示すように*パネルとGpanels *をクリックします。 アダプティブテーマは、レスポンシブパネルとGpanelレイアウトをサポートしています。 この機能を使用するには、https://www.drupal.org/project/panels [Panels module]、https://www.drupal.org/project/ds [Display Suite]（with Panels）またはAdaptiveを使用できます。テーマネイティブhttps://adaptivethemes.com/documentation/using-gpanels[Gpanels]レイアウト。
各デバイス範囲のオプションを選択し、タイプをレイアウトできます。 ひとつずつ見ていきましょう。
- [標準レイアウト]で、サイトを標準レイアウトで表示するときに使用するレイアウトを選択できます。 * 2、3、4、5、6、またはインセット*をクリックすると、次の画面に示すように列の配置を選択できます。
- TABLE LANDSCAPE、TABLET PORTRAIT 、および SMALLTOUCH LANDSCAPE レイアウトについても同じ手順を実行します。
- ステップ18 *-すべての設定が完了したら、次の画面に示すように*設定を保存*をクリックします。
