この記事は、はてなブログ↓へ移動しました。
http://mamadeok.hatenablog.com/entry/2013/03/06/000000
（10秒後に自動的にジャンプします。）
IE９で背景がずれる現象がこれで直った
長時間いじり倒したが、いうことをきかない
借り物のテンプレ。
IE９で表示確認されていないCSSだった、ということにカスタマイズの終盤で気づいた。
<div>～</div>の中に<ul>が入っている仕様。
div要素の背景が、Firefoxだと問題なし、IE９だと15pxくらい上にずれる。
しかし、ul要素はIEでも正しい位置で表示されている。
ためしに<ul>～</ul>を削除してみたら、FirefoxでもIE９と同じだけ背景がずれてしまった。
なんだろうこれ。
思いつく限りのタグを入れたり外したり、数値を変更したりしてみたが、div要素がほとんど動かない。
解決策は驚くほどシンプルだった
初めのCSSは
background:url(http://～) no-repeat bottom;
となっていた。
これを
background:url(http://～) no-repeat;
background-position: bottom;
background-attachment:fixed;
に変更したところ、IE９でも正しく表示されるようになった。
位置のXY軸をピクセルで指定してフィックスにしたときはダメだったのに、bottomでよかったとは。
で、今の今までディブと読んでいたdivは、ダイヴと読むのが正しいと判明。
【追記】
divisionの略なので、やっぱりディブのほうが適切なんじゃないかと思うしだい。
テキトーなこと書いてしまってごめんなさい。
借り物のテンプレ。
IE９で表示確認されていないCSSだった、ということにカスタマイズの終盤で気づいた。
<div>～</div>の中に<ul>が入っている仕様。
div要素の背景が、Firefoxだと問題なし、IE９だと15pxくらい上にずれる。
しかし、ul要素はIEでも正しい位置で表示されている。
ためしに<ul>～</ul>を削除してみたら、FirefoxでもIE９と同じだけ背景がずれてしまった。
なんだろうこれ。
思いつく限りのタグを入れたり外したり、数値を変更したりしてみたが、div要素がほとんど動かない。
解決策は驚くほどシンプルだった
初めのCSSは
background:url(http://～) no-repeat bottom;
となっていた。
これを
background:url(http://～) no-repeat;
background-position: bottom;
background-attachment:fixed;
に変更したところ、IE９でも正しく表示されるようになった。
位置のXY軸をピクセルで指定してフィックスにしたときはダメだったのに、bottomでよかったとは。
で、今の今までディブと読んでいたdivは、ダイヴと読むのが正しいと判明。
【追記】
divisionの略なので、やっぱりディブのほうが適切なんじゃないかと思うしだい。
テキトーなこと書いてしまってごめんなさい。
画像ごとにテキストの回り込み方を変えるCSS
各記事内の画像にテキストを回り込ませるために、alignを入れていて、
当初はプレビューでもアップした記事でも、ちゃんと回り込んでいたのに、
しばらく時間を空けてみてみたら、どれもテキストが下に落ちていた・・・。なぜ？
調べたらこのタグ、もともと非推奨のうえに、近い将来使えなくなるとか。
そのせいかどうかはわからないが、このブログで反映されないことは確かなので、別の方法で回り込ませることに。
ほかの方の参考になるかもしれないので、解決策をメモ。
画像のimgタグにclass指定（例：<img class="mamadeok" />）をしたあと、
記事ごとに以下のようなタグを直接書き込む。
marginとpaddingの値を変えれば、レイアウトを記事ごとに調整できる。
<style type="text/css">
<!--
img.mamadeok {
float: left;
margin:0px;
}
-->
</style>
margin:0px;は一見要らないようだが、入力しないと回り込まなかった。
bloggerの「作成」モードから「HTML」モードに戻すと、なぜか最後の -->と</style> が入れ替わってしまうため、「作成」モードには切り替えないのが吉。
【11/03 追記】入れ替わらなくなっている模様。
当初はプレビューでもアップした記事でも、ちゃんと回り込んでいたのに、
しばらく時間を空けてみてみたら、どれもテキストが下に落ちていた・・・。なぜ？
調べたらこのタグ、もともと非推奨のうえに、近い将来使えなくなるとか。
そのせいかどうかはわからないが、このブログで反映されないことは確かなので、別の方法で回り込ませることに。
ほかの方の参考になるかもしれないので、解決策をメモ。
画像のimgタグにclass指定（例：<img class="mamadeok" />）をしたあと、
記事ごとに以下のようなタグを直接書き込む。
marginとpaddingの値を変えれば、レイアウトを記事ごとに調整できる。
<style type="text/css">
<!--
img.mamadeok {
float: left;
margin:0px;
}
-->
</style>
margin:0px;は一見要らないようだが、入力しないと回り込まなかった。
bloggerの「作成」モードから「HTML」モードに戻すと、なぜか最後の -->と</style> が入れ替わってしまうため、「作成」モードには切り替えないのが吉。
【11/03 追記】入れ替わらなくなっている模様。
fc2から引越ししてきました
このメリケンbloggerってやつは、至れり尽くせりの過保護fc2とは正反対の放任主義。
国柄の違いなんでしょうか。
日本人女性や子どもには、およそ好かれそうにない無骨なおっさん臭い作りです。
リアルタイムプレビューだの、絵文字だの、自動で必要なHTMLタグを足してくれるだの、
そんな気の利いたものはありません。
そのくせ、余計なタグを勝手に挿入してくるので、それを削除していたら、
すぐに「閉じタグしかねーぞ！」と警告表示が降りてきます。
今しも余った閉じタグを消そうとしているところなのに、おそろしく短気です。
絵文字エディターだの、お絵かきエディターだの、
そんなしゃらくさいオプション、もちろんあるわきゃありません。
リンクは全部、同窓表示。
別窓にしたいなら、てめえでタグを書き足せって話です。
※「HTML」ではなく、「作成」画面のほうの「リンク」なら別窓表示設定できました。失礼。
pingもWeblogs.comにしか送信しません。
ping送信先を追加するところもありません。
男はふんどし一丁で勝負、ってことなんでしょうか。
テンプレのHTMLも見たことのないタグだらけで、
外部の者を容易には寄せ付けない仕様。
不用意に足したり削ったり、移動させたりすると、即座にエラーが出ます。
こちらに落ち度がないときにも、しょっちゅう404。
ワイルドにもほどがある。
閑話休題。
ログをインポートしたら、管理画面内のコメント一覧にエラーが出たので、
一つずつ手作業で移しました。
（一度出たエラーは、中身を全削除しても直らなかったため、
ブログごと消して、再度新規作成。しょっぱなから容赦ない。）
ついでに、貧相な画像も作り変え、意味不明の文章を直し、
若干ブラッシュアップしております。
ただ、コメントは移行できなかったため、断念せざるを得ませんでした。
メッセージをくださった方、どうかご容赦ください。
堪忍袋の緒が切れるまで、このままbloggerで更新していく所存です。
国柄の違いなんでしょうか。
日本人女性や子どもには、およそ好かれそうにない無骨なおっさん臭い作りです。
リアルタイムプレビューだの、絵文字だの、自動で必要なHTMLタグを足してくれるだの、
そんな気の利いたものはありません。
そのくせ、余計なタグを勝手に挿入してくるので、それを削除していたら、
すぐに「閉じタグしかねーぞ！」と警告表示が降りてきます。
今しも余った閉じタグを消そうとしているところなのに、おそろしく短気です。
絵文字エディターだの、お絵かきエディターだの、
そんなしゃらくさいオプション、もちろんあるわきゃありません。
※「HTML」ではなく、「作成」画面のほうの「リンク」なら別窓表示設定できました。失礼。
pingもWeblogs.comにしか送信しません。
ping送信先を追加するところもありません。
男はふんどし一丁で勝負、ってことなんでしょうか。
テンプレのHTMLも見たことのないタグだらけで、
外部の者を容易には寄せ付けない仕様。
不用意に足したり削ったり、移動させたりすると、即座にエラーが出ます。
こちらに落ち度がないときにも、しょっちゅう404。
ワイルドにもほどがある。
閑話休題。
ログをインポートしたら、管理画面内のコメント一覧にエラーが出たので、
一つずつ手作業で移しました。
（一度出たエラーは、中身を全削除しても直らなかったため、
ブログごと消して、再度新規作成。しょっぱなから容赦ない。）
ついでに、貧相な画像も作り変え、意味不明の文章を直し、
若干ブラッシュアップしております。
ただ、コメントは移行できなかったため、断念せざるを得ませんでした。
メッセージをくださった方、どうかご容赦ください。
堪忍袋の緒が切れるまで、このままbloggerで更新していく所存です。
このブログについて
古巣のFC２から離れ、物見遊山に越してきました。
「ママでＯＫ？」の「ママ」は、そのままの「ママ」。校正用語です。
おっかさんのブログではありません。
おっさんのブログかもしれません。
記事の大半が編集や校正の話です。
学参物に関するノウハウをわけ知り顔に書いておりますが、正当な出版物の編集・校正に、迂闊に流用なさいませんようご注意ください。
叱責される、干される、白髪が増えるなど、さまざまな不幸に見舞われるおそれがあります。
いろいろな誤謬を含んでいる「ママでＯＫ」ではないブログですので、ミスを目ざとく発見されましたら、奮ってご指摘ください。
いつでも鼻をへし折られる覚悟はできております。
【追記】2016年8月、noteにも手を出しました。気合を入れて書いています。
「ママでＯＫ？」の「ママ」は、そのままの「ママ」。校正用語です。
おっかさんのブログではありません。
おっさんのブログかもしれません。
記事の大半が編集や校正の話です。
学参物に関するノウハウをわけ知り顔に書いておりますが、正当な出版物の編集・校正に、迂闊に流用なさいませんようご注意ください。
叱責される、干される、白髪が増えるなど、さまざまな不幸に見舞われるおそれがあります。
いろいろな誤謬を含んでいる「ママでＯＫ」ではないブログですので、ミスを目ざとく発見されましたら、奮ってご指摘ください。
いつでも鼻をへし折られる覚悟はできております。
【追記】2016年8月、noteにも手を出しました。気合を入れて書いています。
登録:
投稿
(
Atom
)
投稿
