はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログカスタマイズ ~コメント送信ボタンをデフォルトに戻す~

2008/02/10 Sun [Edit]

ブログで配布中のテンプレートh007-3middle」をカスタマイズ中の方から下記のご質問を頂きました。

標準のボタンデザインに戻すには、CSSを直す必要があると思うのですが、~略~ どのように訂正したらいいでしょうか?

今回のボタンとはコメントフォームの送信ボタンを指しています。配布中のテンプレートではこのボタンに画像を使用しているのですが、それを削除しブラウザ固有のデフォルトのボタンに戻すのが今回のカスタマイズのお題目となります。

興味のある方は続きをどうぞ。
※カスタマイズする前にテンプレートをバックアップ(複製)をしておくと安心です。
※今回のカスタマイズは当ブログで配布中のテンプレートが対象です。

今回のカスタマイズでは HTMLCSS の編集が必要となります。

まず、FC2 ブログの管理画面の HTML の編集から全ての HTML ソースをコピーしエディタにペーストします。

そのソースの 145 行目付近にある input 要素の type 属性に image の値を持つ submit ボタン(送信ボタン)を見つけます。

見つかりましたら下記サンプルソースを参考に置換してください。

<!-- 置換前のソース-->
<input type="image" src="http://blog-imgs-17.fc2.com/h/a/j/hajimedesign/007_submit_btn.gif" width="90" height="22" alt="Submit" />

<!-- 置換後のソース▼▼▼-->
<input type="submit" value="Submit" />

上の置換後のソースの赤い部分、value 属性の値の Submit はボタンに表示させておくテキストになりますので、適宜で変更してください。

次に、コメント編集エリアの submit ボタンと delete ボタン(削除ボタン)を見つけます。

176 行目付近にその2つが見つかると思います。先ほどの input 要素と同様、type 属性に image の値を持っています。

見つかりましたら下記サンプルソースを参考に2つの input 要素を置換してください。

<!-- 置換前のソース-->
<input type="image" src="http://blog-imgs-17.fc2.com/h/a/j/hajimedesign/007_delete_btn.gif" width="90" height="22" name="edit[delete]" value="Delete" id="btn_r2" /><input type="image" src="http://blog-imgs-17.fc2.com/h/a/j/hajimedesign/007_submit_btn.gif" width="90" height="22" alt="Submit" />

<!-- 置換後のソース▼▼▼-->
<input type="submit" name="edit[delete]" value="Delete" id="btn_r2" /><input type="submit" value="Submit" />

ご注意として、横に長いソースですが途中で改行を入れるとブラウザによってはコントロール出来ない余白が発生する可能性がありますので、そのまま2つの input 要素のソースを並列させたままが無難です。

HTML の編集は以上なので、エディタから全てのソースをコピーし FC2 の HTML 編集画面にペーストし「更新」してください。

次に CSS の編集に入ります。FC2 のスタイルシート編集画面から全てのソースをコピーしエディタにペーストしてください。

ペーストしたソースの 516 行目付近にある「table#form_h td input」セレクタを見つけます。

実は今回ご質問を頂いた方はご自身で大変試行錯誤されていました。おそらくですが、このセレクタが何を意味するものかご理解していれば自力で今回のカスタマイズを成功させていたと思います。

なので、少しだけこのセレクタに関して説明をさせて頂きたいと思います。

このセレクタ「table#form_h td input」のようなセレクタを子孫セレクタと呼びます。

どのようなセレクタかと言うと id 属性の値が form_h の table 要素の中にある td 要素の中の input 要素全てに対して指定する為のセレクタとなっています。

このように半角スペースで区切りセレクタを並べて行くことで要素を限定しています。

今回、私がとても勉強になったのは、このセレクタを使い、input 要素全てに対し指定した後、送信ボタンとなる input 要素から不必要な指定だけをリセットすると言う「足してから引く指定」は分り辛いと言うことです。

私だけが触るソースコードではない場合は、簡潔さよりも分りやすさを優先した方が良い場合もあることを知れました。是非、今後の制作に役立てて行きたいと思った次第です。

話を今回のカスタマイズに戻しますと、table#form_h td input セレクタから全てのプロパティを切り取ってください。 Windows をお使いの方は「コントロールキー+X」で Mac をお使いの方は「コマンドキー+X」で切り取ってください。

table#form_h td input {
	color : #666;
	font-size : 93%;
	background-color : #fff;
	border : solid 1px #ccc;
	padding : 0.1em 0.2em;
}

切り取り(カット)が済みましたら、プロパティが空となった上のセレクタは削除してください。

続いて、削除したセレクタの直下にある input.forms_h セレクタを見つけます。

見つかりましたらそのセレクタの中に先ほど切り取ったプロパティを貼り付け(ペースト)ます。下が貼り付けた後のサンプルソースです。ソースを見やすいように改行を加えつつペーストしましょう。

input.forms_h {
	width : 345px;
	color : #666;
	font-size : 93%;
	background-color : #fff;
	border : solid 1px #ccc;
	padding : 0.1em 0.2em;
}

次に、今ペーストしたプロパティから color プロパティを除いた font-size プロパティから下のプロパティをコピーします。

続いて、プロパティをコピーしたセレクタの直下にある table#form_h input.form_h_tit セレクタを見つけます。

見つかりましたらそのセレクタの中に先ほどコピーしたプロパティをペーストします。下が貼り付けた後のサンプルソースです。

/*コメントタイトル入力ボックス*/
table#form_h input.form_h_tit {
	color : #ff89d8; /*ピンク*/
	width : 345px;
	font-size : 93%;
	background-color : #fff;
	border : solid 1px #ccc;
	padding : 0.1em 0.2em;
}

次に、548 行目付近にある input.pass_h セレクタを見つけます。

見つかりましたらそのセレクタの中に先ほどコピーしたプロパティをペーストし、更に color : #666; を追加します。ペースト先となるセレクタの上のセレクタの中から color プロパティだけをコピペが楽な方法です。下が貼り付けた後のサンプルソースです。ソースを見やすいように改行を加えつつペーストしましょう。

input.pass_h {
	width : 100px;
	color : #666;
	font-size : 93%;
	background-color : #fff;
	border : solid 1px #ccc;
	padding : 0.1em 0.2em;
}

最後に、560 行目付近にある table#form_h td.btn_h input セレクタを見つけます。

見つかりましたらそのセレクタの中から background プロパティと border プロパティの2つを削除します。下が削除後のサンプルソースです。

//* ***外部 CSS(hack007.css)にハック有り****** */
table#form_h td.btn_h input {
	padding : 0;
	margin-right : 0;
}

お疲れ様でした。
スタイルシートへの編集は以上なので FC2 スタイルシート編集画面にソースを全てコピペし「更新」するとデフォルトのボタンが表示されると思います。

今回の CSS の編集方法は説明を簡略する為の一例です。なので CSS の知識がある方は重複指定されている部分をまとめて指定されるとソースをもう少し短くできると思います。

Prev
コメントの本文に CSS の指定が反映されない
Top
はじめてのブログデザイン
Next
display:block した a 要素(リンク)を IE6 でも安定させる方法

Comments

承認待ちコメント

このコメントは管理者の承認待ちです

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。