FC2ブログのテンプレート工房

公式プラグイン「メールフォーム」は、そのHTML内で入力欄の幅が90%と設定されています。
しかし公式プラグイン「検索フォーム」の入力欄等は幅が設定されていません。

これら入力欄の幅が設定されていない公式、共有プラグインを実装したときに、IEでは収まっているのにFirefoxでは枠から飛び出している等、ブラウザにより違う幅が表示されてしまいます。

この問題を解決するためには、プラグインを囲っているクラスのinput,textareaに対して、スタイルシートで幅を設定します。

当サイト配布のテンプレートであれば、以下をスタイルシートの末尾に加えてください。

【standardシリーズの場合】

.left_outline input[type="text"],
.right_outline input[type="text"],
.left_outline textarea,
.right_outline textarea {
width: 90%;
}

【lightframeシリーズの場合】

.plugin1_body input[type="text"],
.plugin2_body input[type="text"],
.plugin1_body textarea,
.plugin2_body textarea {
width: 90%;
}

幅の数値はお好みに合わせて設定してください。

ただしIE6以下は属性セレクタに対応していないため、上記スタイルシートが効きませんのでご了承ください。

【2009/09/06 追記】

この記事の修正はlightframeシリーズのver.05以降、standardシリーズのver.10以降には実装済みです。各バージョン情報はHTMLかCSSの最下部に記されています。

関連記事

• FC2バトンのデザイン (2009/09/01)
• プラグイン説明の入力有無を判定して、表示/非表示を振り分けるフラグ (2009/08/31)
• 便利ナビ「月別アーカイブ」のページ送りリンク (2009/08/29)
• プラグイン内にある入力欄の幅を設定する (2009/08/29)
• コメント入力欄の幅設定 (2009/08/28)
• 親子カテゴリ対応サイトマップのリンクタイトル (2009/08/28)
• linkタグ relの設定 (2009/08/26)