WordPressに出力したKintoneのRich Text form のHTMLタグ解析結果 - Gucchiy/neo GitHub Wiki
- Publish-kintone-dataプラグインをWordPressに設置・設定する。
- KintoneでアプリにRich Text form を設置、内容を記載して保存。
- Publish-kintone-dataでWordPressのClassic Editorに出力。
- WordPressの投稿に出力されるHTMLタグの解析結果。
これです
結果
-
アンダーライン
<u>タグ 非推奨要素 http://www.htmq.com/html/u.shtml -
文字色・背景色
<span>タグになるのみで、反映されない
Kintoneで保存(承認フローを完了に)しても反映されない
しかしWordPress側で下書きを公開、Publish Kintone Data の機能でBulk Updateすると反映される-
文字の大きさ
<font>タグ 非推奨要素 http://www.htmq.com/html/font.shtml -
打ち消し線
<strike>タグ 非推奨要素 http://www.htmq.com/html/strike.shtml
<div>普通のテキスト</div>
`<div><b>テキストにBOLD</b></div>`
---
対策(Katarawaテーマ) CSS
```vb
.p-entry-content b{
font-weight:none;
font-weight:bold;
}
<div><i>イタリック斜体</i></div>対策(Katarawaテーマ) CSS
.p-entry-content i{
font-style:none;
font-style:italic;
}
<div><u>アンダーライン</u></div>対策(Katarawaテーマ) CSS
.p-entry-content u{
text-decoration:none;
text-decoration:underline;
}
<div><span>文字色</span></div>反映されない
<div><span>文字背景色</span></div>反映されない
文字色・背景色 反映されない について
Kintoneで保存(承認フローを完了に)しても反映されない
しかしWordPress側の投稿を下書きから公開、またはPublish Kintone Data の機能でBulk Updateすると反映される
<div><span style="background-color:rgb( 255 , 0 , 0 )">背景色</span></div>
<div><font size="1">フォントサイズ小さい</font></div>
<div><font size="2">普通のテキスト</font></div>
文字を選択してから「普通」を選択すると<font size="2">が指定される
<div><font size="4">フォントサイズやや大きい</font></div>
<div><font size="6">フォントサイズ大きい</font></div>反映されない CSSが100%になっている それをはずせば反映される
対策(Katarawaテーマ) CSS
.p-entry-content font[size="1"]{
font-size :80%;
}
.p-entry-content font[size="2"]{
font-size :100%;
}
.p-entry-content font[size="4"]{
font-size :120%;
}
.p-entry-content font[size="6"]{
font-size :200%;
}
<div><a href="https://www.motorino.co.jp/" target="_blank" rel="nofollow noopener noreferrer">リンク</a></div>
<div>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
<div>
<ol>
<li>リスト番号1</li>
<li>リスト番号2</li>
<li>リスト番号3</li>
</ol>
</div>
<div>
<div style="margin-left:40px">インデント右</div>
</div>
<div>
<div style="text-align:left">左揃え</div>
</div>
<div>
<div style="text-align:center">中央揃え</div>
</div>
<div>
<div style="text-align:right">右揃え</div>
</div>
<div><strike>取り消し線</strike></div>
<div><span><u>組み合わせ-アンダーライン-背景色</u></span></div>
<div>
<div style="text-align:center">
<div><span><font size="6"><b>組み合わせ-BOLD-背景色黄-文字大-中央揃え</b></font></span></div>
</div>
</div>