おそらく経験があるはずです。きれいに装飾されたブロック、タイトルカードや色付きの吹き出しをコピーし、WeChatのエディターやCMSに貼る。あるときはまさに正しく現れます。別のときは、デザインがすべてはがれた裸のテキストとして着地します。同じ操作、違う結果で、ランダムに感じられます。ランダムではありません。違いは、インラインHTMLをコピーしたかどうかです。
この1つの考えを理解すれば、装飾されたコンテンツの貼り付けが賭けではなく予測可能になります。
インラインHTMLとは実際何か
ウェブの装飾は2つの場所に置けます。普通のウェブサイトでは、装飾は別のスタイルシートにあり、HTMLはそれをクラス名で参照するだけです。<div class="title-card">。このdivはそれ自体では無意味です。デザインはどこか別のCSSファイルにあります。
インラインHTMLは装飾を要素自体の中に置きます。<div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">。ブロックを描画するのに必要なすべてがブロックと一緒に移動します。依存する外部ファイルはありません。
その区別が、ある貼り付けはデザインを保ち別のは保たない理由のすべてです。エディターに貼るとき、エディターは元サイトのスタイルシートを受け取りません。デザインがそのスタイルシートにあったなら、消えています。むき出しの構造、つまり素っ気なく見えるテキストが得られます。デザインがインラインだったなら、一緒に来て、ブロックが正しく描画されます。
なぜWeChatや装飾エディターにそれが要るのか
WeChatのエディターは厳格です。外部スタイルシートを取り除き、多くの装飾をフィルターします。他所で定義されたクラスに頼ったブロックは、WeChatの中に入ると頼るものがありません。多くのリッチテキストエディターやCMSの貼り付け欄も同じように振る舞います。貼ったものを浄化し、インラインの属性だけを残します。
ですから、これらのエディターに装飾ブロックを移す信頼できる方法は、装飾が自己完結するインラインHTMLとしてコピーすることです。そうすれば厳格なエディターでも、ブロックをデザインどおり表示するのに必要なすべてを持ちます。
ブロックを「書式ごと」コピーする仕組み
現代のブラウザにはClipboard APIがあり、素のテキストだけでなく、リッチなコンテンツ、つまり書式付きのHTMLをクリップボードに置けます。ツールがブロックを「インラインHTMLとして」コピーするとき、そのAPIを使ってブロックの自己完結したマークアップをクリップボードに置いています。それをエディターに貼る（Ctrl/Cmd+V）と、装飾がインラインでクリップボードがHTMLを運んだので、ブロックが装飾された状態で現れます。
これが動くには2つのことが真である必要があります。
- マークアップがインラインで装飾されていること。外部ファイルが不要になるように。
- クリップボードがそれをHTMLとして運ぶこと。山括弧の素のテキストの投げ込みとしてではなく。
両方を正しくすれば貼り付けは「ただ動きます」。どちらかを外すと、素のテキストか、見えるコードの壁が得られます。
コードを手で編集せずに行う
原理的には、装飾ブロックを取ってすべてのスタイルを手でインライン化する、つまり各クラスのルールを各要素のstyle=""属性に移すこともできます。ちょっとしたブロックを超えるものには、それは退屈で誤りやすく、特に装飾が多くのノードに広がるSVGカードではそうです。
これを扱うツールの方が簡単です。IMG.DIYのレイアウトモジュール抽出ツールは、貼ったWeChatのコンテンツから装飾ブロックを抽出し、それぞれにClipboard API経由でインラインHTMLとしてクリップボードに置くコピーボタンを付けます。コピーをクリックし、WeChatのエディター（またはCMS、リッチテキスト欄）に切り替え、貼れば、ブロックが書式を保ちます。手動のインライン化も、壊れたマークアップの修正もありません。
手早い貼り付けチェックリスト
装飾された貼り付けが失敗したら、これを確認しましょう。
- インラインHTMLをコピーしたか、それともスクリーンショット／素のテキストか。 インラインHTMLだけが、動く装飾ブロックとして貼られます。
- エディターの通常の本文に貼る。 マークアップを取り除いたりエスケープしたりする「ソースコード」や「プレーンテキスト」モードではなく。
- プレビューでブロックを確認する。 WeChat自身のプレビューは、ブロックがスマホで実際どう描画されるかを見せます。公開前にそこで確認しましょう。
- 色がおかしければ、コピー前に色を変える。 抽出ツールでは色をクリックしてブロック内のあらゆる場所で変えられるので、すでにブランドカラーの状態でコピーできます。
繰り返す価値のある正直な限界が1つ。このようなツールはブロックをコピーして整理します。抽出ツールであって、ゼロからのテンプレートデザイナーではなく、URLで記事を取得できません（ブラウザはWeChatページのクロスサイト取得をブロックするので、コンテンツを貼り込みます）。その範囲内で、インラインHTMLこそが、装飾ブロックをあるエディターから別のエディターへデザインをそのままに旅させるものです。
ブロックが完璧に貼られるのを何度か見れば、さっきまでのランダムさが腑に落ちます。ランダムだったことは一度もありませんでした。いつも、装飾がブロックの中を旅したかどうかの問題でした。