2009.01.29
今更な感じですが、IE6でのレイアウト崩れについてです。
<div>や<img>などの要素を縦に並べたとき、余計な隙間ができてしまうことがあります。場合によって原因は変わってくると思いますが、起こりやすそうなものを書いてみます。
横幅にぴったりな<img>の下の隙間
<img>タグで親の横幅にぴったりな画像を入れている場合、直下の要素との間が空いてしまうことがあります。
これは、<img>と要素の間の改行が原因であることが多いです。
<div>
<img src="xxxxx">
<div>
コンテンツ
</div>
</div>
コードを見やすくするために改行したいものですが、改行は半角スペースに変換されてしまうため、横幅に納まりきらず縦に伸びてしまいます。
こういう場合は<img>タグ後の改行をとってしまうか、<img>タグの後ろに<br />タグを入れれば解決できます。
<div>
<img src="xxxxx"><br />
<div>
コンテンツ
</div>
</div>
こんな感じです。
縦細の<div>の下にできる隙間
縦幅の狭い<div>などを使っている場合、下に余計な余白がでることがあります。
これは、指定した height よりも文字サイズ+行間が大きいことが原因です。
厄介なのは、要素内にテキストを入れてなくても起こること・・
パッと見て、文字サイズが問題だと気付きにくいです。
スタイルで font-size や line-height を指定して、<div>の height よりも小さくしてあげれば直ると思います。
09/6/24
後に別の記事でも書いていますが、スタイルに「overflow:hidden; 」を設定することでも解決できるようです。
文字サイズでも間違いではないですが、あまり小さくするとスパム扱いされてしまう場合があるようです・・。
<div>や<img>などの要素を縦に並べたとき、余計な隙間ができてしまうことがあります。場合によって原因は変わってくると思いますが、起こりやすそうなものを書いてみます。
横幅にぴったりな<img>の下の隙間
<img>タグで親の横幅にぴったりな画像を入れている場合、直下の要素との間が空いてしまうことがあります。
これは、<img>と要素の間の改行が原因であることが多いです。
<div>
<img src="xxxxx">
<div>
コンテンツ
</div>
</div>
コードを見やすくするために改行したいものですが、改行は半角スペースに変換されてしまうため、横幅に納まりきらず縦に伸びてしまいます。
こういう場合は<img>タグ後の改行をとってしまうか、<img>タグの後ろに<br />タグを入れれば解決できます。
<div>
<img src="xxxxx"><br />
<div>
コンテンツ
</div>
</div>
こんな感じです。
縦細の<div>の下にできる隙間
縦幅の狭い<div>などを使っている場合、下に余計な余白がでることがあります。
これは、指定した height よりも文字サイズ+行間が大きいことが原因です。
厄介なのは、要素内にテキストを入れてなくても起こること・・
パッと見て、文字サイズが問題だと気付きにくいです。
09/6/24
後に別の記事でも書いていますが、スタイルに「overflow:hidden; 」を設定することでも解決できるようです。
文字サイズでも間違いではないですが、あまり小さくするとスパム扱いされてしまう場合があるようです・・。
2009.01.20
エントリーを登録時、一度入力されているタグは、選択候補として表示してくれる補助機能があります。
タグを入力フィールドに入力した時に、すでに一度使用しているタグと一致すると、そのタグが候補としてリストで表示されます。
1バイト文字の場合は1文字でも入力されればリアルタイムに表示されますが、2バイト文字の場合は文字を確定させる必要があります。しかし、2バイト文字を確定しても候補が表示されないません。一文字、確定後、下矢印キーで表示させることができるようです。
ちなみに、リストの中からの選択は直接マウスで選択するか、上下矢印で選択後、tabキーで確定します。
グラビティワークス 浅賀
タグを入力フィールドに入力した時に、すでに一度使用しているタグと一致すると、そのタグが候補としてリストで表示されます。
1バイト文字の場合は1文字でも入力されればリアルタイムに表示されますが、2バイト文字の場合は文字を確定させる必要があります。しかし、2バイト文字を確定しても候補が表示されないません。一文字、確定後、下矢印キーで表示させることができるようです。
ちなみに、リストの中からの選択は直接マウスで選択するか、上下矢印で選択後、tabキーで確定します。
グラビティワークス 浅賀
2009.01.19
先日、お客様先のディレクターさんとの制作進行の電話ミーティング中に、
『3点確認』
という言葉がでてきました。
むむ? はじめて耳にする言葉です。
3点とは
・テキスト
・レイアウト
・データ
の3点ことで、その確認のことを『3点確認』というそうです。
なるほどー、質問して良かった。。
編集の分野のお客様なので、おそらく編集の世界の3点なのでしょう。
でも、われわれWEB制作の各フェーズで使えそうなフレーズなので、メモ。
・テキスト(何を掲載するかの要素確定)
・レイアウト(要素をどのようにレイアウトするか)
・データ(実際の要素制作、手配)
グラビティワークス 浅賀
『3点確認』
という言葉がでてきました。
むむ? はじめて耳にする言葉です。
3点とは
・テキスト
・レイアウト
・データ
の3点ことで、その確認のことを『3点確認』というそうです。
なるほどー、質問して良かった。。
編集の分野のお客様なので、おそらく編集の世界の3点なのでしょう。
でも、われわれWEB制作の各フェーズで使えそうなフレーズなので、メモ。
・テキスト(何を掲載するかの要素確定)
・レイアウト(要素をどのようにレイアウトするか)
・データ(実際の要素制作、手配)
グラビティワークス 浅賀
2009.01.15
■MT4.x / MT5.x(2012/1/10確認)
MTでのブログ内検索についてです。
ブログの検索フォームからキーワード検索を行った場合、検索の対象となるのは
・タイトル
・本文
・続き
・キーワード
の4つです。
書き出されたテキストが検索対象になるわけではありません。
検索対象を新しく増やしたい場合、下記のサイト様で配布されているプラグインを使用することで、カスタムフィールドを検索対象にすることができます。
■Technology on Information
MT > CustomFieldsSearch
こちらで配布されている「CustomFieldsSearch」を使用します。
簡単に説明しますと、
1.ダウンロードしたデータをプラグインフォルダにアップします。
管理画面を開いている場合は再ログイン。
2.MT管理画面から「デザイン」>「ウィジット」から「検索」テンプレートを開きます。(MT4.2)
3.デフォルトでは1つ目の<mt:else>の下、<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />がある場所に、
2009/1/23
思いっきり間違えてました・・
正しくは4行目あたり、<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">の下に、
<input type="hidden" name="CustomFieldsSearch" value="1" />
<input type="hidden" name="CustomFieldsSearchClassType" value="entry" />
<input type="hidden" name="CustomFieldsSearchField" value="カスタムフィールド名" />
この 4  3行を追加します。(2014/1/29修正)
「カスタムフィールド名」の部分は検索対象にしたいカスタムフィールドの
テンプレートタグを入れてください。
(例)<input type="hidden" name="CustomFieldsSearchField" value="sample1" />
複数を指定したい場合は、その分だけ行を増やします。
(例)<input type="hidden" name="CustomFieldsSearchField" value="sample1" />
<input type="hidden" name="CustomFieldsSearchField" value="sample2" />
<input type="hidden" name="CustomFieldsSearchField" value="sample3" />
これで、記入したカスタムフィールドが検索対象になります。
(2014/1/29追記)
注意事項として、このプラグインはMT自体の検索条件とは併用できないようです。
少なくとも、検索対象のカテゴリーを指定するタグ
<input type="hidden" name="category" value="カテゴリー名" />
との併用はできませんでした。
MTは検索関係の機能がいまいちですが、これから良くなってくれると嬉しいですね。
MTでのブログ内検索についてです。
ブログの検索フォームからキーワード検索を行った場合、検索の対象となるのは
・タイトル
・本文
・続き
・キーワード
の4つです。
書き出されたテキストが検索対象になるわけではありません。
検索対象を新しく増やしたい場合、下記のサイト様で配布されているプラグインを使用することで、カスタムフィールドを検索対象にすることができます。
■Technology on Information
MT > CustomFieldsSearch
こちらで配布されている「CustomFieldsSearch」を使用します。
簡単に説明しますと、
1.ダウンロードしたデータをプラグインフォルダにアップします。
管理画面を開いている場合は再ログイン。
2.MT管理画面から「デザイン」>「ウィジット」から「検索」テンプレートを開きます。(MT4.2)
3.
思いっきり間違えてました・・
正しくは4行目あたり、<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">の下に、
<input type="hidden" name="CustomFieldsSearch" value="1" />
<input type="hidden" name="CustomFieldsSearchClassType" value="entry" />
<input type="hidden" name="CustomFieldsSearchField" value="カスタムフィールド名" />
この
「カスタムフィールド名」の部分は検索対象にしたいカスタムフィールドの
テンプレートタグを入れてください。
(例)<input type="hidden" name="CustomFieldsSearchField" value="sample1" />
複数を指定したい場合は、その分だけ行を増やします。
(例)<input type="hidden" name="CustomFieldsSearchField" value="sample1" />
<input type="hidden" name="CustomFieldsSearchField" value="sample2" />
<input type="hidden" name="CustomFieldsSearchField" value="sample3" />
これで、記入したカスタムフィールドが検索対象になります。
(2014/1/29追記)
注意事項として、このプラグインはMT自体の検索条件とは併用できないようです。
少なくとも、検索対象のカテゴリーを指定するタグ
<input type="hidden" name="category" value="カテゴリー名" />
との併用はできませんでした。
MTは検索関係の機能がいまいちですが、これから良くなってくれると嬉しいですね。
2009.01.15
カスタムフィールドには、サイトレベルの物とシステムレベルの物の2種類があります。
【サイトレベル】
・個々のブログごとに作成したカスタムフィールド。他のブログでは使用できない。
・「ブログの複製」を行うときに、" target="_self">カスタムフィールドが複製されない問題が起こる。
【システムレベル】
・システムメニューから作成したカスタムフィールド。すべてのブログで使用できる。
・フィールドの種類に「アイテム」「オーディオ」「ビデオ」「画像」を選択することができない。
・システムレベルで作成したものはすべてのブログ管理画面で表示されるので、あまり数が多くなると邪魔になってしまう。
・「ブログの複製」を行うときに、" target="_self">カスタムフィールドが複製されない問題を回避できる。
【サイトレベル】
・個々のブログごとに作成したカスタムフィールド。他のブログでは使用できない。
・「ブログの複製」を行うときに、" target="_self">カスタムフィールドが複製されない問題が起こる。
【システムレベル】
・システムメニューから作成したカスタムフィールド。すべてのブログで使用できる。
・フィールドの種類に「アイテム」「オーディオ」「ビデオ」「画像」を選択することができない。
・システムレベルで作成したものはすべてのブログ管理画面で表示されるので、あまり数が多くなると邪魔になってしまう。
・「ブログの複製」を行うときに、" target="_self">カスタムフィールドが複製されない問題を回避できる。