ブロックエディタで記事をclass付きタグ(tag)で囲む
この記事は約 2 分で読めます。
ブロックエディタで記事を書く際に
本文をclass付きタグで囲む必要がある時、
皆さまはどうしていますか?

カスタムHTMLで囲んでみると・・・。

「このブロックには、
想定されていないか無効な
コンテンツが含まれています。」
と言うエラーメッセージ?が出た!
要は、
終了タグ(end tag)がないよ。
開始タグ(start tag)がないよ。
と言う事らしいのです。
特に問題ないと思うのですが、
あまり気持ちよくない。
調べてみると、
グループブロックを使うと、
class付きタグで囲む事が出来ます。

グループブロックは、
ブロックを複数選択してグループ化します。
簡単に言うと、
div要素で複数ブロックをラップ出来ます。
追加でclassが必要な場合、
グループブロックの
高度な設定 ⇒ 追加CSSクラス
で追加してやります。
しかし、
記事全体を囲みたい場合、
Oneグループにまとめるのも
なんだかなぁ・・・と思いますよね。
そうすると後は、
JavaScriptで要素に
classを追加する方法がよいかな?
記事を囲っている要素は、
例えば articleタグ (article要素)
とかでしょうか?
幸いにも、このワードプレスの
テーマは postと言う class を持った
div タグが記事を囲っています。
要素にclassを追加するには、
classList がよいようです。
articleタグに「hoge」classを
追加する場合。
let elements = document.getElementsByTagName('article');
elements[0].classList.add('hoge');
postと言う classで取得する場合。
let elements = document.getElementsByClassName('post');
elements[0].classList.add('hoge');
要素にclassを追加・削除する詳しくは
以下を参照の事。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません