予定より若干遅れたものの、ついに新たなWordPressのデフォルトテーマが登場しました。その名もTwenty Twenty-Twoです！
WordPress 5.9のリリースに伴い、こちらの新しいWordPressデフォルトテーマが追加されます。このテーマを深く知るために、WordPress 5.9で動作するローカル開発環境にTwenty Twenty-Twoをインストールし実際に使用してみました。
まずはその結果をご報告してから、Twenty Twenty-Twoのあらゆる機能の概要をお分かり頂けるよう、私たちの見解をまとめてお伝えします。
Twenty Twenty-Twoはこれまでになく柔軟かつ軽量で、カスタマイズ性の高いデフォルトテーマです。ブロックやパターン、テンプレートを自由に試すことができるのが特徴です。
ブロックテーマなので、WordPress 5.9の待望の新機能であるフルサイト編集、グローバルスタイル、ナビゲーションブロック、新しい画像ギャラリーを確認、使用しやすいようになっています。
最初に強調しておきたい点として、Twenty Twenty-Twoは初めてのデフォルトのブロックテーマです。
この新たなテーマの最大の目的はユーザーの自由度を高めることです。標準でこれだけ多くのパターンやテンプレートが用意されているため、ほんの数クリックで複雑なレイアウトを構築することができます。あとはスタイルをカスタマイズするだけでOKです。
技術的な観点では、Twenty Twenty-Twoについてご紹介することはWordPress 5.9の最新の便利な機能についてご説明することと、ほぼ同義です。Twenty Twenty-Twoというテーマを通して、新しいサイト編集機能や、プラットフォーム自体の将来性について、より良く理解することができるでしょう。
そんなわけで、今回この新しいテーマをご紹介します。
はじめに、WordPress 5.9とTwenty Twenty-Twoの新たなサイト編集フローを扱います。
その後、Twenty Twenty-Twoで実装される主要なブロックテーマの機能を深掘りします。ここでは、グローバルスタイル、ブロックパターン、テンプレート、テンプレートパーツについて解説します。
しかし、Twenty Twenty-TwoとWordPressはそれだけでは語り尽くせません。そのため、最後の章ではtheme.jsonファイルを利用してTwenty Twenty-Twoの機能を拡張する方法を簡単にご説明します。
Here’s a first look at the next WordPress default theme! I’m excited to be co-leading it alongside @jffng, and we both hope you'll contribute to it and/or just enjoy using it! 🐦🦆🐤🦉https://t.co/covjrpgFIO
— kjellr (@kjellr) October 6, 2021
それでは、WordPressの最新のデフォルトテーマ「Twenty Twenty-Two」を詳しく見ていきましょう。
Twenty Twenty-Twoの新たなサイト編集フロー
WordPress 5.9には、いくつかのフルサイト編集機能が備わっています。WordPress 5.9でTwenty Twenty-Twoなどのブロックテーマをインストールした場合、次のことができるようになります。
- より多くのブロックとパターンを用いた投稿や固定ページの作成、編集
- jsonファイルで定義された設定とスタイルをグローバルスタイルインターフェースから編集
- 固定ページや投稿用のテンプレートの作成と編集
- ヘッダー、フッターなどのテンプレートの特定のエリア用のテンプレートパーツの作成、編集
これら全ての機能がWordPressそのものに統合されたことをうけ、WordPressコアコントリビューターの面々は、情報アーキテクチャ改良について議論し、サイト編集フロー全体を見直しました。
Twenty Twenty-Twoを利用し始めてまず気がつくことは、サイトエディタへのアクセス方法が、WordPressダッシュボードのメインメニューではなく、「外観」メニュー内に移動していることでしょう。
テンプレートとスタイルの編集機能を同じ「外観」メニューに配置することで編集作業がより効率的になっています。また、利用している機能がページの表示に関するものであることが分かりやすくなりました。
「Editor」をクリックすると、サイトのトップページのテンプレートが表示されます。表示設定によって、最新の投稿もしくは固定ページのいずれかになっています。
次に、左上のWordPressのアイコンをクリックすると、新しいサイトエディタのナビゲーションメニューが表示されます。その中に、「サイト」、「Templates」、「Template Parts」が表示されます。
さらに詳しく見ていきましょう。
「サイト」のメニューをクリックすると、トップページのテンプレート（最新の投稿または固定ページ）が開きます。
「Templates」メニューをクリックすると、テンプレートの一覧が表示されます。お好きなテンプレートをクリックすると、エディタに適用されます。
本稿執筆時点では11種類のテンプレートから選べます。
右側の3点リーダー（縦）をクリックすると初期化することができます。
テーマテンプレートと違い、カスタムテンプレートは名前の変更または削除のいずれかしかできません（ただし、投稿のエディタでカスタムテンプレートを編集することができます）。
「Template Parts」メニューをクリックすると、エディタで開きカスタマイズできるテンプレートパーツの一覧が表示されます。
Twenty Twenty-Twoにはデフォルトで、4つのテンプレートパーツがあります。変更を加えたテンプレートにカーソルを合わせると、テンプレートがカスタマイズされていることを示すメッセージが表示されます。
右側の3点リーダー（縦）をクリックすると加えた変更を初期化することができます。
テンプレートとテンプレートパーツの編集
エディタはテンプレートとテンプレートパーツを編集するためのインターフェースです。
ここからブロックやパターンを簡単に追加、編集でき、加えた変更はテンプレートを使用している全てのページに自動で適用されます。
次のスクリーンショットはエディタの404エラー画面のテンプレートです。見出しとテキストと検索ボックスのみで構成されたシンプルなテンプレートですが、UIの仕組みがよく分かります。
これを好みに合わせてカスタマイズすることができます。例えば、画像投稿のグリッドを追加してサイト訪問者の注意をひき、サイトの別のコンテンツへと誘導することなどができます。
テンプレートエディタの上部にあるヘッダーのドロップダウンメニューには、テンプレートのエリアの一覧が表示されます。サイドバーの設定メニューの「Template」タブにも表示されます。
任意のテンプレートのエリア（ヘッダーなど）をクリックすると、編集したいテンプレートパーツに直接移動できます。
右側の3点リーダー（縦）をクリックすると独立したテンプレートパーツエディタが開きます。
テンプレートパーツエディタではドラッグできる箇所が2つあり、異なる画面解像度でのテンプレートの挙動を確認することができます。
変更内容に満足したら、編集を保存し、メインのテンプレートエディタへ戻って結果を確認しましょう。
新たな情報アーキテクチャについてもっと詳しく知りたい方は、次の記事をご覧下さい。
Twenty Twenty-Twoの核心：theme.jsonの概要
Twenty Twenty-Twoとブロックテーマの仕組みをしっかりと理解するために、theme.jsonファイルを利用した新たなテーマの設定とスタイルの仕組みを見てみましょう。
WordPress 5.8で導入されたこの新しい仕組みにより、テーマ開発者は一元的にエディタの設定や機能を追加できるようになりました。
Twenty Twenty-Twoではtheme.jsonファイルは次の構造になっています。
{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}それぞれのセクションを簡単に見ていきましょう。
Version
version は仕様のバージョンを示しており、現在は2になっています。
Settings
settings では共通、もしくはブロックレベルでの設定を定義します。上位の階層で定義された設定は全てのブロックに適用されますが、ブロックの個別の設定で共通の設定を上書きすることもできます。Twenty Twenty-Twoでは次のように設定されています。
{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}デフォルト設定はプリセットと呼ばれ、特定の命名規則に基づいてCSSカスタムプロパティとクラス名を生成するのに使用します。
- CSSカスタムプロパティ：
--wp--preset--{preset-category}--{preset-slug} - CSSクラス名：
.has-{preset-slug}-{preset-category}
テーマでプリセットを定義すると、対応するCSSカスタムプロパティを使ってstylesのセクションでブロックや要素をスタイリングすることができます。
Styles
styles では、テーマのブロックと要素のデフォルトスタイルを定義します。例えば、次のTwenty Twenty-Twoの例では、コアのボタンブロックのスタイルが定義されています。
{
"version": 2,
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--typography--font-size--normal)"
}
}
}
}
}CSSカスタムプロパティがプロパティの宣言で使用されていることが分かります。
Custom Templates
The customTemplates では、カスタムテンプレートを定義します。nameとtitleは必須です。他にもpostTypesプロパティを設定することで、どの投稿タイプでテンプレートが使用できるかを定義できます。
Twenty Twenty-Twoでは4つのカスタムテンプレートが用意されています。
{
"version": 2,
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "page-large-header",
"title": "Page (Large Header)",
"postTypes": [
"page"
]
},
{
"name": "single-no-separators",
"title": "Single Post (No Separators)",
"postTypes": [
"post"
]
},
{
"name": "page-no-separators",
"title": "Page (No Separators)",
"postTypes": [
"page"
]
}
]
}対応する.htmlファイルはblock-templatesフォルダにあります。
Template Parts
templateParts ではテンプレートパーツを定義します。
{
"version": 2,
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-large-dark",
"title": "Header (Dark, large)",
"area": "header"
},
{
"name": "header-small-dark",
"title": "Header (Dark, small)",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}name と title は必須です。他にも、area を定義して、エディタ内でテンプレートパーツがレンダリングされる箇所を指定できます。
テンプレートパーツの.htmlファイルはtemplate-partsフォルダにあります。
Twenty Twenty-Twoのtheme.jsonについて学んだことで、テーマの機能や新たな編集インターフェースについての理解が深まったのではないでしょうか。
続いてTwenty Twenty-Twoのグローバルスタイルを見ていきましょう。
Twenty Twenty-Twoのグローバルスタイル
Twenty Twenty-Twoのstyle.cssを見ると、CSSの宣言の数が非常に少ないことがわかります。これは、ブロックベースのテーマではスタイルはtheme.jsonファイルで定義されるからです。
WordPress 5.9ではさらに、グローバルスタイルと呼ばれるインターフェースからサイト要素の外観を編集できる新機能が実装されています。
グローバルスタイルインターフェースはエディタの右上に位置する新しい「Styles」アイコンをクリックして利用できます（こちらも合わせてご覧下さい：The Global Styles Interface）。
アイコンをクリックすると新しく追加された「Styles」サイドバーが表示されます。そこには次の3つのパネルがあります。
- 編集内容のプレビューが表示される「Preview」パネル
- フォント、色、レイアウトの編集が可能な「Global Styles」パネル
- ブロック毎のスタイルの設定ができる「Blocks」
Twenty Twenty-Twoのカラーパレット
「Colors」パネルでは、パレットを編集し、背景、テキスト、リンクの色を指定、変更することができます。
「Palette」パネルでは「Theme」パレットや「Default」パレットのカスタマイズができます。また、独自のパレットを作成することも可能です。
色の設定を生成しているコードがある場所は既にご存じでしょうか？
お好きなコードエディタでTwenty Twenty-Twoのtheme.jsonを開いてみてください。次のカラーパレットの宣言を探しましょう。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]
}
}
}以下の画像を見ると、上記のコードがTwenty Twenty-Twoのカラーパレットと一致していることが分かります。
ここで、特定のブロックのデフォルト背景色を変更したいとします。ブロックの背景に別の色を選択すると、その要素のbackground-colorプロパティに対応するCSSの変数が割り当てられます。以下の画像はその一例です。
これだけで完了です。カスタマイザーにカスタムCSSを追加したり、子テーマを作成したりする必要は一切ありません。
さらにいくつかの例を用いて、Twenty Twenty-Twoのグローバルスタイルについてもう少し学んでいきましょう。
フォントの設定
「Typography」パネルでは、サイトのテキストやリンクのフォントスタイルの共通設定ができます。
各アイテムにつき、フォントファミリー、サイズ、行の高さを調整できます。
これらの設定を生成するコードはどこにあるのでしょうか？
Twenty Twenty-Twoのtheme.jsonを開き、typographyのセクションを探します。次のような設定があるはずです。
{
"version": 1,
"settings": {
"appearanceTools": true,
"typography": {
"dropCap": false,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Normal",
"size": "1.125rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "1.75rem",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "large"
},
{
"name": "Huge",
"size": "clamp(2.5rem, 4vw, 3rem)",
"slug": "huge"
}
]
},
}上記のコードには2種類のフォントファミリーと5つのフォントサイズが記載されています。
このコードはグローバルスタイルの「Typography」では次のように表示されます。
行の高さの設定を生成するコードはどこにあるのか気になる方もいるかもしれませんが、実は、Twenty Twenty-Twoにはそれ専用の設定は存在しません。appearanceToolsプロパティにより設定を行います。これはいくつかの設定の宣言に対するショートカットとなっています（詳しくは後述）。
レイアウトと外観の設定
グローバルスタイルサイドバーの最後の項目は「Layout」です。本稿執筆時点では、扱うことのできる設定はpadding（余白）のみです。
Twenty Twenty-Twoのレイアウトパネルは一度に複数の設定ができるブーリアンであるappearanceTools設定プロパティで有効になっています。
{
"settings": {
"appearanceTools": true
}
}"appearanceTools": trueは次の宣言ブロックに取って代わります。
{
'settings': {
'border': {
'color': true,
'radius': true,
'style': true,
'width': true
},
'color': {
'link': true
},
'spacing': {
'blockGap': true,
'margin': true,
'padding': true
},
'typography': {
'lineHeight': true
}
}
}これでtheme.jsonファイルで定義された設定がグローバルスタイルの設定画面とどのように対応しているか、お分かり頂けたはずです。
この新しいデフォルトテーマの全容を把握するにはもう一つ欠かせない項目が残っています。それはブロックパターンです。
Twenty Twenty-Twoのブロックパターン
Twenty Twenty-Twoはパターンのコレクションと表現できるかもしれません。Twenty Twenty-Twoには既存のブロックパターンが豊富に用意されており、これを用いて独創的なネスト型ブロック構造を組むことができます。
ここでのキーワードは「ユーザーの自由度の向上」です。ブロックパターンを利用すると、例えHTMLやCSSの知識が一切なくても、魅力的なポートフォリオからワンページのプロモーションサイトまで、あらゆるページを作成できます。
しかも、WordPress 5.9では新機能であるパターンエクスプローラーによりパターンの仕組みが大幅に改良されました。パターンエクスプローラーとはフルスクリーンモードでパターンを確認できる機能です。
また、この新しい機能ではパターンディレクトリから直接、簡単にブロックパターンをインポートできます。WordPress利用者や開発者の可能性が大きく広がる機能であり、将来的にはより一層普及することが予想されます。
Twenty Twenty-Twoには65種類を超える豊富なパターンが用意されており、5つのカテゴリーに分類されています。
これらの便利なパターンはTwenty Twenty-Twoのテンプレートやテンプレートパーツと抜群の相性で、編集作業が非常に快適になります。
まだブロックパターンを利用したことがない方のために、これが便利な機能とみなされている理由を、簡単な例を用いてご説明します。
例えば、インデックスと個別記事のテンプレートからデフォルトのフッターを削除し、別のTwenty Twenty-Twoのブロックパターンと置き替えたいとします。
「外観」もしくはWordPressのフロントエンドのツールバーのボタンからサイトエディタを立ち上げ、インデックステンプレートをカスタマイズします。
「Index」をクリックすると、ヘッダーのドロップダウンメニューが表示され、ページで利用できるテンプレートのエリアの一覧が確認できます。「Footer」の横にある三点リーダー（縦）をクリックし、「Edit Footer」をクリックします。
先に述べたとおり、独立したテンプレートパーツエディタが立ち上がります。
ブロック挿入画面を開き、「Patterns」をクリックします。
新しく追加されたパターンエクスプローラー機能を開き、「Twenty Twenty-Two Footers」のカテゴリーを選択し、好みのフッターを選びます。
必要に応じてブロックを追加、編集します。
変更内容に満足したら、ヘッダーを保存し、サイトを再確認しましょう。
以下の画像はそれぞれ異なるヘッダーとフッターの変更を加えた3つのテンプレート（インデックス、固定記事、区切りなしの固定記事）の比較です。
Twenty Twenty-Twoを子テーマで拡張する
ブロックテーマの子テーマを作成するのは通常のテーマの子テーマを作成するのとは大きく違います。
ただ、ブロックテーマの構造を一度理解しさえすれば、Twenty Twenty-Twoやそれ以外のブロックテーマの子テーマを難なく作成できるはずです。
それでは早速Twenty Twenty-Twoを使用したサイトの雰囲気を調整する方法を学んでいきましょう。
1. Twenty Twenty-Twoの子テーマを設定する
/wp-content/themesディレクトリ内に新規フォルダを作成し、任意の名前をつけます（テーマ開発の規格に準じたもの）。今回の例では子テーマのフォルダを「twentytwentytwo-child」と名付けました。
次はstyle.cssファイルが必要です。お好きなコードエディタを開き、次のスタイルシートを作成します。
/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments
Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/ここでも、必要に応じて項目を編集しましょう。
これで子テーマをプレビューできるようになります。管理画面の「外観」＞「テーマ」から有効化できます。
2. 共通設定をカスタマイズする
WordPress 5.9以降、theme.jsonファイルを持つ子テーマには親テーマの設定が適用されるようになりました。子テーマのtheme.jsonファイルで特定のスタイルを定義した場合、それは親テーマのスタイルに加えて適用されます。
そのため、theme.jsonファイルで親テーマのスタイルを全て定義し直す必要はなく、必要なものだけ追加すれば大丈夫です。
カスタムカラーパレットの設定方法
Twenty Twenty-Twoの子テーマの設定で一番簡単なのはカラーパレットの置き替えです。子テーマのtheme.jsonで次の通り新しいカラーパレットを定義するだけです。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#001F29",
"name": "Background"
},
{
"slug": "primary",
"color": "#D6FDFF",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FDFCDC",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#FED9B7",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#E94435",
"name": "Accent"
}
]
}
}
}ファイルを保存しサイトエディタへ戻ります。デフォルトのカラーパレットが上記で定義したものに置き替わっているはずです。
色はパレット自体の順番に表示されます。名前はベストプラクティスやGithubで議論されている命名規則に準ずる必要があります。
theme.jsonの色についてもっと詳しく知りたい方はCarolina Nymark氏による詳しい記事をご覧下さい。
独自のデュオトーンフィルターの設定
デフォルトのデュオトーンを好みのフィルターに置き換えることもできます。
子テーマのtheme.jsonで設定のpaletteプロパティと同じ階層に、次のコードを追加するだけでOKです。
{
"version": 2,
"settings": {
"color": {
"palette": [...],
"duotone": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "default-filter",
"name": "Default filter"
}
]
}
}
}ファイルを保存し、ブロックエディタで結果を確認します。デュオトーンフィルターが一つだけ表示されているはずです。
3.ブロックのスタイルをカスタマイズする
先ほどもご説明したとおり、WordPress 5.9ではtheme.jsonの設定を調整し、グローバルスタイルインターフェースからスタイルを変更できます。
ブロックのスタイルは、ブロックが対応するblock.jsonファイルで特定の機能のサポートを宣言している場合にのみ、グローバルスタイルインターフェースから編集することができます。しかし、子テーマのtheme.jsonから、デフォルトのブロック設定を上書きすることは可能です。
ここで、記事タイトルとグループブロックのスタイルを上書きしたいとします。次の通り、追加または上書きしたいスタイルを定義するだけでOKです。
{
"version": 2,
"settings": {...},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
},
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"spacing": {
"padding": "var(--wp--custom--spacing--small)"
}
},
"core/group": {
"spacing": {
"margin": {
"top": "0",
"bottom": "0"
}
}
}
}
}
}上記の例では、core/post-titleのフォントファミリー、背景色、余白の値を変更し、core/groupの上下のマージンも変更しました。
公開されるサイトは次のようになります。
レビューは以上です。
今回の記事の趣旨から外れてしまうため、子テーマについてはこれ以上深掘りしませんが、GithubにはTwenty Twenty-Twoの子テーマの例が他にも掲載されています。
まとめ
今回はWordPressのこれまでで最も柔軟性の高い、新しいデフォルトテーマ「Twenty Twenty-Two」とその機能を詳しくご紹介し、WordPress 5.9で導入された新しい情報アーキテクチャについても解説しました。さらに、新しいグローバルスタイルのインターフェースにも少し触れました。
数々の魅力的な機能の開発が進められており、新しい編集機能は、より強力で信頼性が高く、機能的になっていることは間違いなさそうです。
WordPressの新機能は次々と登場する一方で、削除されるものや、重要視されなくなるものもあります。多くのユーザーが、カスタマイザーはどうなるのか、既存のテーマとの互換性はどのように維持されるのかといったことを心配していることでしょう。
ただし、従来のテーマからブロックテーマへいきなり完全に切り替わってしまう心配はご無用です。現在、4種類のテーマが用意されています。
- ブロックテーマ：フルサイト編集向けに設計されたテーマ
- ユニバーサルテーマ：カスタマイザー、サイトエディタ両方で利用できるテーマ
- ハイブリッドテーマ：theme.jsonなどのフルサイト編集機能に対応している従来のテーマ
- クラシックテーマ：PHPテンプレート、phpなどを備えたテーマ
このようにたくさんの選択肢が用意されています。まだブロックテーマに切り替えるのに躊躇している方にとっては嬉しいニュースかもしれません。
あとはあなた次第です！あなたは思い切って今すぐブロックテーマに切り替える心の準備はできていますか？コメント欄で是非ご意見をお聞かせ下さい。
コメントを残す