FC2ブログでブログカードを掲載する際の注意点

FC2ブログでブログカードを掲載する際の注意点

カスタマイズ
2023/01/08
9
vanillaice (Akira)
vanillaice (Akira)
ブログカードトラブル対処初心者向けTips

ここで言う『ブログカード』は弊ブログが提供しているものに限定します。

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

ブログカードの表示形式に注目

まず、ブログカードと一口に言っても色々ありますね。代表的なものは はてなブログカード, Embedly など。これらのたいていは iframe と呼ばれる形式で表示されます。

iframe要素 はhtmlの一要素で、滞在中とは異なるページあるいはサイトの内容を滞在中ページへ表示させる、というものです。ブログカードの場合、表示したい第三ページの内容をJavaScriptでもってその都度取得しに行く必要があります。

一方、弊ブログ提供のブログカードは JSやiframeを利用しない 素のhtml で表示させます。事前にその内容を取得するためにブックマークレットと連携するわけですね。
* iframeもhtml要素なのでこの表現は正しくありませんが本記事では便宜上これで進めます。

iframeの場合はページを開いた都度外部に情報を取りに行きますのでパフォーマンスで劣りますが、対象ページの内容が変更された際にはそれが反映されます。また、iframeのデザインカスタマイズは非常に困難(というかできない)です。

素のhtmlの場合はパフォーマンスで利がありますが、対象ページの内容が変更されても反映されることなく古い情報のまま表示されます。デザインカスタマイズは容易に行えます。

ブログカードとOGPの関係

ブログカードは OGP と密接に結びついています。言い換えると「OGPを表示させるのがブログカード」です。

OGPについての説明は以下の記事を参照のこと。

OGP設定は大事です

OGP設定は大事です

OGP (Opne Graph Protocol, オープン グラフ プロゥトコル) というのが何物であってどんな役割か、という説明です。結論から簡単に言うと SNSシェアを重要視する場合にはOGP設定が必須 です。...

OGP情報というのは記事を代表するものの集まりです。

  • 記事のリンク
  • 記事のタイトル
  • 記事の代表画像
  • 記事の文章(概要)

これらがその記事を端的に物語るものとなるので非常に重要な情報です。
* OGP情報は他にもありますが特に重要なもののみ上げています。

FC2ブログでのOGP情報

各OGP情報がどのように選出されるか、なんですが、FC2ブログでは「個々の記事に対し自由にOGPを指定する機能」というのはありません。この機能があるサービスの方がむしろ少ない。Shopify なんかはできるかと思いますがこちらはブログサービスではないので比較には向きませんね ^^;

FC2ブログでは以下のルールで自動選出されます。

リンク
og:url
記事投稿時に自動付与
タイトル
og:title
記事に付けたタイトル
画像
og:image
『本文』に掲載された最初の画像
(但し外部直リンク画像は対象外)
または
アイキャッチ画像指定を行った画像(優先)
文章
og:description
『本文』に掲載された文章の最大200文字まで

このルールは 要約タイプテンプレートのトップページ掲載内容と同じ です。全く同じ (´・ω・`)
FC2ブログでこのルールを突破することはできませんので、この厳格ルールをしっかり理解した上で各ユーザーが賢く記事を構成する必要があります。

そしてもう一つ iframe内の内容はOGPまたは要約内容として取得されない という重要な事実があります。そもそもiframeというのは第三ページ・別ページの表示なのであって、表示中ページ・表示中記事に直接属してはいないのですからOGPやトップ要約に選ばれては都合の悪いものです。

弊ブログカードは素のhtmlでiframeではありませんので、OGP, 要約トップの対象になります。ですから、本文の200文字以内にブログカードが掲載された場合にはその「文章内容」がそのまま使われてしまいます。仮にそのブログカードが自身のサイトの別ページであれば「画像」もそのまま選出対象です(外部画像は対象外)
以下がサンプルです。

別サイトのブログカードを『本文』冒頭に掲載した記事

記事の書き出しがいきなりブログカード、このサンプルは自身のブログの別ページではなく、完全にドメインの異なるページを引用表示させてあります(Google Japanブログを利用させて頂きます)
この記事を投稿し、さらにこの記事をブログカードとして取得すると以下の状態です。

冒頭に別サイトブログカードが掲載されている記事をブログカード化

サムネイル画像についてはgoogleブログは完全に第三者のものですからOGP対象とはなりません。同じドメイン(FC2サーバー内画像)も掲載されていませんので、個人設定で指定したデフォルト画像(この場合は私のプロフィール画像)が表示されています。文章はgoogleブログからの引用文がそのまま表記されてしまっています。

ここでちょっと考えてください。OGPというのは記事そのものを物語る存在なのに文章が第三者のもの。これはあまり良い有り方ではないですよね。サンプルを見てもまるでgoogleの社員であるかのような誤解を与える可能性(笑)

今度は自身のブログ内の別ページで試します。

自ブログのブログカードを『本文』冒頭に掲載した記事
冒頭に自ブログのブログカードが掲載されている記事をブログカード化

画像が同じドメインなのでOGP対象になってしまいます。これはアカンやつ (´・ω・`)
だって元記事の「flex云々かんぬん」と記事概要文もサムネイルも全く同じだもの。違う記事だし本旨じゃないのに。

これはiframeタイプのブログカードでは起こりませんので、htmlタイプの弊害だと言えますね。

冒頭にブログカードを掲載したい場合の対処法

中には「どうしても記事冒頭にブログカードを掲載したい」という方も。加えて「トップページやOGPからはブログカード内容を除去したい」と。対処法いくつかありますが、結局はルールを理解した上でうまくやる、というだけの方法です。

  1. iframeタイプのブログカードに変更する
  2. 『本文』へはブログカードを掲載せず『追記』に掲載
  3. CSSで表示順序を入れ替える テンプレート作者 akiさんのアイデアです

①については根本的解決(笑)
自身の用途に見合わないのですからiframeで表示させるタイプへの変更をおすすめします。

②について。結局のところ『本文』にブログカードが存在しているが故にOGP対象になってしまうので、一番手っ取り早いのは『本文』への掲載を避けることです。但しこの場合はOGP(画像と文章)と併せて要約記事への掲載内容も失われます。

③なんですけども、FC2テンプレート製作者であるakiさんがアイデアを伝えてくれましたのでご紹介します。

*Essence

*Essence

FC2ブログ共有テンプレートを作成・配布しています。不精なので時々更新。(^^;

「CSSで表示順序を入れ替える」という方法なので、htmlの書き順が変わります。ソースコードは以下の通り

<div style="display: flex; flex-flow: column;">
<div style="order: 2;">2番めに表示したいhtml内容200文字以上</div>
<div style="order: 1;">ブログカードhtml内容</div>
</div>

htmlが増えてしまうのと、書き順と表示順が入れ替わりますので混乱しないことなどが注意点です。SEO的にも特に問題ありません。最大の注意点は 2番目に表示させる内容は200文字以上の文章であること。

200文字を使い切らないとブログカードの内容が入ってきてしまいますので200文字以上の文字列記載が必須です。こちらがOGPになりますので適切な文章を書き記すようにしましょう。htmlタグを含まず200文字以上です(半角の場合は倍と考えてください)

こちらの方法は「どうしても」という時に奥の手として使うと良いと思います。akiさんご協力ありがとうございます :)
あ、あとアイキャッチ画像の機能を利用してサムネイルもしっかり指定した方が良いですね。

まとめ

私がどうしているか、ですけれども、ブログカードは絶対に『本文』には掲載しません。『本文』には記事内容を端的に説明する内容を100文字以内で記載するようこころがけています。SNSなどで紹介された際に「何が書いてあるのかなんとなく伝わる」ことが大事だと思いますので、挨拶文や定型文などは利用しません。OGPというのは結局はそこが最も大事なのであって、「この記事は何が書いてあるの?」の察しをつけられないものはあまりよろしくないと思いませんか (∵`)

ということで、htmlタイプブログカード利用時の注意点と併せ、根本的に「ブログカードはなんのためにあるの?」という説明でもありますので、自身の方針と照らし合わせて最適な記事構成を考えてみてくださいね。

Related post

Comments  9

Mimizk
2023/01/18 (Wed) 17:29

div に入れ子した要素の margin が(?)大きくなる

こんにちは。
頻繁にお世話になり恐縮です。

検証用の記事を投稿したのでご覧ください。

aki 氏案を用いて順序を入れ替えている記事 >https://bit.ly/3IXBsVE
順序を入れ替えていない記事 >https://bit.ly/3XGyCbM

div 要素の中に入れ子した各種要素に指定した margin が、ふだんより大きくなってしまうようなのです。
入れ子した際に margin の指定が相殺されることがあるとか見たのでしばらく検証してみたのですが、相殺されているというよりは、なんだかよけいな margin が入れ子の bottom に追加されているような・・・?
これを改善する方法はあるでしょうか。


余談ですが、この件を知るまで、ブロック要素の中にブロック要素を入れ子できないと思っていました。
実際には、div 要素の中に p も h も入れることができるんですね。
普段、レイアウトされたひとかたまりの画像を挿入するのに使っている div が p から弾き出されるのを見て、不可能なのだと勘違いしていました。
p の中に div を入れ子できないだけで、他はだいたい可能なんですね。

vanillaice (Akira)
vanillaice (Akira)
2023/01/19 (Thu) 00:28

To Mimizkさん

こんばんは ('0')/

marginの相殺が発生するのは兄弟要素間のみです。
参考記事: marginが消える?!な件を解消する方法
https://vanillaice000.blog.fc2.com/blog-entry-1105.html

そして参考記事で少し触れている通り、親にdisplayのflexが指定されている場合その子要素はmarginの相殺が起こりません。
いくつか例をあげますので感覚で理解して頂くと良いかもです。

【flex自体の兄弟】

<div style="display: flex; margin: 10px 0;"></div>
<div style="display: flex; margin: 10px 0;"></div>

2つのdivはそれぞれdisplay:flexが指定されている兄弟です。この場合のdiv同士の距離は 10px です。兄弟なので相殺が起こります。


【flexの中にp要素の兄弟(flexの向きはcolumn)】

<div style="display: flex; flex-flow: column;">
<p style="margin: 10px 0;">あいうえお</p>
<p style="margin: 10px 0;">かきくけこ</p>
</div>

p要素同士の距離は兄弟ですがflex子要素なので相殺が起こらず20pxです。

【flexの高さがどうなるか】

上と同じ条件で親要素の高さがどうなるか(pはdivに変更)

<div style="display: flex; flex-flow: column;">
<div class="div1" style="margin: 10px 0; width: 50px; height: 50px;"></div>
<div class="div2" style="margin: 10px 0; width: 50px; height: 50px;"></div>
</div>

この場合の親(flex)の高さは140pxです。
50px + 10px + 10px + 50px + 10px + 10px = 140px
(.div1の高さ) + (.div1の上margin) + (.div1の下margin) + (.div2の高さ) + (.div2の上margin) + (.div2の下margin) = 140px

子要素で相殺が行われないためmarginも内包要素の高さとしてカウントされます。

-----
flexを使う場合はこの特徴を理解しないといけないので、ちょっと敷居が高いといえば高いかもですね (∵`)
最初に注意点としてお伝えするべきでした。ごめんなさい。


-----
div要素はhtml, body, head, 親子要素が確定している要素など 以外のほとんどの要素を入れ子できますよ。p要素は逆で入れ子できる要素が厳格に限定されて(どれも厳格ではありますがp要素はブラウザ補完が働くためミスが如実に現れる要素です)いますので、今回のようなブロック分けや装飾目的の場合は迷わずdiv要素の利用をおすすめします(p要素は『文章段落』での使用のみ、装飾用途には絶対に用いないという意識を持つのが大事です)

Mimizk
2023/01/19 (Thu) 02:06

To vanillaice (Akira)さん

一度で理解できずすみません。
私が不思議に思っていたのはこの部分です >https://bit.ly/3QMqy70

テスト投稿の記事の各要素に全て style="border: solid 1px; " を加えました。
これでそれぞれの要素の大きさが見えるようになったのですが・・・。

色付けした部分のうち、青・緑・紫は左右で一致をしています。
私が CSS で class 指定した margin top の量そのままなので、「うんうん」という感じです。
問題は、左側(aki 氏案を利用した投稿)にだけある、オレンジ・黄色の部分です。

まずオレンジの部分。
div 要素(親)の上下にだけ出てきたこの margin はいったい何なのでしょう?
私はこんな物を指定したつもりはないのですが、上下に全く同じ大きさで追加されています。

次に黄色の部分。
これは、緑色の部分と大きさが似ていますが、黄色の方が若干大きいです。
緑の部分とだけでなく、オレンジ+紫 とか、紫 x2 や オレンジ x2 などとも合致しない大きさです。
こうなるともう全然知らない幅なので、何がどうなっているのか予想もつけられません。


特にこの黄色とオレンジの部分がなぜ生じてしまうのかという点について、Akira さんの最初のお返事が答えになりますか?
であればもう二度・三度、熟読してみなければいけません。
現在のまでの理解では、「・・・これだと私の狙ったとおりになりそうだけどな」という感触で・・・。
黄色とオレンジはいったいどこから出てきたんでしょう。

aki
2023/01/19 (Thu) 02:16

To vanillaice (Akira)さん

大変不躾ですが横から失礼致します。m(__)m

> これを改善する方法はあるでしょうか。

安直なんですが、順番通りに記述したものと頭を同じ位置にするには、親である .inner-contents の margin が 20px 0 なので、子供である flexアイテム側にネガティブmargin を付ければ良いと思うのですが、他にも方法は有りますか?

<div class="innner-contents"> ← 親
<div style="display: flex; flex-flow: column; margin-top: -20px;"> ← 子

(不勉強でスミマセン。いつも学習させて頂いております。有難うございます。)



vanillaice (Akira)
vanillaice (Akira)
2023/01/19 (Thu) 06:08

To Mimizkさん

お疲れ様です ('0')/

> 青・緑・紫は左右で一致をしています〜

まず、雛形の通りにコードを書くようにしてくださいね。でないと難しいmargin調整がさらに難しくなります。

×
<div style="display: flex; flex-flow: column;">
<p style="order: 2;">flex子要素</p>
<p style="order: 3;">flex子要素</p>
<figure style="order: 1;">ブログカード</figure>
</div>


<div style="display: flex; flex-flow: column;">
<div style="order: 2;">
<p>文章
<p>文章
<p>
.
.
.
</div>
<div style="order: 1;">
<figure class="blogcard">ブログカード</figure>
</div>

・ p要素をflexの直系子要素にしない
・ order: 3 は不要(200文字を超えたと思う時点でflexを終了させてください。でないと最終要素までflexの影響を受け、思うようなスタイリングにできない可能性があります。さらにできれば『追記』を活用してください)

-----
今の状態だとflexの直系子要素は3つあります。
① 1番目記述
② 2番目記述
③ 3番目記述(ブログカード)

①②③はそれぞれ兄弟関係ですが、flexの子要素なので marginは相殺されません。
親とのmarginも相殺されません。
(通常記事の方にオレンジの余白が無い点については参考記事の「margin消失と思ってしまうパターン」を熟読してください)

https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_flex_mn.png

-----
どうするか、なんですけども、akiさんのアイデア「ネガティブマージン」はあまりおすすめできません。記事部位のmarginが必ずしもmarginとは限りませんし、marginだとしても必ず20pxとは限りませんので、テンプレート変更時に困ってしまう可能性があります。

なので、flex内の場合はブログカードのmarginを減らす(style属性で指定)という単純な方法をおすすめします。

あとはアドバイスになります。
marginの確認をする際にはflexでもそうでなくてもborderをつけるという方法は避けた方が良いですね。borderにはもともと「margin相殺を阻害する・防ぐ」という特徴がありますし、子要素のmarginが親要素にも影響するのだという点も見落としてしまいます。

例えばオレンジの部位はまるで親要素についているように見えますが実際には子要素の方についているmarginです。
margin調整についてはmarginの仕組みを熟読して理解する、という方法しかありませんので、なんとか頑張ってくださいね ^^;

子要素内(本来はpではなくdivで作成するようにしてください)にp要素が複数入る場合は、最初のp要素は margin: 0; それ以降は margin-bottom: 0; を指定すると良いですね(最後のp要素のmargin-bottomをどうするかはその時々で変わるかもしれません)

くれぐれも理想は

本文は

<div style="display: flex; flex-flow: column;">
<div style="order: 2;">
<p>文章200文字以上</p>
</div>
<div style="order: 1;">
<figure class="blogcard">ブログカード</figure>
</div>

残りは全て追記へ

という形です。追記をうまく利用するとOGPの操作が非常に楽になります。
(内緒さんの特殊な希望を優先される場合にはOGP操作はできません)

あともう一つアドバイスです。雛形がある場合に要素名を置き換えない

例)
<div>文章</div>

という何らかの装飾のついたhtmlがあるとします。そして文章にはp要素を用いたいという場合はdivをpに置き換えてしまうのではなく

<div>
<p>文章</p>
</div>

とこのようにしてください。変更して問題無い場合もありますが、原則として「やらない」を心がけた方が良いです。特にdiv要素とp要素は性質が全く違いますので置き換えは避けましょう ('0')/

Mimizk
2023/01/19 (Thu) 14:57

To vanillaice (Akira)さん

突然ですが、できました! >https://diffuseness.blog.fc2.com/blog-entry-1044.html
指示されてない方法をするな、と言われた後ですぐ指示されてない方法をして偉い顔ができませんが・・・。

きっかけは Aki さんのお返事の中にありました。
「.inner-contents に margin 20px が設定されている」という部分です。
「いったいどこから出てきたんだ」という私の疑問に的中する回答でした。ありがとうございました。

相殺されたり、されなかったり。
それはよいのですが、そもそもそんな margin を要求した覚えはないぞ、というのが私の疑問でした。
Akira さんの説明でも、ないものが生じるのではなく、あるべきものが現れたのだという筋でした。

本件内容でいえば、特に div の前後に現れた margin です。
テンプレートのスタイルシートに .div の項目がないか探したりもしました。
私が見つけようとしていたのは .inner-contents だったわけです。

.inner-contents と .inner-contents p の margin をどちらも 0 にしました。
Akira さんはご承知の通り、私は、接続する前後要素の組み合わせに応じた margin 設定を CSS にあらかじめ書き込んでいて、記事の文章を作成する際に class 指定でいちいち呼び出して margin を与える書き方をしています。
だから、要素そのものに与えられている margin は、基本的にほとんど全て不要なんです。不要どころか、今回のように挙動が不明になります。
だからこれまでもそうした要素づきの margin は逐次ゼロにしてきたのですが、まだ残っていたとは・・・。


Akira さんはもちろん、Aki 様には重ね重ね助けていただきありがとうございました。

aki
2023/01/19 (Thu) 20:59

To vanillaice (Akira)さん

こんばんは。ご回答有難うございます。

> 記事部位のmarginが必ずしもmarginとは限りませんし、marginだとしても必ず20pxとは限りませんので、テンプレート変更時に困ってしまう可能性があります。

確かにその通りですね。余白はmarginであるとは言い切れないですし、ずっと同じテンプレートとは限りませんし。(^^;
テンプレートが変わっても記事の見え方が変わらないようにインラインでスタイルを入れるなら、テンプレートに関係無い部分(この場合はブログカード)の方を調整するのが良いですね。
有難うございました。ホントにmarginは奥が深い…私も気を付けようと思います。

Mimizkさん、横から大変失礼致しました。何かの気付きになれて(?)良かったです。^^;

vanillaice (Akira)
vanillaice (Akira)
2023/01/20 (Fri) 19:17

To Mimizkさん(終了のご報告)

こんばんは ('0')/

flexの挙動が継承するのは子要素までなのでdivを子要素、pやfigureを孫要素にするのがmarginの調整はしやすいはずですが、方針は人それぞれですし、伝えるべき点は伝えましたのであとは自己管理でお願いします。

あとは「自分でmarginを付けられない何か」が掲載された際に記事領域のmargin無しが影響することがあるかもしませんので、その点についても覚書をするなどしておくと良いと思います :)

vanillaice (Akira)
vanillaice (Akira)
2023/01/20 (Fri) 19:21

To akiさん

こんばんは ('0')/

いつもご協力をありがとうございます :)
marginは難しいですよね。「最も難しいCSSは何か」と聞かれたら迷わず「margin」って答えます(笑)
そしてネガティブマージンはできるだけすすめないことにしてる ^^;

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)