Drupal 8の theme(テーマ) 作成方法 (超簡易版)

追記）
予め、classy、stable のテーマがインストールされていることが条件。
追記は以上  

【 重要 】∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
作成前に、キャッシュの全てをクリアーさせる。
ー 方法 ー
設定を反映させるために
「すべてのキャッシュをクリアー」
ボタンをクリック
∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞

完成図　背景色をピンク色するだけのテーマ

【 手順 】
1.テーマ名を決める
2.フォルダーとファイルを作成
3.作成したフォルダーとファイルを所定フォルダーに移動
4.テーマをインストール

１．テーマ名を決める

テーマ名      example

２．フォルダーとファイルを作成

[custom]
  ┗ [example]
        ┣ [css]
        ┃    ┗ style.css
        ┣ [templates]
        ┃    ┗ page.html.twig
        ┣ example.info.yml
        ┣ example.libraries.yml
        ┗ screenshot.png

[ ] はフォルダー
custom フォルダーは任意（複数のテーマを置くために便宜上作成）
example 以下のフォルダに
フォルダー    2つ
ファイル        5つ

個別のファイル内容は後述

３．作成したフォルダーとファイルを所定フォルダーに移動

/サイト名/themes/

に custom フォルダーを置く

４．テーマをインストール

管理からテーマを選択

下部にインストール可能なテーマが表示される。

「インストール」または「インストールしてデフォルトに設定」をクリック


以上で、インストール終了

「インストール」をクリックした場合、テーマを有効にするために、デフォルトのテーマとして設定する。

各ファイルの内容

▶ example.info.yml

name: example
type: theme
base theme: classy
description: 'example theme'
version: 8.x
core: 8.x
libraries:
      - example/base
regions:
      header: Header
    content: Content
      footer: Footer

▶ example.libraries.yml

base:
version: VERSION
css:
component:
css/style.css: {}

【 screenshot.png 】
テーマのイメージ画像


▶ style.css

body {
background-color: #FFCFCF;
}

背景色を #FFCFCF に指定。



▶ page.html.twig

<header>
<div class="header">
{{ page.header }}
</div>
</header>

<div class="container">
<main>
{{ page.content }}
</main>
</div>

<footer>
<div class="footer">
{{ page.footer }}
</div>
</footer>