Chance to intersect Grid ++Blog -2ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

なんたる不覚・・・

アメブロに搭載するギミックプラグインを作ってる最中にデザインを初期化してしまいました・・・

一度スキンを変更してしまうとせっかく頑張ったｃｓｓもすべて消えてしまいます

みなさんも気をつけましょう

あまりに更新をサボっていたのでバチが当たったのかもしれません・・・

アメブロも履歴から復活できるようなもう少し気の効いた機能を付けてくれてもいいと思いますが

バックアップは一応とってありますが戒めのため、醜態をさらしてしばらくこのままでいきます

ｃｓｓを見直すいい機会と割り切って自分に言い聞かせます

FireFoxの表示だけタイトルが小さく表示される

先日、相談を受けた際にちょっぴり調べたので展開。

内容は「Amebloの記事タイトルが小さく表示される」とのこと。
問題のブログを見てみると、ちゃんとタイトルは表示されてる・・・？

ブラウザのせいかな？と思いつつ、いくつかのブラウザで表示確認。
IE8,IE9,FireFox,Chrome,Safari,Opera・・・

・・・

FireFoxだけタイトルの表示がおかしい・・・

なんで？？？

CSS見ても問題なさそう。
まぁ、他のブラウザではちゃんと表示されてるしね。

FireFoxが悪さしてると踏んで、調査開始。

ひとまずFireFoxで表示されたときのCSS有効範囲を確認。
・・・？
フォントサイズ指定が無効化されてる

問題の箇所のHTMLを確認。
・・・？？
見たことのないタグを発見


 <font size="1" _moz-rs-heading="">記事タイトル</font>

フォントサイズ”1”って・・・

調べてみたらこのタグはMozillaが使っているGeckoと呼ばれるレンダリングエンジン
によって自動的に介入している模様。。。

独自拡張の HTML属性らしく、これによって適用されるUAスタイルシートがこちら


/* Quirk: Make sure that the residual style tags' size info. 
 * does not take precedence over heading tags' size. (b=77352)
 * Note: This special attribute is set only for a residual 
 * style tag within a heading tag.
 */
/* XXX This is a potential performance problem.  This should not be
 * using an attribute!
 */
*[_moz-rs-heading] { 
  font-size: inherit !important; 
}

うん、完全に「!important」で上書かれてます。

表示の高速化などを目的として介入するようですが、HTMLの記述が間違って
いたりすると補正として自動で入る事もあるようです。
本件では後者(HTML記述)で発生していました。

フリースペースで記述されていたHTMLがネスト化されていてタグがエラーを吐いていた模様。

フリースペースを直したら問題なく表示されたとの報告を受けて一件落着

今回、偶然見つけられましたが、はまったらなかなか見つかりません・・・
いい勉強になりました。

もし、同じようにFireFoxでフォント表示がおかしくなっていたら
フリースペースやフリープラグインの記述を確認してみてください。

【FriendFeed】Amebloとtwitterを連携させる

Amebloとtwitterを連携させるのに"FriendFeed"を使用します。
連携といえば少し前は"twitterfeed"が定番でしたが、"FriendFeed"を使うことで
様々な拡張性のあるサービスが利用できます。

※twitterfeedからFriendFeedへ移行される方はtwitterfeedを解除してくださいね。
　二重で登録されてしまうので・・・

1.FriendFeedにアクセス
http://friendfeed.com/
※twitter、amebloにログインした状態でアクセスすると簡単に登録できます。

2.FriendFeedにtwitterアカウントを登録
画面右にあるtwitterアイコンをクリック