HOME » css , design , html , MovableType , tutorials » コメント欄の幅を変える・日付表示を自由に変える
コメント欄の幅を変える・日付表示を自由に変える
えーっと、こちらの記事のコメントでfoofooさんからご質問があったので、調子こいてエントリ上げしちゃいます。
コメント欄の幅を変える
コメント入力部分の幅を広げたいんだけど、colsを弄っても変わってくれない・・・。 弄るところが違うのかなぁ。 そうそう、ボタンをフラットにするのはスタイルシートどうやって指定すればよいのでしょうか・・・？
私もこれはさんざん悩みました。
colsの数値を変えればコメント欄の幅も変わるはずなのに、なぜか全然変化しないんですよねぇ。
試行錯誤して出した解決法がこれです。
方法論としてはもしかしたら正しくないのかもしれませんが、とりあえずは解決します。
以下、このサイトでの設定をコピったものです。
自分のサイトでお使いの際は適宜設定を変更してください。
まず下のように各要素にclass属性を付け加えます。
めんどくさかったらそのままコピっちゃって大丈夫です。
<div id="name_email"> <p><label for="author">名前:（必須）</label><br /> <input tabindex="1" id="author" name="author" class="comments-input【任意の名前】"/></p> …（中略）… <p><label for="text">コメント:</label> <MTIfAllowCommentHTML> </MTIfAllowCommentHTML><br/> <textarea tabindex="4" id="text" name="text" rows="10" class="comments-textarea【任意の名前】" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea> </p>
次にcssで各属性の幅を設定します。
/* コメントテキストエリアの幅指定 */
.comments-textarea {
width:450px;
}
/* コメントインプットエリアの幅指定 */
.comments-input {
width:300px;
}
幅はお好み通りにしちゃってくださいな。これで狭いコメント記入欄ともおさらば。
あ、余談ですが高さは「rows=”10″」←この数値を変更すれば変えられますよ。
もう一つご質問の「inputボタンをフラットにする方法」ですが、これもcssに一筆加えるだけでOKです。
うちの場合はこんな設定にしています。
/* ボタン・テキストエリア設定*/
input,textarea{
font-family: "Osaka",Verdana, Arial,"ＭＳ Ｐゴシック",sans-serif;
font-size: 12px;
padding-top: 1px;
color:#3C3A36;
border: 1px solid #9A9A9A;
}
色や枠の太さなどはお好みで。
変更が終わり次第、再構築をかければ設定が反映されます。
最後に自分用の覚え書きを。
日付表示を自由に変える
今まで日付表示を「200X年XX月XX日」って形にしていたんですけど、「200X-XX-XX」と言うパターンに変更したかったんですよね。
MTの日付表示を英語に変更すると並び順まで変わってしまうので、どうたもんだろう？と思っていたら、ちゃんと対策がありました。
「ARTIFACT-人工事実-」さん：MovableTypeの日付表記を変更する
本当はいい方法ではないらしいのですが、元記事で最初に紹介されていたソースファイルを書き換える方法で対処しました。参考にさせて頂きありがとうございます。
以下当サイト用の設定です。
MT3.15の場合、lib/mt/util.pm 1068～1071行目を変更します。
"%Y年%m月%d日 %H:%M", "%Y年%m月%d日", "%H:%M", "%Y年%m月",
「年」は「年」と言う漢字を表す文字コードなので、ここを変更すると好きな日付表示に変更できます。
例えば「200X-XX-XX」という表示形式に変更したい場合は、下の記述に変更します。
"%Y-%m-%d %H:%M", "%Y-%m-%d", "%H:%M", "%Y年%m月", ←ここだけ従来通り。こんな事もできて素敵すぎ！
終わったら再構築をかけて終了です。
ちなみにこの変更方法は、日付表示が「日本語」設定になっている時のみ可能な方法です。
もう一つはtemplateファイルの日付表記を 「<$MTDate format=”%Y/%M/%d”$>」に変更するというものだそうですが、これだと変えなくちゃ行けない箇所が多すぎてだるいので、謹んで却下させて頂きました（汗）。
そうそう、TOPと個別記事がスクロールするのはどうなの？ 記事の回転が速いのにTOPに数記事しかリストが上がってないのはどうなの？というご指摘を受けたので、できる限りマウスを使わなくても大丈夫で、過去記事リストにも行きやすいデザインに変えてみたんですけどいかがでしょうか？
極力形を変えたくなかったので、今のようなスタイルにしてみたのですが…。
Related Posts
- Tags : css , design , html , MovableType , tutorials | TrackBack URL
- Prev : 裏ワザ・やわらかチョコ | Next : オサレなメニューバーを作ろう
Comments & Trackbacks : 12
ホントだぁ。広くなってる。これ、いいですね、早速真似しちゃお。
C= C= C= C= ┌(;･_･)┘トコトコ
コメントテキストエリアの横幅を広げちゃおう
今日の覚え書き さま 「コメント欄の幅を変える・日付表示を自由に変える」 を参考…
お、お詳しいのですね♪
あたしにもご伝授くださいませ（笑）
というのも、ココログはTypePadでありながら、
カスタムの参考になるページが少なく、
MTのを参考に、ちょこっといじっている程度で、
どうも、把握しきれてないんですよね。。
というわけで、移転もしちゃいました★
上の部分に、ＭＥＮＵを作るデザイン、憧れだったんだけどなぁ…
私も、真似をさせて貰おうと♪
まだツリー化も出来ていないのに、
次から次へとやりたいことが出て来てしまう(笑)
＞さえらさま
ああ、さえらさんも知らなかったんですかぁ。
小粋な皆さんはみんな知っているとばかり思ってたんですけど、他にも知らない人がいたので、紹介して正解だったかもですね。
＞ナナさま
「お詳しい」だなんてそんな(;´Д`A “` 照れるからやめーい。
私なんて他の人から見ればまだまだっすよ、本当に。
上にメニューを作る方法、結構簡単ですよ？
MTと同じなら説明できるんですけど、ココログってどんな感じなんだろ？
＞真希さま
工エエェェ(´д｀)ェェエエ工
真希さんも知らなかったんだ？
ああ、意外すぎ。
カスタマイズのプロさん達が続々と…。
foofooです。
わざわざエントリにしていただいて感激です。
本当にありがとうございます。
いろいろ弄っていくうちに、他の方法も見つけてしまいました。
TBしておきま～す。
タイトルのトリミングも、サクっといきましたよん。
でわでわ♪
知らないことだらけよ～。若者についてくのに必死。。。
だって脳みそが退化しはじめてるんだよ？ヾ(@°▽°@)ノ あははぁ
＞foofooさま
お役に立てたようで良かったです（´∀｀）
さっき確認した所、うちのcssにはcomment-bodyのテキストエリアのwidth指定ってもともとなかったみたいですわ。
あの方法でも要はやってる事は同じなのでいいんじゃないですかね。
方法は一つとは限りませんし。
URLなんかの幅調整はさえらさんの所みたいにひとつひとつサイズを変えたい場合は直で書き込んでしまった方が面倒でなくていいかもしれませんなぁ。
＞さえらさま
脳みそが退化？
私の脳みそなんか大分昔から(ry。
もそさん、こんにちは。
コメントありがとうございました?。
やっているうちに何が何だかわからなくなったりしてますが、
こちらのサイトもまた参考にさせてくださいね。
私の方でもリンクさせていただきます！では♪
■roverさま
わざわざコメントありがとうございます。
いや、私の知らない所で褒めて頂いてたのでうれしかったのですよ(ﾉ´∀｀*)
やっているうちに何が何だか分からなくなるのは、みんな良くある事なので、安心して大丈夫です！
初めまして！
（ΦωΦ）部長のmifaです。先ほどはｺﾒﾝﾄありがとうございました。
見に来てびっくりです。あまりの綺麗さに。。。
これからいろいろと参考にさせていただくと思います。
いゃ、させてくださぃ！
自分ﾄｺの行き当たりばったりな作りのblogが恥ずかしいわぁ(〃゜д゜;A
これからヨロシクお願いします(’-'*)
■mifaさま
いえいえ、こちらこそリンク張って頂いてありがとうございました
デザイン褒めてもらっちゃってうれしいですねぇ♪
でも何も出ませんから（￣ー￣）ﾆﾔﾘｯ
大した物じゃございませんから…。
どぞどぞこれからも仲良くしてやって下さいませ。