WordPress Theme Emulsion

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

カテゴリー: docs

Block group

グループブロックでは、レイアウトを変更するためのカスタムクラスを使用することができます。
grid class grid class を使用すると、グループに含まれたブロックをグリッド表示することができます。
グループブロックにgrid クラスを追加した拡張レイアウト
タイトルと段落など複数ブロックをグリッドに含める場合は、それらをすべて選択して、子ブロックや、カラムブロックを作成します
子ブロックにブロック幅クラスを追加すると、2-5カラムのグリッドを作成…

テーマの svg

テーマに付属しているSVGアイコンは、ブロックエディタの高度な設定/追加CSSクラスに、クラス名を追加することで、段落ブロックや見出しブロックの行頭、 リストブロック(番号なしリスト) のアイコンとして使用することができます。クラス名を、段落ブロックなどに、ペーストするだけで反映します。
さらに、hanging-indent クラスを追加すると、より見やすくアイコンを配置することができます。是非、一度お試しください
リスト要素での使用例
hello world he…

ブロックカラム カスタムクラス

追加CSSクラスを追加することで、カスタムクラスにメリハリを与えることができます。
ブロックカラムを使用した場合、デフォルトでサイドバーのフォントと同じ小さめのフォントが使用されます。
ブロックカラムをページレイアウト目的で使用する場合は、メインコンテンツを通常の投稿のフォントサイズで表示した方が、メリハリのついた見やすいページになるかもしれません。
通常の表示は以下のようなものです。
Lorem ipsum dolor sit amet, consect…

リスト カスタムクラス

テーマのリストブロックの表示
リストブロックで、リストを作成すると以下のように表示します
番号付きリスト
hello world hello world hello worldhello worldhello world 番号なしリスト
hello world hello world hello worldhello worldhello world カスタマイズ クラス
ブロックメニューの高度な設定/追加CSSクラスにクラス名を追加することで、リ…

Accsessibility UI

タブナビゲーションについて
ギャラリーキャプション
ギャラリーキャプションは、通常非表示で、ホバー時に表示します。これは、タブキーによるナビゲーションでも、表示することができます。
追加CSSクラス list-style-tab ネストされたリストブロックと、list-style-tabクラスを併用するとタブのような外観で表示できます。通常は、クリックによってコンテンツが表示されますが、タブ移動時でも、コンテンツを開くことができます。
hello tab 1…

オフセット付き画像と、オフセットなし画像

エマルジョンテーマでは、alignleft, alighrightといった左右一を指定した画像は設定により、段落幅をはみ出して表示したり、一定の幅に収まるように表示したりすることができます。
カスタマイズ設定
カスタマイザ / 投稿 / Alignwideで、Disabe を設定すると、右寄せ画像、左寄せ画像は、コンテンツ幅以内で表示されるようになります。
alignfull(全幅画像)等、コンテンツ幅を上回る幅を指定してもコンテンツ幅を上限に表示されるようになります…