The other way round

仮にembedlyでstyleタグではなくstyle属性が使えるとしたら、以下のようになります。

<div class="embedly-card" style="background-color: red;"> 
一つ目内容 
</div> 
<div class="embedly-card" style="background-color: blue;"> 
二つ目内容 
</div>

この場合は一つ目背景は「赤」に。二つ目背景は「青」にすることができます。
何故なら指定要素にダイレクトアタックだから。

これが「同じスタイルになってしまう」理由です。

---------

【style属性は使えません】
embedly利用時にstyle属性は使えません。
何故ならスクリプトでもってhtml内容を書き出しているからです。
embedlyで書き出されるhtml内容は以下の通り。

<div class="pair-bd">
	<div class="art-bd">
		<a target="_blank" href="リンク先" class="" style="padding-bottom: 46.8553%; background-color: rgb(255,255,255);">
			<img class="art-bd-img" src="画像アドレス&width=横幅" style="opacity: 1;">
		</a>
	</div>
	<div class="txt-bd">
		<h1 class="title">
			<a target="_blank" href="リンク先">
			タイトル
			</a>
		</h1>
		<p class="description">
			概要
		</p>
		<a class="action" target="_blank" href="リンク先">
			この記事を***で読む >
		</a>
	</div>
</div>

でもこれ、embedlyでの取得コードに出てないですよね。
提供されるのは以下の通り。

こんな風に、タイトルとスクリプトしか出てきません。
そしてこのスクリプトにアクセスすることでhtmlが生成されてます。
コード取得時にhtmlが出てきているものならばなんとでもなりますが、JSでのinnerHTMLという方法ですのでユーザーからはhtml内容に対し不可侵。

なので「style属性は使えない」という点が重要。

---------

【styleタグを記事内に書くと…】
構文エラーです(笑)
バリデートにあまりこだわりがなければ、まぁ良いのかな、と思う。

html5でのstyleタグ(style要素)というのは

上記のような書き方で、CSSスタイリングを与えたい「親要素」に挟まれる形で書くことによって、styleタグでは基本的には「できない」ダイレクト指定ができるようになります。
ですがブラウザ側が全然実装してない(笑)
現状だとFirefoxのみだと思います。
ってゆーかね、このscoped属性ってすごく嫌われているので(デザイナー, 技術者, Googleセンセ)、たぶんそのうち廃止されると思う(笑)
html5.2のドラフトをまだ読んでないんだけど、もしかしたら既に…？

というわけで、styleタグで特定要素だけにスタイリング、というのはできないと思った方が良いですね。
もちろん「embedlyが複数の場合は」という但し書きつきで。
構文エラーについてはぼっちんさんがどう考えるかによりますが、私ならやっぱり記事内でなくスタイルシートの方に書くかなぁ (´・ω・｀)
使わない時は無駄になってしまうけど。

一旦投稿。

管理者にだけ表示を許可する