2009年07月15日
自分の記事の幅（width）を知ろう！
皆さんは、自分のブログの記事の幅（width）ってごぞんじでしょうか？ファンブログの記事編集画面はこの記事の幅に関係なく一定の幅の 538px の幅で表示されます。私の記事幅は、558px だから少し狭く表示されるだけなのであまり問題はないのですが、この、538px よりも狭い記事の幅の方は、実際の投稿される記事の幅よりもプレビュー画面の幅が広いので、レイアウトがうまくできないことが何度かあったんじゃないでしょうか？
特に、バナーや挿入した画像がプレビュー画面では問題なかったのに、投稿するとはみ出てしまったことなんかは、記事の幅以上に表示されるプレビュー画面を使って編集しているので、当然起こってしまう現象なんです。
このようなことが起きないようにするためには、自分のブログの記事の幅を知っておく必要があります。
記事の幅がわかっていれば、挿入する画像やバナーの幅に気をつければいいことになります。
シンプル系スキンをご利用の方は、スタイルシートで変更していなければ幅が決まっています。2カラムの方は、558px で、3カラムの方は、468px です。スキンを選ぶ画面ではこれより、10px 多い数字が記載されていますが、記事の幅は左右に、5px の余白が設定されていますので、5×2=10px を差し引いたものが記事の幅になります。
「保存」を押すと表示される確認画面がプレビュー画面より狭くなりますので、3カラムの方はこの確認画面が記事の幅になって表示されていると勘違いされがちですが、この確認画面も記事の幅に関係なく、500px で表示されます。3カラムの記事の幅は、468px なので、500pxの確認画面でうまく表示されていても、投稿するとうまく表示されないのはこの幅の違いからなんです。
旧スキンの方は、スキンによってさまざまなんで、わかる方はスタイルシートで確認してください。
そんなのわからないって方には、おもいっきりアナログな方法で調べる方法があるんですが、あまりに稚拙な方法なので、それでもいい！って方だけ読んでくださいませ。(-ω-;)）
方法は新しい記事でも、過去記事でもかまいませんので、 <hr> というタグを記述して水平線を 自分の記事に追加して投稿してください。この幅を何も設定しない水平線は記事幅いっぱいに表示されます。
投稿された記事の水平線を画面上で定規で測ります。(-ω-;)）画面保護のためにそんなことをしたくない方は印刷して測っていただいても構いません。
水平線の長さがわかったら、記事幅になるべく近い幅のバナーや画像の横幅を同じく定規で測ります。
測ったバナーや画像の大きさを調べるために、バナーや画像を右クリックしてプロパティを選択し、大きさ ： の横幅（最初の数字）をメモしてください。
これで画面上で、1px は 何ミリ かという計算ができますので、多少の誤差はありますが、だいたいの記事の幅がわかるわけです。
ちなみに私の場合、水平線の長さが、約184 ミリ、468px のバナーの長さが、約154 ミリ だったので、
468÷154×184≒559 という結果となり、本来の 558px から1px の誤差で計算できました。
本当にアナログなんですが、この方法は私がピクセルの感覚をつかむために行った方法でもありますので、
多少は役に立つかもしれません。(-ω-;)）
いかがでしたでしょうか？記事の幅が、468px の3カラムの方は、プレビュー画面（538px）や確認画面（500ｐｘ）より記事の幅（468px）が狭いということがわかりますと、投稿すると画像がはみ出てしまったり、横に並ばない理由も理解できるようになります。挿入する画像や、バナーの幅をよく確認してレイアウトしてみてくださいね。
またちょっとしたことを発見しましたら記事をアップします。気長にお待ちくださいませ。(´・ω・`)
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら
≫ FC2 Blog Ranking ≪
押していただけると励みになります
記事の幅がわかっていれば、挿入する画像やバナーの幅に気をつければいいことになります。
シンプル系スキンをご利用の方は、スタイルシートで変更していなければ幅が決まっています。2カラムの方は、558px で、3カラムの方は、468px です。スキンを選ぶ画面ではこれより、10px 多い数字が記載されていますが、記事の幅は左右に、5px の余白が設定されていますので、5×2=10px を差し引いたものが記事の幅になります。
「保存」を押すと表示される確認画面がプレビュー画面より狭くなりますので、3カラムの方はこの確認画面が記事の幅になって表示されていると勘違いされがちですが、この確認画面も記事の幅に関係なく、500px で表示されます。3カラムの記事の幅は、468px なので、500pxの確認画面でうまく表示されていても、投稿するとうまく表示されないのはこの幅の違いからなんです。
旧スキンの方は、スキンによってさまざまなんで、わかる方はスタイルシートで確認してください。
そんなのわからないって方には、おもいっきりアナログな方法で調べる方法があるんですが、あまりに稚拙な方法なので、それでもいい！って方だけ読んでくださいませ。(-ω-;)）
方法は新しい記事でも、過去記事でもかまいませんので、 <hr> というタグを記述して水平線を 自分の記事に追加して投稿してください。この幅を何も設定しない水平線は記事幅いっぱいに表示されます。
投稿された記事の水平線を画面上で定規で測ります。(-ω-;)）画面保護のためにそんなことをしたくない方は印刷して測っていただいても構いません。
水平線の長さがわかったら、記事幅になるべく近い幅のバナーや画像の横幅を同じく定規で測ります。
測ったバナーや画像の大きさを調べるために、バナーや画像を右クリックしてプロパティを選択し、大きさ ： の横幅（最初の数字）をメモしてください。
これで画面上で、1px は 何ミリ かという計算ができますので、多少の誤差はありますが、だいたいの記事の幅がわかるわけです。
ちなみに私の場合、水平線の長さが、約184 ミリ、468px のバナーの長さが、約154 ミリ だったので、
468÷154×184≒559 という結果となり、本来の 558px から1px の誤差で計算できました。
本当にアナログなんですが、この方法は私がピクセルの感覚をつかむために行った方法でもありますので、
多少は役に立つかもしれません。(-ω-;)）
いかがでしたでしょうか？記事の幅が、468px の3カラムの方は、プレビュー画面（538px）や確認画面（500ｐｘ）より記事の幅（468px）が狭いということがわかりますと、投稿すると画像がはみ出てしまったり、横に並ばない理由も理解できるようになります。挿入する画像や、バナーの幅をよく確認してレイアウトしてみてくださいね。
またちょっとしたことを発見しましたら記事をアップします。気長にお待ちくださいませ。(´・ω・`)
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【小技・裏技の最新記事】
この記事へのコメント