Emulsion Theme

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

Emulsion Theme

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

Emulsion テーマは、WordPress 5.9対応 ユニバーサルテーマです。

updated:2022/01/29

ブロックエディタは、2018年12月WordPress 5.0 で導入されましたが、現在でも安定板ではなく、開発が継続しています。

3年以上経過した現在もクラッシックエディタを使い続けるユーザーが多く存在しています。

エディタの違いは、投稿を作成したときのHTMLの違いを生み出し、異なるCSSを必要とします。
このテーマは、クラッシックエディタ用のCSS、ブロックエディタ用のCSS両方をサポートする数少ないテーマです。

最新のWordPress 5.9に対応したユニバーサルテーマです

これまで、クラッシックテーマや、クラッシックエディタプラグインを使用していたユーザーでも移行が可能

WordPress 2.2.0でFSEチャイルドテーマをサポートしました

新しいエディタは、HTMLテンプレートに切り替わりました。PHPテンプレートシステムを使わない方法に変更されたので、使い勝手が完全に変わります。

現在、「HTMLテンプレートとPHPテンプレートの共存」を課題の一つとして取り組んでいます。


動作確認済みプラグイン

Automated Smoke Tests for WordPress Plugins

プラグインインストール時に、問題がないか基本的なテストの結果を以下のリンクから確認できます。

ダウンロード

テーマ情報

テーマ emulsion
バージョン 2.3.5
テーマホームページ https://www.tenman.info/wp3/emulsion
バグレポートや質問 https://wordpress.org/support/theme/emulsion/
PHP 必須バージョン PHP5.6

テーマ固有の機能

ソーシャルメニュー

ソーシャルメニューは電話リンク、メールリンクをサポートします

これらの機能は、プライバシー保護と密接に関連しています。 慎重に検討してからご使用ください

電話番号はPCブラウザーに表示されますが、リンクは機能しません。 リンクは、モバイルブラウザからのアクセスが検出された場合にのみ機能します。

自動コントラスト

このテーマは、作成した背景色設定に適したテキスト色を自動的に設定します

例えば、ショートコードやプラグインに背景色設定がある場合、極力可読性を維持しようとしますが、完全ではありません。

問題がある場合は、上記のサポートリンクより問い合わせしてください

ダークモード

デフォルトでは有効ではありませんが、 lib/config.phpの EMULSION_DARK_MODE_SUPPORT 定数をtrueに変更すると、ダークモードが有効になります。

アクセシビリティ

テーマには、アクセシビリティのためのタブナビゲーション機能があります

最近の記事

  • チャイルドテーマ(ブロックテーマの)
    ワードプレスのテーマカスタマイズのために、チャイルドテーマがあります。 ブロックテーマでも、チャイルドテーマを作成することができます。(emul […]
  • WordPress 5.9 と emulsion Theme
    WordPress 5.9では、カスタマイザーはわき役に回り、新しいエディタ(サイトエディタ)が主役に躍り出ました。 新しいエディタは、グリッド […]
  • Full Site editor ( Editor ) の使い方
    WordPress5.9で、新しいタイプのテーマ、フルサイト編集テーマ を使用すると管理画面にエディタという項目が追加されます。従来のテーマを使 […]

追加 CSS クラス

ブロックエディタのブロック数は、FSE(フルサイトエディタ)を有効にした場合75個(EMBEDブロックを除いて)と非常に多くのブロックが実装されます。これは、HTML5の要素数108に迫る勢いで、結構複雑化しています。

一方、見出し要素は幅広設定できるのに、段落要素は幅広や、左右揃えができないといった事で、使いにくさを感じるユーザー層もいるかもしれませんね。このようなユーザー層向けに、エディタに設定がない場合でも、大多数のブロックで幅広や左右揃えを可能にするクラスをテーマで準備しているので、必要に応じで使用することができます。

設定場所 : 投稿エディタ / ブロック選択 / エディタメニュー / Advanced タブ / Additional CSS Class

一般ブロック

段落

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull
  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5
  • カスタムフォーマットクラス
  • hanging-indent
  • left indent
  • indent-5rem
  • indent-10rem
  • indent-15rem
  • indent-20rem
  • right indent
  • indent-right-5rem
  • indent-right-10rem
  • indent-right-15rem
  • indent-right-20rem
  • テキストインデントとネガティブマージンを追加 (-1.5rem)
  • indent-5rem-n
  • indent-10rem-n
  • indent-15rem-n
  • indent-20rem-n
  • indent-right-5rem-n
  • indent-right-10rem-n
  • indent-right-15rem-n
  • indent-right-20rem-n

画像

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5
  • カスタムフォーマットクラス
  • shrink
  • 左右揃えの、オフセットを削除します。
  • is-style-circle-mask
  • alignleft と alignrightと併用した場合、段落でclrcleクラスが有効です

見出し

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull

ギャラリー

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

リスト

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull
  • カスタムフォーマットクラス
  • list-style-none
  • リストアイコン非表示
  • list-style-initial
  • デフォルトのアイコン
  • circle
  • 番号リストを円形に変形
  • icon-alert
  • リストアイコンを赤に
  • icon-info
  • icon-notice
  • icon-cool
  • icon-dark
  • list-style-tab
  • ネストされたリストを、フロントエンドでタブのように変形
  • list-style-inline
  • フロントエンドで、インラインリストで表示
  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

クウォート

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull
  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

音声

カバー

ファイル

動画

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

フォーマット

コード

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull
  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5
  • 色クラス
  • dark

クラッシックエディタ

カスタムHTML

整形済みテキスト

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

プルクウォート

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

テーブル

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5
  • キャプション位置設定クラス
  • caption-side-left
  • caption-side-right
  • caption-side-bottom
  • caption-side-bottom-left
  • caption-side-bottom-right
  • セルのテキスト位置
  • left
  • center
  • right
  • セルのテキスト縦方向位置
  • top
  • middle
  • bottom

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull
  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

レイアウト要素

カラム

  • block-column class
  • main
  • 投稿テキストと同じフォントサイズとフォントファミリで表示されます
  • sidebar
  • サイドバーウィジェットと同じフォントサイズとフォントファミリで表示します

グループ

  • 位置設定クラス
  • alignleft
  • alignright
  • alignwide
  • alignfull
  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

メディアテキスト

続きを読む

改ページ

区切り

スペーサー

ウィジェット

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

ショートコード

アーカイブ

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

カレンダー

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

カテゴリー

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

最新コメント

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

最新記事

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

rss

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

検索

タグクラウド

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5
  • カスタムフォーマットクラス
  • tag-cloud-style-flat
  • タグクラウドで文字サイズによる強調を外し、ボタン形式で表示

埋め込み

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

一般クラス カスタムHTMLブロックなど

  • カスタムHTML用のalignwideやalignfull
  • emulsion-wide
  • emulsion-full
  • カスタムHTML用の子要素センタリング
  • centered
  • 高さスタイルが必須です。次の高さクラスまたはスタイル属性とともに使用してください
  • カスタムHTML用のボックス高さクラス、
  • vh25
  • ブラウザ高さの1/4
  • vh50
  • ブラウザ高さの1/2
  • vh75
  • ブラウザ高さの3/4
  • vh100
  • ブラウザの高さ
  • フォント太さクラス
  • fw-100 fw-200 fw-300 … fw-900

Copyright © 2022 Site proudly powered by WordPress