Bloggerブログでフッターやサイドバーなどの文章が太字や斜体に変わる原因を突き止めた

ブログのテンプレートをBloggerの公式テーマのContempoに変更してからトップページのデザインが偶に崩れてフッターやサイドバーの文章が予定外に太字や斜体に変わるのを苦しんでいた。幾つも記事の抜粋が並んでいて途中から起きていて気付いたのは記事の本文に太字や斜体のHTMLタグが使われている場合なので、外すと元に戻るから仕様がないと使うのを止めたりしていた。しかし久々に又起きてやはりどうにかならないかと昨夜は寝る間も惜しんで追求し続けてしまった。公開済みの新しくてまだトップページに抜粋が掲載されている記事を修正したら駄目になったので、もしや修正した部分が予定外のデザインに影響しているんだと原因が初めて突き止められそうな感じがしていたせいも大きかった。全然、無理で、不健康な睡眠負債を避けるべく、午後十一時過ぎには眠るしかなかったけど、しかし目を閉じてちょっと考えるとマインドフルネス（瞑想）に近付いて脳の自由度が増したのか、ブログのトップページのソースコードを確認してみようと初めて閃いた。朝、起きてスマホの電池が少なかったので、充電するのに二時間くらい経ってからChromeブラウザで「view-source:」を先頭に付けたURLでブログのソースコードを閲覧するとついに分かったと喜んだ。ブログの強調のemタグの開始タグが残っているソースコード

今回はトップページのフッターやサイドバーが斜体に変わっていたけど、とにかく記事の抜粋の中に本文で使われている強調のemタグが開始タグ（<em>）だけ残っていたのがデザインを崩している。HTMLのマークアップで強調のemタグは終了タグ（</em>）がなければどこまでも斜体のデザインの指定がかかってしまうからトップページの抜粋に開始タグだけが残っていると後から続いて記載されている他の部分のフッターやサイドバーにも影響が出るのは間違いないんだ。記事の本文から原因のemタグを外すとトップページのデザインも全て元に戻った。Bloggerのテンプレートでも以前はなかったと思うし、2017年に追加されたContempoとSohoとEmporioとNotableでトップページの抜粋の取り方が変わったせいではないか。追記：2021年に確認するとそれらの公式テーマでは不具合が出なくなり、カスタマイズでスニペットの文字数を指定する場合だけまだ起こるらしい。プログラムで自動的に記事の本文から抜粋を取ってトップページに並べているけど、一部のHTMLタグが中途半端に記載されるようになっているから注意しなくてはならない。記事の抜粋の太字や斜体の開始タグが原因とすると記事ページの人気の投稿のガジェットもトップページと仕組みは同じだからデザインが崩れ兼ねないわけだ。領域のdiv、段落のp、引用のblockquoteなど、記事の本文の殆どのHTMLタグは省略されてトップページなどの抜粋に使われるのは基本的に改行のbrとリンクのaだけで、コンテンツとして再構成されている。ところが太字のstrongとbや斜体のemとiなどの一部のHTMLタグが記事の抜粋でデザインに反映しないにも拘わらず、その本文から省略されないまま、ソースコードには記載されているんだ。記事の本文のマークアップの一部の開始タグが残った抜粋からフッターやサイドバーのデザインを崩すのはBloggerのプログラムが不十分といわざるを得ない。利用者は独力でどうにもできないから直して貰えると有り難いにせよ、現状ではフッターやサイドバーの文章が予定外に変わるのは記事の抜粋の中途半端なHTMLタグのせいだと理解しながら避けるためには本文のマークアップを見直すしかないと覚えておきたい。記事の本文の冒頭の千数百字が抜粋に取られるから他の部分でデザインが崩れてしまう場合は太字や斜体を使うのを止めるか、または使っても所定のマークアップが抜粋で途切れずに終了タグまで入るように記事の本文の冒頭の千数百字に押し込めておくと大丈夫だ。分からなくて辛かったし、標準で良いはずの文章が太字や斜体で見立つのは気持ち悪いから原因が突き止められて本当に良かった。

コメント