先日失敗しました。
記事に入れる「見出しタグ」を見映えよくしたいと思って、他のブログ記事を物色して、何も考えずにこんなのを使い始めました。「なんてステキ❤」と満悦し、その後ヘビーユースしておりました。先日までは。。
ところが最近、Bloggerにサイトを作り、そこに記事を移行しようとしたところ、
移行作業は結構大変で、記事数がまだ少ないのに、すごく手間がかかりました。
独自ドメインを取得していないことが、大きな理由ではあったのですが、
もう一つ、記事をひとつずつコピペしていくうちに、今回の失敗に気づきました。
HTMLタグの中身がグチャグチャ
記事をそのまま移行すると、見栄えが違ってしまったり、リンクが切れてしまうことが多々あります。そこで、HTMLを直接編集することになるのですが。。。
うゲッ！
本文以外の文字がウジャウジャしています。
もともとそこまでひどい記事ではなかったはずなのですが、コピペのタイミングで何かの記述が自動で加わって、恐ろしいことになっていました。
例えば、さきほどの
の１つめは、
<h4 style="color: #222222; line-height: 1.8; clear: both; margin: 1em 0px 0.8em; font-size: 1.5rem; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; position: relative; padding: 0.5em; border-left: 7px solid #87cefa; font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic'; letter-spacing: normal; background-color: #eeeeee;">こんな見出し</h4>
「こんな見出し」だけを表示するために、ものすごい量のcssが書きこまれていました。
中には、ものすごい量の旧サイトの残骸が混じっていました。
移行先のスタイルとバッティングして表示がおかしくなった
さらに表示まで変わってしまいました。
黒いアンダーラインが入っています。
これは、移行先のテンプレートに、見出しタグのデザインが指定されているため、それが前提となり、新たに移行した元のサイトのタグが上書きするという表示になってしまったんです。
要素タグに直接cssコードを書いてはいけない理由
記事の表示時間が遅くなってしまう
記事自体の文字数はそれほど多くなくても、実体であるHTMLの文字列が膨大になると、読者が記事を表示するのに時間がかかってしまい、読者離れにつながります。
修正や移行の手間が半端なくかかってしまう
記事本文と関係ない文字が多く混在するHTMLは、とても読みづらく、修正箇所を探すのも一苦労だし、少しでも修正を誤ると、表示が狂ってしまいます。
解決策
そうした事態も想定して、元の記事のHTMLを、極力サイトに依存しない書き方に、スリムにしておくのがいいと思いました。そこで、要素タグに直接cssコードを書かないようにしました。
もともとブログサイトには、多数のデザインテンプレートが用意されていて、それを使ってブログを作ると、作者が様々なcssを用意してくれています。
多くのテンプレートが、見出しタグのデザインも作ってくれています。それを選ぶか、あらかじめ見出し用のcssを作っておくことにしました。
例えば、このブログはBlooklyn というテンプレートを使っています。見出し用のデザインも用意されているので、<h3> <h4>と書いておけば、かっこいい見出しデザインを出してくれるんです。そうすれば、移行先で融通が利いて、手間が大幅に減ります。
ブログサイトや、テンプレートに依存しないHTMLを作ることが大事だと、失敗から改めて学びました。
