14. 個別記事のレイアウト崩れを直す
2007年09月24日
変更前
|
=> | 変更後のイメージ
|
わたしは普段、Windows XP + Opera9.23 で滋賀咲くBlog を見ているんですが。
例えば、コメントを書こうと「Comments」のリンクをクリックして、個別記事の表示にした時に。
記事の右下の部分の文字が、重なってしまっているのが気になっていました。
ブラウザとして Opera を使っていますと。
Intermet Explorer などでは正常に表示されるサイトでも、レイアウトが崩れることがあったりしまして。
滋賀咲くBlog もそうなのかな? と、今まで勝手に思い込んでいました。
が。
Internet Explorer や Firefox でも、レイアウト崩れが起こっていたんですね。
Windows XP + Internet Explorer 7
|
Windows XP + Firefox 2
|
これは、ちょっとイタダケナイなぁ～と思いまして。
文字が、重ならないようにしてみました。
やるべき作業は、個別記事のテンプレートの変更です。
個別記事のテンプレートの編集は、
1) 滋賀咲くBlog にログイン
2) 左メニューの「テンプレート」をクリック
3) 「カスタマイズ」をクリック
4) 「個別記事」を書替える
5) 「登録」をクリック
で行います。
「個別記事」のテンプレートは、つぎのように書替えました。
書替える場所は、オリジナルの「2カラム マリーン」では 39 行目でした。
わたしは、今までにスタイルシートを変更していますので、58 行目になっていました。
個別記事のテンプレートの編集は、
1) 滋賀咲くBlog にログイン
2) 左メニューの「テンプレート」をクリック
3) 「カスタマイズ」をクリック
4) 「個別記事」を書替える
5) 「登録」をクリック
で行います。
「個別記事」のテンプレートは、つぎのように書替えました。
| 個別記事 | ||||||
|
書替える場所は、オリジナルの「2カラム マリーン」では 39 行目でした。
わたしは、今までにスタイルシートを変更していますので、58 行目になっていました。
12. サイドバーのメニューを中央寄せにする
11. 投稿日を右端に表示する
10. サイドバー内の記事へのリンクなどを見やすくする
9. ブログのタイトル部分の背景画像を取る
1. タイトル表示←→日付表示 交換
11. 投稿日を右端に表示する
10. サイドバー内の記事へのリンクなどを見やすくする
9. ブログのタイトル部分の背景画像を取る
1. タイトル表示←→日付表示 交換
Posted by お京 at 00:00
│デザイン
この記事へのコメント
ブラウザによる型崩れがカスタムする上で１番の敵ですね。
僕も何度やり直しさせられたことか・・・。
今でもOperaだったら崩れてたりして(;^_^A アセアセ・・・
僕も何度やり直しさせられたことか・・・。
今でもOperaだったら崩れてたりして(;^_^A アセアセ・・・
Posted by nory at 2007年09月24日 21:45
＞nory さん
今でも、ブラウザ（レンダリングエンジン）によって、表示が違うことが多いですが。
レイアウトが崩れていても、一応何とか表示してくれる場合が多くなったように思います。
以前は、全く表示してくれない部分があったりしましたので、web サイトのトップページに、表示の確認をしている環境を書いたりしていました。。。
nory さんのブログ、わたしの所では、Opera でもバッチリ! です。
さり気なく技が盛り込まれていて、さすがだなぁといつも思って拝見しています。
今でも、ブラウザ（レンダリングエンジン）によって、表示が違うことが多いですが。
レイアウトが崩れていても、一応何とか表示してくれる場合が多くなったように思います。
以前は、全く表示してくれない部分があったりしましたので、web サイトのトップページに、表示の確認をしている環境を書いたりしていました。。。
nory さんのブログ、わたしの所では、Opera でもバッチリ! です。
さり気なく技が盛り込まれていて、さすがだなぁといつも思って拝見しています。
Posted by お京 at 2007年09月24日 22:38
