WordPress フルサイト編集対応のブロックテーマ unitone について

はじめまして、unitone を開発しているキタジマタカシと申します。Snow Monkey という WordPress テーマも開発しています。

2022年に入ってから約6ヶ月開発してきて、やっととりあえずリリースできるところまで持ってこれたので、今回はなぜ unitone を開発しようと思ったのか、unitone で何を解決しようとしているのかについて書きたいと思います。

目次

unitone を開発した経緯

WordPress 6.0 でフルサイト編集の機能が強化されました。サイトエディターは未だベータ版ではあるものの、主要なテンプレートがサポートされ、パターンの UI やブロックのロック機能が強化されるなど、ウェブサイト全体をブロックで組みやすく、そして壊れにくくなり、かなり実用レベルに近づきました。

Snow Monkey はフルサイト編集に対応していないクラシックテーマですし、他の主要な WordPress テーマもまだほとんどクラシックテーマだと思いますが、今後(主流にまでなるかはわかりませんが)フルサイト編集に対応したブロックテーマの割合がどんどん増えてくるのではないかと思っています。クラシックテーマではユーザーが思い通りに手を入れられなかったヘッダーやフッターなどのレイアウト部分までブロックで自由に組めるようになるのはそれなりに需要があるはずです。

サイトエディターの開発が進み、機能的にも UI 的にももっと洗練されていけば、フルサイト編集もきっと一般のユーザーに違和感なく受け入れられる日がくると思います(ブロックエディターもリリース当初は大批判されていましたが、今では多くの方が違和感なく使っていますよね)。

近い将来であるその日のためになるべく早めにリリースしておきたいなと思い、2022年の頭から開発をはじめました。

また、「Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論」という本を読んだことも unitone を開発するきっかけになりました。これらは unitone で解決したい課題にもつながる話題なので、そちらで詳しく書きたいと思います。

unitone で解決したい課題

Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論」という本があります。Every Layout という海外のウェブサイトが書籍化されたものです。僕はこの本を読んだとき「これだよこれ!」と強い共感を感じ、興奮しました。

Every Layout の詳細については書籍や他の方が書かれた感想記事をご参照いただくとして、僕が特に感銘を受けたのは下記の3点についてです。

  • ブレイクポイントではなくコンテンツに基づいたレスポンシブデザイン
  • レイアウトプリミティブ
  • モジュラースケール

ブレイクポイントではなくコンテンツに基づいたレスポンシブデザイン

メディアクエリでは、レイアウトの再構成をハードコーディングで表現することになります。さらに、要素やコンポーネントが実際に置かれている状況と結びついていないのです。(中略)960pxは何か特別な幅なのでしょうか? 959pxで小さいサイズになることが本当に適切だといえるのでしょうか?

Every Layout

現代のウェブデザイン・web 制作において、レスポンシブデザインは当たり前のものとなっており、その実現のためにメディアクエリ(ブレイクポイント)が使われることもまた当たり前のことです。メディアクエリ(ブレイクポイント)を使うことは、あまり更新されなかったりあまりコンポーネント化されていないウェブサイトでは特に問題にならないかもしれませんが、Snow Monkey を開発していると度々悩まされることがありました。

Snow Monkey は汎用的な WordPress テーマであり、表現したいデザインに応じて、用意された多数のブロックやウィジェットを、メインエリアやサイドバーなど任意の場所に配置できます。

このとき、例えばメインエリアは700px、サイドバーは250pxだったとして、そこにそれぞれ同じブロックを配置したとします。しかし配置したエリアの幅が倍以上違うのでブロックを同じレイアウトで表示するのは難しくなります。複数カラムを持つブロックであれば、サイドバーではカラムを落とさないといけないでしょう。

メディアクエリは基本的にはビューポートの幅を基準とするので、このような配置エリアの幅に応じたデザインを実現することはできません。コンテナクエリーが普通に使えるようになればこの問題は解決するかもしれませんが、現状はまだ使えないので、別の方法を考える必要があります。各エリアに名前をつけ、それぞれのエリア毎にメディアクエリと CSS を書くことでなんとか問題を解決できます。しかし、この方法ではCSSが複雑になり、管理が難しくなります。また、新しいエリアやブロック、ウィジェットエリアが追加されるたびに、同じ作業を繰り返す必要があります。

Every Layout には、Flex レイアウトや Grid レイアウトを活用してメディアクエリを排除し、コンテンツとは関係のないビューポートを基準とするのではなく、コンテンツを基準に表示を変化させるアイデアが書かれています。unitone も全面的にその考えを採用しました。どんな場所にも柔軟にブロックを配置でき、そしてコンテンツを基準に適切な表示がなされることを目指しています。

レイアウトプリミティブ

Every Layoutの目的は、それらひとつひとつの小さなレイアウトが何であるかを定義し、取りまとめることです。本書ではこれらを「プリミティブ」と呼びます。(中略)プリミティブにはそれぞれ単一の責務があります。「要素間に垂直のスペースを設ける」や「要素を等間隔に配置する」、「水平方向に要素を引き離す」などです。これらプリミティブは、コンポジションの中で互いに親子または兄弟要素として配置されることを前提に設計されています。

Every Layout

「要素間に垂直のスペースを設ける」「要素を等間隔に配置する」のような箇所は1つのサイト内で何箇所もあると思います。そして、それぞれの箇所に応じてそれ用の CSS を書くのが一般的かと思います。その場合、同じようなレイアウト用の CSS が何箇所も CSS ファイル内に重複して存在することになります。

レイアウトと装飾を分離し、レイアウトプリミティブを用意してレイアウトを実現すれば、CSS の重複をかなり減らすことができますし、各レイアウトプリミティブは単一の責務しかもたないのでメンテナンスも簡単になります。

unitone では Every Layout のレイアウトプリミティブにインスパイアされて開発した各ブロックでレイアウトを実現します。

モジュラースケール

音楽は基本的に数学的な表現です。組版において音楽的性質が語られるのは、組版と音楽は数学的な基礎を共有しているためです。(中略)規則性によって調和のとれた音が生まれます。(中略)調和が必要なのは、視覚的なレイアウトにおいても同様です。

Every Layout

Every Layout では「1.5」という数値をもとに、その倍数で line-height や余白を定義する方法が書かれています。ある統一された基準を採用しそれに従うことで調和のとれた秩序あるデザインが実現されるというわけです。このような数値と倍数に基づいたもの以外でも、例えば黄金比やフィボナッチ数列などを用いたデザイン手法も有名ですよね。そのような比率や数列のデザインは自然界にも見られるそうです。

僕はデザインを専門的に学んだことがないので、どういうバランスが良いのだろうか、これくらいのバランスにしたけどこれを論理的に説明できないのだろうか?といつも悩んでいました。Every Layout のモジュラースケールの考え方に触発されて、いくつか数学に基づいたデザインの書籍を読んだりしました。

unitone では、文字サイズは調和数列、余白はフィボナッチ数列に基づいてサイズの種類を用意しました。各ブロックではそれらの用意されたサイズに基づいて文字サイズや余白を設定できるようにしました。また、メディアクエリによる文字サイズや余白サイズの調整は使わないというルールで開発しているので、clamp を用いることでビューポートが小さいときにはバランスを保ったまま自動的に縮小されるようにしました。

フィボナッチ数列に基づいた余白のバリエーション
調和数列に基づいた文字サイズのバリエーション

文字サイズと line-height のバランスと自動化については Snow Monkey を開発する以前からずっと僕の中での課題でした。今回やっとそれが一段落した実感があります。

CSS カスタムプロパティの活用

Snow Monkey は昨年末あたりに IE11 のサポートを終了しました。IE11 のサポートを終了したことで使用できるようになった新しい技術がいくつかあるのですが、その中でも CSS カスタムプロパティが使えるようになったことが僕にとっては一番のワクワクでした。

Snow Monkey はそれなりに歴史があるプロダクトになってきていて、互換性を考えると簡単にリファクタリングできないのですが、unitone は新しいプロダクトなので、せっかくなら CSS カスタムプロパティをフル活用してみたいと思いました。

タイポグラフィや余白まわり、各ブロックの設定などに CSS カスタムプロパティをフル活用しています。WordPress テーマをベースにしたウェブサイト制作は CSS の上書き地獄・詳細度地獄になりがちだと思いますが、CSS カスタムプロパティを使えば CSS でもっと API 的に設定ができるようになるので、もっと簡潔なコードでカスタマイズできるようになるはずです。

もっといろいろな可能性があると思うので、もし自分はもっとこういう使い方をしているよ!という方がいらっしゃいましたらぜひ教えてください!

unitone で目指すこと

unitone は、前述したようにタイポグラフィとレイアウトに力をいれて開発しています。デザイナーの方でなくても調和のとれた秩序あるデザインが実現できる、自由度の高い WordPress テーマに育てていきたいと考えています。

Snow Monkey は他の WordPress テーマと比べると開発者向けの機能性で、多様なフックでレイアウト面での自由度も高いほうだとは思うのですが、やはり機能や装飾が一般的な制作現場でのオリジナルテーマと比べると多いので、基本的には Snow Monkey っぽいウェブサイトになりやすいという面がありました。それはそれで短期間でそれなりのウェブサイトを立ち上げることができるというメリットがありますが、やはり本格的な自由度という面では限界もあったと思います。

Every Layout の思想とフルサイト編集はそんなモヤモヤを抱えていた僕にバチッとはまりました。

Snow Monkey は少し上のレイヤーで、unitone は少し下のレイヤーで、それぞれ違った役割を持った WordPress テーマとして開発していきたいと思います(unitone は Every Layout の理解がないと使いこなすのが難しいと思うので、Snow Monkey よりもプロ向けになるかなと思います)。


Snow Monkey との違い

全部が全然違うのですが、触ってみようとして一番混乱するのは各ブロックの性質だと思います。

Snow Monkey は各ブロックは多機能で、それ単体でデザイン・レイアウトができるものが多いです。例えばセクション系ブロックやメディアとテキストブロックがわかりやすいです。

対して unitone の各ブロックは Every Layout にインスパイアされているので単一の責務しかもっておらず、Snow Monkey のセクションブロックのようなデザイン・レイアウトを実現するためにはいくつかのブロックを組み合わせる必要があります。コンテンツの上限に padding を確保するためのガターブロック、コンテンツを一定幅に収めるためのコンテナーブロック、タイトルと中身の間に余白を確保するためのスタックブロックを組み合わせる、のような感じです。

上記のようにブロックを組み合わせて実現するのは、自由度は高いものの各ブロックの性質をよく理解していないと思い通りの見た目にするのが難しいです。そのため unitone ではブロックパターン(ブロックを組み合わせてデザイン・レイアウトしたもの)をたくさん用意しています。現状でもよくみかけるレイアウトを実現するパターンはある程度揃っていると思いますが、今後もっと増やしていきたいと考えています。

ちなみに、挿入したパターンちょっと変更したいなというときは、パターン内の任意のブロックを選択して設定を変更する必要がありますが、先に書いたように多数のブロックが入れ子になってレイアウトを実現しているので、ブロックを選択するのがちょっと難しいです。ブロックを直接クリックして選択するのではなく、ブロックツールバーやリストビューを活用すると思い通りに操作しやすいです。

あと、ブロックテーマはヘッダーやフッターなどのテンプレートパーツにブロックパターンを紐付けておくことができます。紐付いたブロックパターンがあるテンプレートパーツを選択したときはブロックツールバーに「置換」というボタンが表示されます。クリックすると紐づくブロックパターンの一覧が表示され、選択するとそのブロックパターンが適用されます。unitone でもテンプレートパーツやブロックパターンはフル活用しているので、例えばヘッダーのレイアウトを変えたい、フッターのレイアウトを変えたいという場合はブロックツールバーの「置換」ボタンから好みのレイアウトに変更してみてください。

ブロック一覧

まだ全然マニュアルを整備できていないので、ここに軽く各ブロックの説明を書いておきたいと思います。

アコーディオン

概要をクリックするとコンテンツが表示されるブロックです。Snow Monkey Blocks にもアコーディオンブロックがありますが、あのように親 > 子の関係にはなっておらず単体のブロックとして機能するようになっています。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

上記はデフォルトの見た目ですが、下記2つのブロックスタイルも持っています。

ボックス

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

パネル

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

両端

子要素を両端に配置します。子要素の幅が大きくなり両端揃えを維持できなくなった場合は1カラムになります。

Lorem ipsum dolor sit amet

consectetur adipisicing elit

デコレーター

装飾用ブロック。色、パディング、位置等が設定できます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

センター

子要素を中央揃えします。デフォルトではテキストではなくセンターブロック内の子ブロック自体が中央揃えされます。設定によりテキストも中央揃えできます。

Lorem ipsum dolor sit amet

クラスター

子要素を水平方向に並べます。

Lorem

ipsum

dolor

クラスター(区切りあり)

区切り線でコンテンツを区切るクラスターブロックです。インサーターには「クラスター(区切り:xxx)」という名前で表示されます。

通常のクラスターブロックとは違い「クラスター(区切りあり) > クラスター(区切りあり)のコンテンツ > 各ブロック」というような入れ子構造になります。

区切り:ストライプ

Lorem ipsum

dolor sit amet

consectetur

区切り:スラッシュ

Lorem ipsum

dolor sit amet

consectetur

区切り:枠線

Lorem ipsum

dolor sit amet

consectetur

コンテナー

コンテンツ領域を一定の幅に収め、さらに左右に適切な余白を確保します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

カバー

画面の広い範囲をカバーするようにデザインされています。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

voluptate velit esse cill

フレーム画像

画像を一定の画角に収めるために使用されます。

レスポンシブグリッド

シンプルなグリッドを生成します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

レスポンシブグリッド(区切りあり)

区切り線でコンテンツを区切るレスポンシブグリッドブロックです。インサーターには「レスポンシブグリッド(区切り:xxx)」という名前で表示されます。

通常のレスポンシブグリッドブロックとは違い「レスポンシブグリッド(区切りあり) > レスポンシブグリッド(区切りあり)のコンテンツ > 各ブロック」というような入れ子構造になります。

区切り:ストライプ

ジョバンニは、いつか町はずれのポプラの木が幾本も幾本も四方へ出るのでした。そしてそのこどもの肩のあたりが、どうも済みませんでしたから、とてもみんなは乗り切らないのです。

するとどこかで見たわ姉は細い銀いろの空から、さっきの入口から暗い牛舎の前へまた来ました。そういうふうに、眼の前を通るのですから、この次の理科の時間にお話します。

区切り:アンダーライン

ジョバンニは、いつか町はずれのポプラの木が幾本も幾本も四方へ出るのでした。そしてそのこどもの肩のあたりが、どうも済みませんでしたから、とてもみんなは乗り切らないのです。

するとどこかで見たわ姉は細い銀いろの空から、さっきの入口から暗い牛舎の前へまた来ました。そういうふうに、眼の前を通るのですから、この次の理科の時間にお話します。

区切り:ボーダー

ジョバンニは、いつか町はずれのポプラの木が幾本も幾本も四方へ出るのでした。そしてそのこどもの肩のあたりが、どうも済みませんでしたから、とてもみんなは乗り切らないのです。

するとどこかで見たわ姉は細い銀いろの空から、さっきの入口から暗い牛舎の前へまた来ました。そういうふうに、眼の前を通るのですから、この次の理科の時間にお話します。

ガター

上下のパディングでコンテンツを区切ります。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

スタック

子要素を一定間隔で縦に並べます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cill

スタック(区切りあり)

区切り線でコンテンツを区切るスタックブロックです。インサーターには「スタック(区切り:xxx)」という名前で表示されます。

通常のスタックブロックとは違い「スタック(区切りあり) > スタック(区切りあり)のコンテンツ > 各ブロック」というような入れ子構造になります。

区切り:ストライプ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

区切り:下線

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

区切り:枠線

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

スイッチャー

内容によってコンテンツの流れる方向が切り替わります。スイッチャーブロックの幅が「閾値」より小さくなると1カラムになります(下記では500pxに設定しています。)。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

テキスト

読みやすいテキストを表示するためにデザインされています。

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

サイドバー

サイドバー付きのコンポーネントを組み立てます。設定した幅を維持できなくなった場合は1カラム表示になります。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum

レイヤー

ブロックを重ねるためのブロックです。レイヤーは 16×9(ポートレートモードでは9×16)のグリッドを持っており、そのグリッドに沿って子レイヤーの位置をずらすことができます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

リール

子要素をシンプルに横スクロールで表示させるブロックです。

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

パンくず

そのページに応じたパンくずリストを表示するためのブロックです。

スライダー

Swiper を使ったブロックです。必要最低限の機能でビルドしているので、Swiper のフル機能を使いたい場合は別途適当なスライダープラグインを使用するのが良いかもしれません。

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて

子ページ一覧

特定のページの子ページの一覧を表示するブロックです。ブロックスタイルを切り替えることで様々なレイアウトで表示できます(HTML 構造自体も変わります)。

リッチメディア

ライセンスキーの設定

ライセンスキーを設定するとワンクリックアップデートやブロックパターンが利用できるようになります。

さらに詳しく

サイトのデザインを変更する

サイトエディターでサイトのデザインを変更する基本的な操作方法についてご案内します。

さらに詳しく

unitone の CSS カスタムプロパティ

unitone の CSS 過スラムプロパティの一覧と説明。

さらに詳しく

CSS カスタムプロパティを使ったカスタマイズ

CSS カスタムプロパティを使った具体的なカスタマイズについて。

さらに詳しく

ボックス

ライセンスキーの設定

ライセンスキーを設定するとワンクリックアップデートやブロックパターンが利用できるようになります。

さらに詳しく

サイトのデザインを変更する

サイトエディターでサイトのデザインを変更する基本的な操作方法についてご案内します。

さらに詳しく

unitone の CSS カスタムプロパティ

unitone の CSS 過スラムプロパティの一覧と説明。

さらに詳しく

CSS カスタムプロパティを使ったカスタマイズ

CSS カスタムプロパティを使った具体的なカスタマイズについて。

さらに詳しく

パネル

ライセンスキーの設定

ライセンスキーを設定するとワンクリックアップデートやブロックパターンが利用できるようになります。

さらに詳しく

サイトのデザインを変更する

サイトエディターでサイトのデザインを変更する基本的な操作方法についてご案内します。

さらに詳しく

unitone の CSS カスタムプロパティ

unitone の CSS 過スラムプロパティの一覧と説明。

さらに詳しく

CSS カスタムプロパティを使ったカスタマイズ

CSS カスタムプロパティを使った具体的なカスタマイズについて。

さらに詳しく

縦書き(ベータ版)

縦書きの文章を配置できるブロックです。

ただ、そもそもの CSS の縦書きの仕様やブラウザサポートが個人的には微妙だったり、ブロックエディターの仕様か何かわかりませんが縦書き状態で文章を入力しようとするとカーソル位置が固定&背景が動くような状態で入力しなければならず非常に入力しにくいという問題があるので、ベータ版という位置づけにしました。

今後、破壊的な変更があったりブロック自体が廃止される可能性もあるので、その点ご理解の上お使いいただければと思います。

縦書きブロックの「高さ」は都合上 js で設定するようになっているため、文章の入力をしていると適切な高さではない高さになってしまう場合があります。その場合はブラウザを狭めて縦書きブロックの幅を一度変えてもらうと、js が再度発火して適切な高さが設定されます。これもっとスムーズに高さが設定されるようにしたいんですけどどなたか良い方法を御存知ではないでしょうか…。

試行錯誤の記録

ジョバンニは、走ってその渚に行ってすっかりとまりました。それでもわたくしはどうしても見ているのでした。それから橋の上に、眼の前がさあっと明るくなってきました。

すきとおった硝子のような形に見えるやぶのしげみの間を、その小さなきれいな汽車は、そらの野原の地平線の上ではことにけむったような鷺が、まるで運動場のように通りや店の中を見まわすとして、じっとそらを見ているのでした。きっと犬もついていて、鷺がみんな、脚をこういうふうに、眼の前を通るのですからしかたありませんや。

そしてその見えない天の川の水を、見きわめようとしました。どうです、あの立派な川、ね、ちょっとこの本をごらん、いいかい、そしてこの中に書いてある。そのとき汽車はだんだんゆるやかになり、天の川もまるで遠くへ行ったのか、せいの高い青年がいっぱいにひらけました。ジョバンニは、なにかのあかりのようだ。さよならジョバンニはまるで夢中で橋の方を見ると、その白い岩の上を、水は酸素と水素からできていると考えます。

それから野茨の花のコップが、湧くように、しずかにうごいていました。そしてそのこどもの肩のあたりが、どうも済みませんでした。

それはしばらく線路に沿って出ているよ僕はあの人が邪魔なような気がするのでした。だから、おっかさんは、ぼくをゆるしてくださるだろうかいきなり、カムパネルラが、そう言っていましたら、たったいまの鳥捕りがきのどくでたまらなくなりました。そして両手に赤と青の旗をもって行きますええ、どうも済みませんでした。

そらの孔だよカムパネルラはにわかに窓の外には海豚のかたちももう見えなくなっていました。そしてこれからなんでもいつでも家じゅうまだしいんとしているのです。あなたはわかっているのを見ました。このときにはこうなのだあの声、ぼくなんべんもお母さんから聞いたわ。

unitone のダウンロード