logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
05/05/2020, by maria

Drupal 8にはブレークポイントを編集するためのユーザーインターフェースはありません。ブレークポイントが設定ファイルで定義されているため、contribでユーザーインターフェースを提供することもできません。

ブレークポイントは、ビューポート(画面、プリンター、その他の種類のメディア出力)の高さまたは幅をステージに分割するために使用され、レスポンシブデザインがさまざまなデバイスで正しく表示されるように調整されるケースを提供します。Breakpointsモジュールはブレークポイントの使用を標準化し、モジュールとテーマが相互のブレークポイントを公開または使用できるようにします。Breakpointsモジュールは、高さ、幅、解像度ごとにブレークポイントを追跡します。

CSSブレークポイントをbreakpoints.ymlファイルに入力する必要があるのは、Responsive Imagesモジュールの場合のように、Drupalがブレークポイントと対話する必要がある場合のみであることに注意してください。

05/05/2020, by maria

Drupal 7と同様に、前処理関数を使用して特定のHTMLの出力に影響を与えることができます。たとえば、メニューにクラスを追加したい場合で、PHPレベルで行うことを好むなら、それができます。これはテーマ固有のマークアップを変更する良い方法ですが、テーマに依存しないマークアップにしたい場合は、独自のモジュールを作成する方が適しています。

(注:このドキュメントでは、「mytheme」はテーマのマシン名です。たとえば、「bartik」はテーマのマシン名です。)

前処理関数を操作するには:

1. テーマのディレクトリにmytheme.themeという名前のファイルを作成または編集します

2. mytheme_preprocess_HOOKのような関数を作成します。ここで、HOOKは影響を与えたい要素を参照します*

3. 変更を書いて保存します

4. 変更が有効になるようにキャッシュを再構築します(drushがインストールされている場合、コマンドラインでdrush crを実行します)

05/05/2020, by maria

多くのTwigテンプレートには、変数として渡される1つ以上のAttributeオブジェクトがあります。Attributeオブジェクトの役割は、HTML属性のセットを保存し、開発者にこのデータを操作するための便利なメソッドを提供し、属性を簡単に出力できるようにすることです。たとえば、attributes.addClass('myclass')を使用すると、文字列の正確な連結を心配することなく単一のクラスを追加できます。

通常、テンプレートの属性は次のようになります:

<div{{ attributes }}></div>

タグ名とTwig構文の間にスペースを入れてはいけません。Drupal 8コアに含まれる「stable」テーマには、学習できる属性の例が多数あります。

デフォルトでは、すべてのテンプレートで次の属性オブジェクト変数が利用可能です:attributes、title_attributes、content_attributes。

05/05/2020, by maria

多くの開発者は、ヘッダー/フッターコードを別のファイルに保存し、page.html.twigでそのファイルを呼び出すことを好みます

プロセス

テーマのフォルダーにヘッダー用の次のファイルを作成したとします:

THEME_NAME/templates/includes/header.html.twig

そして、このファイルを次に含めたいとします:

page.html.twig

推奨される方法

Drupal 8テーマの正しい方法は、Twig名前空間を使用して現在のテーマの「templates」ディレクトリを宣言することです。例:

05/05/2020, by maria
Drupalには強力な画像管理システムがあり、画像にさまざまな効果を適用して元の画像から派生バージョンを作成できる画像スタイルを作成できます。この機能は、コアが提供する画像スタイルに依存するのではなく、そのテーマで動作するように作成されたデフォルトの画像スタイルセットを含めたいテーマで使用できます。

テーマに画像スタイルを含めるプロセスは、モジュールにデフォルト設定を含めるプロセスと似ています。

  • ユーザーインターフェースを使用して、含めたい画像スタイルを作成します
  • 画像スタイルをYAMLとしてエクスポートします
  • 適切な命名規則に従って、エクスポートしたYAMLをテーマのconfig/installディレクトリに含めます。

まず、「設定」>「メディア」>「画像スタイル」(admin/config/media/image-styles)の管理者インターフェースを使用して画像スタイルを作成します。画像スタイルが作成されて保存されると、その画像スタイルを構成する設定がサイトのアクティブ設定に保存されます。

05/05/2020, by maria

Drupal 8 RC 2のclassyテーマに含まれるすべてのCSSクラスセレクターを文書化します

形式:

.foo { }
.foo-bar { }

filename.html.twig / filename.css

Twig - Available CSS selectors in the Classy theme:

LAYOUT

Body

.user-logged-in { }
.path-frontpage { }
.path-[root_path] { }
.node--type-[node_type] { }
.db-offline { }
.visually-hidden { }
.focusable { }
.skip-link { }

file: html.html.twig
 

05/05/2020, by maria

ClassyはDrupal 8のベーステーマであり、BartikとSevenが使用するベーステーマです。Classy(およびそのサブテーマ)にあるHTMLマークアップには、BEMおよびSMACSSのCSS命名規則に似た方法で構造化されたCSSクラスが含まれています。

Classyによって開発されたBEM/SMACSSスタイルの命名規則は非常に効果的で多くの利便性を提供しますが、すべてのプロジェクトに適しているわけではありません。ClassyのCSSクラスに興味がない場合は、別のベーステーマを選択できます。

05/05/2020, by maria
サブテーマは、他のテーマと同様ですが、1つだけ違いがあります。親テーマのリソースを継承する点です。サブテーマを親テーマに接続するチェーンに制限はありません。サブテーマは別のサブテーマの子になることができ、必要に応じて分岐して編成できます。これがサブテーマに大きな可能性を与えています。

サブテーマを作成するには、他のテーマと同様に定義し、「base theme」キーを使用してベーステーマを宣言します。(このキーにはアンダースコアがないことに注意してください。)