はぴらき合理化幻想

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

はてなブログ記事内にCSSとJavaScriptを入れfeedlyでの表示を確認する実験投稿

feedlyでブログを読んでいると装飾が正常に反映されていないことがある。この記事では、意図した表示になるかどうかを調べるため、稀にしか使わないHTMLタグを使ったり、CSSやJavaScriptをインラインで使用して実験する。

実験環境

今日(2014年4月2日)現在のはてなブログ、feedlyの環境で調べる。ブラウザはchrome33。特に、feedlyは頻繁にマイナーアップデートをするので、将来的には結果に相違がでそう。

この記事がfeedlyに配信されれば結果を別途記事にする。

HTMLタグ

以下、文字通りのタグを使っている。

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

strong

em

dfn

code

mark

s

del

ins

address

装飾用タグ

b

i

u

引用

インライン要素のq

ブロックレベル要素のblockquote

リスト

  • 番号なし
  • 番号なし
  • 番号なし
  1. 番号あり
  2. 番号あり
  3. 番号あり

画像

画像が小さかったりするとレイアウトが崩れるのを確認している。どういう条件で崩れるのかなどは調べない。崩れることがあるという事実はすでに確認しているので、それ以上はまた別の機会に。

インラインCSS

無指定

特にスタイルを設定していないdivdiv内にはダミーテキストを入れている。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

文字

文字色 color:red;

divstyle="color:red;"を適用。ダミーテキストの文字色を赤に装飾。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

背景色 background:skyblue;

divstyle="background:skyblue;"を適用。ダミーテキストの背景色をスカイブルーに装飾。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

太さ font-weight:bold;

divstyle="font-weight:bold;"を適用。ダミーテキストの文字を太く装飾。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

余白

内側 padding:50px;

divstyle="padding:50px;"を適用。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

外側 margin:50px;

divstyle="margin:50px;"を適用。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

枠線 border:5px dashed green;

divstyle="border:5px dashed green;"を適用。ダミーテキストの周りに緑の破線が表示される。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

下線 text-decoration:underline;

divstyle="text-decoration:underline;"を適用。ダミーテキストに下線。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

非表示

スペースを残して非表示visibility:hidden;

divstyle="visibility:hidden;"を適用。このパラグラフの下にダミーテキストを記述しているが、ブラウザではスペースが残ってるだけで文字が見えない。feedlyでは見えるはず。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

スペースごと非表示 display:none;

divstyle="display:none;"を適用。このパラグラフの下にダミーテキストを記述しているが、ブラウザでは見えない。feedlyでは見えるはず。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, optio, eos ad maxime veniam nam magnam accusamus ut laudantium quam odio illum doloribus dolores quod expedita officiis eum porro placeat.

完全に非表示(コメントアウト) <!-- -->

div<!-- -->を適用。ダミーテキストが表示されない。feedlyでも見えないはず。

JavaScript

記述 document.write

このパラグラフの下にdocument.writeでダミーテキストを挿入。feedlyでは挿入されないはず。

入れ替え innerHTML

このパラグラフの下のdiv内のダミーテキストを「入れ替え完了!」に変更する。当ページを普通にご覧の際は既に「入れ替え完了!」になっている。feedlyでは無理っぽい。

入れ替え前

noscript

このパラグラフの下にnoscriptで「jsが無効のようです」と記述。jsが有効なら何も表示されない。

JavaScript自体使えなさそう

feedlyではJavaScriptによる変更などが反映されないと思われる。もしjsが有効なようなら、他にも実験していきたい。

まとめ

これは実験中の記事。結果が分かり次第、別途記事を作成する。

もし、feedly以外でこの記事をご覧の方がいたら、どのような結果になっているのかコメントしていただけるとありがたいです。

追記

実験結果を次のページで確認できる。

feedly(RSS)でも記事を崩さない!ブログ記事作成時にHTMLを適切に使っていこう - はぴらき合理化幻想

てすとてすと