読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

feedly(RSS)でも記事を崩さない!ブログ記事作成時にHTMLを適切に使っていこう

記事本文の装飾をCSSだけですると、RSSフィードではそれらが省かれてプレーンテキストになってしまう。HTMLを適切に使っていればfeedlyで閲覧時にもきちん装飾される。注意点も併せて確認したい。

実験結果

HTMLタグによって本文の装飾は可能。CSSやJavaScriptは無視される。よって、このページではHTMLでどのように装飾されたかについて言及する。

はてなブログ記事内にCSSとJavaScriptを入れfeedlyでの表示を確認する実験投稿 - はぴらき合理化幻想

HTMLタグは概ね意図通り解釈される

キャプチャー画像について

上記実験ページをfeedlyで表示した際のキャプチャー画像を下で列挙する。各画像の左側がWindows8のChrome33でfeedlyを表示、右側がiOS 6.1.3のfeedlyアプリによる表示。

強調などの意味を付与するタグ

markタグは強調ではないが、文字を装飾するという意味では一番目立たせやすい。黄色の背景色があるので。強調したい部分はstrongと併用すればfeedlyでも目立たせられる。

<strong><mark>強調させたい文言</mark></strong>

強調などの意味を付与するタグをfeedlyで表示

また、h2h3などの見出しタグは文字が大きく表示されるのでぜひ使っていきたい。

googleクローラ対策!はてなブログ記事作成でも見出しタグを正しく使おう - はぴらき合理化幻想

qタグはなぜかブロックレベル要素になる

ほとんどのタグがHTMLの意味通りの装飾をされる。

qタグには要注意。本来はインライン要素であるはずなのに、なぜかブロックレベル要素として扱われる。下図はqタグを適切に用いたページのキャプチャーだが、feedlyではブロックレベル要素として解釈されるため崩れている。

Amazon売れ筋を激安時に買うなら、過去の値段を自動でグラフ化して検討しよう - はぴらき合理化幻想

ちなみに、筆者はqタグを結構使う。崩れるのを承知で今後も使い続けるかな。qタグを適切に解釈するようfeedlyがその内アップデートされるかもしれないし。この記事のタイトルと真逆じゃねーかというツッコミは勘弁。

CSSやJavaScriptはfeedlyでは無効

feedly側の設定で無効というよりもフィード自体がそういう仕様のようだ。参考までに、下図はCSSによる装飾が無効になっているキャプチャー画像。ダミーテキストの文字色をCSSで赤にしたはずがご覧のとおり。

注意点としては、コメントアウトのつもりでdisplay:none;で文章を非表示にしていても、feedlyではきっちり表示されるくらいかな。

まとめ

feedlyを利用している読者にも配慮すべく、HTMLタグを適切に用いるべき。markタグはHTML5から導入され使っている人は少ないので、使いこなせば他人に一歩差を付けられるかも。

追記

2014年4月24日:マネー報道著者さんのレビューが具体的で参考になる。

てすとてすと