The other way round

次男とデートしておりました。
バスケのお高いシューズを買わされただけですが o(｀ω´*)o

長くなります、と最初にお伝えしておきますね。
難解かどうかは、たぶんぼっちんさんにとってはさほどでもないと思われる。

【styleタグとstyle属性の違い】
まず
> 1記事内に複数貼っても全て「同じデザイン」になってしまう〜
これはembedlyの仕様ではないんです。
CSSの特性であり、styleタグの特性でもあります。
ちょっとややこしいですが、style[下線]属性[/下線]とstyle[下線]タグ[/下線]というのは別ものです。

style属性
<div [太字]style[/太字]="ここにCSS内容"></div>

styleタグ
[太字]<style>[/太字]ここにCSS内容[太字]</style>[/太字]

styleタグの方は「タグ」ですから開始タグ・終了タグがあります。
その内容はスタイルシートに記すのと同じ書き方です。
例)
<style>
.test {
font-size: 13px;
}
</style>

で、このstyleタグなんだけども、通常は<head>〜</head>内、つまりhead情報内に書くものです。
html5では<body>内に書けるようになった、とドラフトにありましたが、実際にはそのまま書くと構文エラーです。
scoped属性があるのが正式… というか、後述。

styleタグに書かれた内容というのは、その直近の要素に「だけ」作用するものではありません。
逆にstyle属性というのは記述された要素「だけ」にダイレクトに作用します。

例えばembedlyが記事内に2つあるとします。

<div class="embedly-card">
一つ目内容
</div>
<div class="embedly-card">
二つ目内容
</div>

そして例えばそれぞれにstyleタグを書いたとします。

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

一つ目は赤背景、二つ目は青背景、というつもりで書いたとします。
ところが実際は両者共に青背景になります。
何故なら、styleタグ内の
[太字].embedly-card[/太字]
というクラス名は[下線]両者に共通[/下線]だからです。
そしてこのクラス名はユーザーが任意でつけているわけでなく、embedly側のスクリプトでもってあらかじめ設けられているもの。
つまりユーザーが変更することはできません。

何故赤背景が破棄されるかというと、CSSの基本は上書きだからです。
重複した場合、より後方にある指定が前方のそれを「上書き」します。

<div class="test">あいうえお</div>
<div class="test">かきくけこ</div>
<style>
.test {
color: black;
}
</style>
<style>
.test {
color: white;
}

上記の場合、「あいうえお」も「かきくけこ」も「白」文字になります。

一旦投稿します。

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