人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

コメント入力枠幅を本文幅まで拡げる /エキサイトブログ

2014年 04月 11日
コメント入力枠のアレンジをしていて、IE11の「要素の検査」というツールが大変有効なことに気付きました。 以前から何度か試してはいたのですが、このツールの使い方が少し判ってきたところです。 同時に、CSS記述の「セレクタ」の扱いをネットからヒントを得ることが出来、今まで思う様にコントロールできなかった部分にも修飾が可能になりました。(それでも、あくまでExciteのブログシステム枠内での不自由が付きまといますが)
とにかく、この進展があり、本文幅に応じて自動的に幅が拡がるコメント枠が可能となりました。 既に当Studioのコメント書込み欄はそのアレンジが適応されているので、確認してみてください。

+

以下の指定で、投稿本文やコメント文と同様に、コメント入力枠が拡縮する様になります。 
前ページの方法では入力枠幅が固定値にならざるを得ませんが、こちらはユーザー各自のウインドウ幅に応じて拡大縮小します。(ブログ所有者がブログデザインのメニューで指定した本文幅が最小幅になります)

もし前ページの「TEXTAREA.TXTFLD」の項目を追加されている場合は削除した上で、下の項目と置き換える点に注意してください。 
始めてCSSに手を加える人は、CSSの最後に以下をコピペして追加すれば良いでしょう。 もし、結果が満足でなければ、追加した行を確認しておいて、再びその部分を削除すれば元に戻ります。 その範囲の編集ではブログ自体のデータが潰れることはありませんが、もちろん自己責任下の作業です。

CSS 追加記述 (7項目)


DIV.COMMENT_INPUT TABLE { 
width: 100% !important; }

DIV.COMMENT_INPUT TD {
padding-top: 0px !important;
width: 3em !important; }


INPUT[NAME="name"] {
font-size: 1em;
font-family: inherit !important;
width: 18em !important; }

INPUT[NAME="homepage"] {
font-size: 1em;
font-family: inherit !important;
width: 30em !important; }

TEXTAREA[NAME="comment"] {
font-size: 1em;
font-family: inherit !important;
line-height: 150%;
height: 5em;
padding-left: 10px;

width: 98% !important;
overflow-x: hidden;
overflow-y: auto;
background-color: #FFF;
border: 1px #666 solid; }


INPUT[NAME="passwd"] {
margin-top: 6px;
font-size: 1em;
font-family: inherit !important;
width: 13em !important; }

INPUT[TYPE="SUBMIT"][VALUE="送信"] {
font-size: 1em;
font-faimily: inherit !important;
width: 8em !important; }


以下が主要部分の説明です。

DIV.COMMENT_INPUT TABLE
コメント書込み欄全体を記述する「COMMENT_INPUT」の内に出てくる「TABLE」を指定して修飾する項。 このコメント書込み欄には他にTABLEがなく、その幅がデフォルトではシステム側のHTML上に「width="380"」と指定があるので、その内部の「TEXTAREA」の幅が制限される。 前ページの記述方法では.px値などの固定幅指定でしか、この制限を越える方法がなかった。 このTABLE幅を直接「100%」と上書きして、フリーにしています。

DIV.COMMENT_INPUT TD
上と同様に「COMMENT_INPUT」の内に出てくる「TD」を修飾する項。 TDはTABLE内にエクセルのセルの様に並ぶ枠ですが、コメント書込み欄の各項目はそれぞれ枠に入ってます。 この項の目的は、それに「3em」の幅を指定することです。
実はこの指定がないと、「名前:」「URL:」の右側の入力枠が不必要に離れてしまいます。「3em」は各TDの初期値を指定している様なもので、同様にTDに入っている「名前の入力枠」「URLの入力枠」などは後で幅を指定して拡げています。

INPUT[NAME="name"]
「名前の入力枠」の文字の大きさ、フォント指定、入力枠の幅(18em)を指定しています。入力文字数上限は15文字とシステムの制限があります。 やはりメイリオ仕様にしています。

INPUT[NAME="homepage"]
「ホームページURLの入力枠」の指定。 ここは、文字数にシステム制限が無い様です。 長くなるとスクロールして入力出来るので、適当に「30em」を指定しています。

TEXTAREA[NAME="comment"]
前ページの「TEXTAREA.TXTFLD」と結果的に同じ要素「コメント入力枠」をさしています。
comment」と命名された「TEXTAREA」(文字入力枠)を指定する記述の形に改めました。 ここはどちらも可能ですが、他の部分ではこの指定方法が必須になるところがあります。

前ページは「670px」と指定していたが、上に書いた様にtableの幅の制限をなくしたので、コメント書込み欄全体は一番外の「POST」(ブログ本文)の幅まで拡がり、その中の「コメント入力枠」も追随して拡がることが可能になります。 この「%」指定をしてやらないとシステム側に記述された「cols="60"」という固定値になってしまいます。「%」指定をすると外周囲の枠幅に同調します。「98%」という値は、入力枠の右側の収まりを考えた値です。 この設定がコメント欄の幅に合わせて拡縮する「コメント入力枠」の肝心な部分です。

なお、CSS内に「 DIV.COMMENT_INPUT 」項があるはずで、ここに「padding」が指定されていると、コメント書込み欄全体の内側の余裕ですから、それに応じて「コメント入力枠」も内側に寄ります。

INPUT[NAME="passwd"]
パスワードの入力枠の指定。 「名前:」「URL:」等と同じです。

INPUT[TYPE="SUBMIT"][VALUE="送信"]
「送信スイッチ」の少し幅を持たせた程度で、たいした意味はありません。 実はこの部分でスイッチの位置を上方にずらす修飾を試みたのですが、Google Chromeではスイッチがずいぶん左に寄り、「削除用パスワード」の入力枠と干渉するので、止めてしまいました。 結局、Chromeでは中央寄り、IEでは右端のスイッチ位置として、それ以上の対策はできずにいます。

+

以上、コメント入力欄全体のデザインするヒントになると思います。
IE11の「要素の検査」ツールは、直接CSSやHtmlを書換えながら、同時進行でその結果を見ることが出来ます。 登録して運営中のCSSを変更せずに、仮に変更した状態をテストできますから、使い慣れると大変に有効です。



by Ataron | 2014-04-11 01:49 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。