MemoRandum

ゲーム / エンタメ / 自由業

はてなブログのMarkdownでYouTubeを埋め込んだ時のiframe要素を中央寄せにカスタマイズしてみる

昨日、トリックがアマプラで見られて嬉しいという記事を書いているとき、YouTube動画を埋め込んだ位置に左に寄っているのが気になりました。

f:id:randumemo:20190225225707p:plain

こんな感じで左に寄ってしまっているので、真ん中に寄せるようにカスタマイズしてみました。

というか、MarkdownエディタでYouTube埋め込んだ時のHTMLおかしくない?

本題に入る前に少しだけ愚痴を書きます。

私はMarkdownで当ブログ記事を書いているのですが、はてなブログのYouTube貼り付け機能で生成されるHTMLがなんかおかしい。

※Markdownエディタ上での表示

<iframe width="560" height="315" frameborder="0" allowfullscreen="" src="動画URL"></iframe><br><a href="動画URL">動画タイトル</a>

iframeはインライン要素なので、brタグで改行を入れるのはおかしくありませんし、MarkdownのエディタはHTMLも併記できるのが嬉しいところですよね。というわけでこのまま記事を投稿してみると、表示がこうなります。

f:id:randumemo:20190225231042p:plain

なんでこんなに間隔が空くの?って思ってHTMLを見てみると……

※実際にブラウザ上で表示される時のHTML

<iframe width="560" height="315" frameborder="0" allowfullscreen="" src="動画URL"></iframe>
<p><br><a href="動画URL">動画タイトル</a></p>

という感じになっています。brを含む動画タイトルだけがpタグに囲まれているので表示が狂っています。本当はiframeごとpタグで囲んで欲しいのですが……

この意味不明な位置に挿入されるbrと囲んで欲しいところを囲んでくれないpタグに関しては、はてなブログのMarkdownエディタ側の問題であり、カスタマイズでどうこうできる話ではありません。

この位置のbrは明らかに不要なので、YouTubeをMarkdownエディタで貼り付けるたびにbrは手動で消すことになります。不服です。

iframeを中央寄せにする

iframeはインライン要素なので、divタグやpタグなどのブロック要素で囲んでからtext-align:centerを効かせるのが正攻法だと思いますが……

毎回YouTubeを貼り付ける度にHTMLを追記するのはシンプルに面倒くさいので、iframe自体をブロック要素にして中央寄せします。

.entry-content iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;

.entry-content iframe+p a {
    display: block;
    text-align: center;
}

.entry-content .hatena-citation {
    text-align: center;
}

2019/03/03 追記

スマホのはてなブログのエディタからYouTube動画を貼り付けた際に、説明文がciteで囲まれるというPC版と異なるHTMLが生成されていたため、.hatena-citationを追記しました。

追記ここまで

ついでにmax-widthを100%にしてスマホ表示でも埋め込んだYouTube動画がはみ出さないようにしておくのが良いかなと思います。当ブログで利用してるテーマのPalleteにはmax-widthが指定されており、テーマに記述されている場合はmax-widthの再指定は不要です。

.entry-content iframe+p aで、動画のタイトル部分も中央寄せします。

動画のタイトルを中央寄せする

iframeだけ中央寄せすると、タイトルが左にいってしまいます。

f:id:randumemo:20190225235542p:plain
タイトルだけ左にいってしまうのでデザインが崩れる。

これを防ぐために、iframe直後のpタグの中にあるaタグを無理矢理中央寄せにします。

pタグに指定する方が自然ですが、何かYouTube以外のiframeを記述したり、タイトルを表示しない時など、他の場面で想定外の事故をなるべく起こさないために適用条件を狭くしています。

f:id:randumemo:20190226010602p:plain
タイトルも中央寄せになり、デザインが整いました。

Markdwonで出力されるHTMLがiframeとタイトルをまとめてpタグとかでまとめてくれていれば、そこにtext-align:centerを書くだけで良かったのですが……

最後に

動画とか画像を中央寄せするかどうかは意見が分かれるところですよね。

個人的には中央寄せしたい派ですが、左寄せ派が多いような気がします。