編集画面で CSS の設定ができるようになりました


  1. 製品更新情報
  2. ExUnit
  3. 編集画面で CSS の設定ができるようになりました

この記事は2年以上前に公開されたものです。最新の情報を参考にしてください。

今回のバージョンアップでの追加機能をお知らせします。

機能概要

投稿タイプに関わらず、各記事の編集画面で CSS が設定できるようになりました。

設定手順

ダッシュボードで「投稿・固定・カスタム投稿タイプ」などを選択して【 新規追加 】で編集画面に遷移します。

今回はこの文章の中の一部のテキストの CSS を変更します。

本文入力欄の下に記述スペースがあります。

CSS を記述するときの注意点

<h2> や <p> などのタグにそのまま CSS を記述してしまうと、変更したい部分以外のところにも反映されてしまうので、クラス名をつけてから編集すると安心です。
段落ブロックで本文を入力したら段落ブロックを選択して、ブロック設定画面の「高度な設定」→「追加CSS クラス」に任意のクラス名を入力します。

今回の場合はcustom-css にしました。このクラス名を用いて CSS を記述します。

.custom-css {
 color: red;
 font-size: 30px;
 background-color: #fef391;
}

CSS を記述するルールとして、クラス名の前に「.(ドット)」をつけなければ正しく反映されないのでご注意ください。

任意のクラス名を用いて CSS カスタマイズ欄に記述します。


CSS を記述したら保存して編集を完了させて表示をご確認ください。

CSS が反映されました。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP