最近までWordPressのテキストエディタにはstyle属性でCSSを記述することしかできないと思い込んでいましたが、styleタグでCSSを記述することができることを今さら知りました。
今さら知ることができたのは良いですが、CSSはCSSファイルに書くことが推奨されているので、styleタグでCSSを書くことはWordPressでも少ないかもしれません。
しかしstyleタグをWordPressのテキストエディタに記述する必要があったのです。
WordPressでstyleタグが必要なパターンを含めて、styleタグをテキストエディタに記述する方法を復習がてら記事にしておきます。
WordPressでstyleタグが必要なパターン
私が経験したWordPressでstyleタグが必要なパターンは固定ページを作成するときでした。
styleタグが必要なパターン1
WordPressの編集権限でカスタマイザーの追加CSSと外観のテーマエディターが操作できない場合。
styleタグが必要なパターン2
WordPressのテキストエディタにCSSを記述して欲しいという場合。
そしてFTP接続できない場合です。
WordPressでstyleタグを固定ページのテキストエディタに記述することでCSSを適用することになります。
WordPressのテキストエディタにstyleタグ
WordPressのテキストエディタはクラシックエディタを使用して投稿編集をしている場合の編集エディタです。
WordPressのテキストエディタはビジュアルタブ右横にあるテキストタブをクリックすることで、テキストエディタに切り替えることができます。
WordPressのテキストエディタに切り替えたら、そこはもうWordPressでstyleタグを記述することができる領域に踏み込めています。
<style>
#link-btn-test{
display:inline-block;
border:3px solid deeppink;
padding:15px 70px;
color:#fff;
background:#333;
font-weight: bold;
}
</style>
<a href="#" id="link-test-btn">ボタン</a>
テキストエディタにstyleタグの開始タグと終了タグをマークアップしたstyle要素内にCSSファイルにcssを記述するときと同じようにスタイルを適用したいセレクタとプロパティ、値を指定することで、CSSが反映してくれます。
このときstyleタグで記述したCSSの優先順位が低いため、指定したCSSプロパティが効かないこともありますが、id属性でcssを適用させるなどでスタイルが効くようになります。
それからWordPressでstyleタグをテキストエディタに記述してcssを書いた後にビジュアルエディタに切り替えるとstyleタグ内に改行などが入り込んでしまいcssが効かなくなることに注意です。
WordPressのコードエディタにstyleタグ
WordPressでブロックエディタを使用している場合はテキストエディタのタブがありませんので、代わりにコードエディタにstyleタグを記述することになります。
WordPressでコードエディタへの切り替えは、編集画面の縦三本線のアイコンをクリックするとコードエディタが選択できるのでクリックでビジュアルエディタからコードエディタに切り替えます。
WordPressのコードエディタに切り替えたら、そこはもうWordPressでstyleタグを記述することができる領域に踏み込めています。
<style>
.link-btn-test{
display:inline-block;
border:3px solid deeppink;
padding:15px 70px;
color:#fff;
background:#333;
font-weight: bold;
}
</style>
<a href="#" class="link-test-btn">ボタン</a>
コードエディタにstyleタグの開始タグと終了タグをマークアップしたstyle要素内にスタイルを適用したいセレクタとプロパティ、値を指定することで、CSSが反映してくれます。
WordPressのコードエディタにstyleタグを記述した後に、コードエディタからビジュアルエディタに切り替えた場合は、テキストエディタのときのようなstyleタグ内に改行などが入り込んでしまいcssが効かなくなることはないかと思います。
カスタムHTMLでstyleタグを記述してみる
WordPressでブロックエディタを使用している場合は、テキストエディタの代わりにコードエディタを使うことになりますが、ブロックエディタならカスタムHTMLでもstyleタグを記述することができるだろうと思い、カスタムHTMLでstyleタグを記述してみることに。
カスタムHTMLブロックを選択してエディタに追加してからstyleタグを記述して要素にcssを適用させます。
ページをプレビューすると問題なくCSSが反映しているのでWordPressのカスタムHTMLでもstyleタグを記述するのが有効なことが確認できます。
WordPressのテキストエディタでstyleタグを記述した後に、カスタムHTMLでstyleタグを記述してみると実感できますが、styleタグを記述したCSSをブロック分けできるので分かりやすくて便利に使えると思えます。
まとめ
WordPressでstyleタグをテキストエディタに記述するときは、テキストエディタからビジュアルエディタに切り替えてしまうと改行が入り込みCSSが効かなくなることに注意。
ブロックエディタを使用してる場合は、WordPressのテキストエディタの代わりにコードエディタでstyleタグを記述することができる。
またカスタムHTMLでstyleタグを記述することもWordPressでは可能。
WordPressでstyleタグをテキストエディタに記述する必要がある場合に今回の記事で書いた内容を思い出していただければと思いますが、CSSファイルが扱える状態でしたらCSSファイルにCSSを記述するのを優先することも思い出していただけたらと思います。
