忍者ブログ
TMP*blog
  • « 10月 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  »
October 20'2017
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

August 30'2006
基本的に、ブログテンプレートはそれぞれ作り方が違うので…自分のとこで作ったものへの対応として書いてます。(全部に対応するのはわたくしには無理デスorz)
他作者さまの作られたテンプレートでは同様の表示に出来ない場合もありますので、その点はあらかじめご了承下さい。(全称セレクタがあればほぼ平気だと思うのですが)

ブログサイドバーに忍者式メールフォームを設置する時、気になるのが項目名です。

[名前] コレ。
カッコがつくんですよね…。
(現在は管理画面の設定で[]が外せるようになりました~
とことんデザインするため、この[ ]もなんとかしようと思ったのでございますが…結局出た結論は「このままじゃむりかも」でした…orz

で、苦肉の策「そうだ項目名を画像にしてしまえ」編です。
今サイドバーに設置してあるメールフォームが各項目名を全て画像にしたものです。
ちょっとスッキリ?

通常用
    
入力必須項目用
    

上のが使用してる画像です。
「通常用」と「入力必須項目用」に記号をつけた2種類を用意しました。とりあえず普通のHPやブログで使うと思われる基本項目のみですが、画像さえ作れば全ての項目名を変更できます。

ブログサイドバー設置を前提に説明します。
まずこの記事の通りにメールフォームの設置を終わらせます。この記事の内容を事前に済ませておかないとスタイルシートは反映されません。
次に各項目の画像を用意してブログスペースにアップロードしてください。
(画像は上のものをダウンロードして使用して下さって構いません)

で、以下のスタイルシートを一旦メモ帳などにコピーします。

/*--メールフォーム項目名を画像にする--*/
/*名前*/
div#sidemail div.name_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_name.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*メール*/
div#sidemail div.mail_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_mail.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*URL*/
div#sidemail div.url_right{
padding-top:9px;
background-image: url('http://file.xxxxxxxx.blog.shinobi.jp/simple_url.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*本文*/
div#sidemail div.textarea_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_messe.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*件名*/
div#sidemail div.title_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_title.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*各項目文字表示を隠す*/
div#sidemail div.name_left,div#sidemail div.mail_left,div#sidemail div.url_left,div#sidemail div.title_left,div#sidemail div.textarea_left{
display:none;
}

赤文字の部分が項目ごとに表示される画像のアドレスなので、ここをそれぞれ使用したい画像のアドレスに書きかえて下さい。(ブログスペースやHPスペースにアップロードした画像アドレス)

入力必須項目に指定した部分につく「必須マーク」も表示できなくしてあるので、入力必須項目は使用する画像を変更してアピールを(・ω・
(なので画像が2種類あると…)

あとは修正がおわったスタイルシートをブログテンプレートのスタイルシートに追加するだけです。
この記事の内容を事前にすませておいてくださいね~。
こっちをやり忘れると変更できません。

*このスタイルシートで表示の変更ができるのは
「名前」「メールアドレス」「URL」「件名」「本文(大)」のみです。
他項目については通常の[ ]つきの表示になります。
上記以外の項目も画像にしたい場合はスタイルシートの追加が必要です。

*画像を他のものにすると大きさによっては画像の下が隠れてしまったりしますので、その場合は各項目の「padding-top:9px;」の数字を適当に増やして下さい。

*見えてないだけで文字の項目自体がなくなった訳ではないので、届くメールには各項目につけた名称がそのまま使われます。

これをやるのにIEのバグが結構面倒でして…
サイドバーの折りたたみをした中にメールフォームを入れるとテキストエリア(本文)の項目名が見えなくなる場合があります。(他項目は見えます)
その場合は折りたたんでない部分にメールフォームを設置するか…テンプレートのスタイルシートに修正を加えるか…になります(汗)


と、いうか…
わたくしすっかり「送信」ボタンの名称変えれる気で今まで説明してたんですが
かえれないわー!!!(笑)はずかし…orz

拍手

PR
Post your Comment
・メールアドレスは入力しても管理画面でしか表示されないようにしてあります。
・テンプレートのカスタマイズはなるべく自力でお願いします。
・テンプレートに関するお問い合わせの際はブログアドレスの記入をお願いします。
・アダルトな内容、英語のみの内容のコメント、トラックバックはできません。
・不適切な書き込みは管理人の独断で削除させて頂きます。あらかじめご了承ください。
Name:
Title:
Mail:
URL:
Color:
Comment:
pass: emoji:Vodafone絵文字 i-mode絵文字 Ezweb絵文字
はじめまして
はじめまして。こんばんは。

私も忍者メールフォームのカスタマイズにも手を付けたのですが、結局放置プレイ中だったりします^^

画像で置き換えるのはいい感じですね。ナイスアイディアです。

ブログパーツとしてのメールフォームとして考えた場合、やはりブログ全体のデザインとの親和性がなによりですからね。
suna77777: URL 2006.09/04(Mon) 22:41 Edit
Re:はじめまして
はじめましてー<(_ _)>

忍者式メールフォームは色々と厄介な部分とすばらしい部分が混在してて楽しいですね
いじりがいがあります(笑)
主にデザイン面で引っかかる部分が多いのですが…orz

[ ]がどうしても…なんですよね(笑)
画像にしたのはほんと苦肉の策でした。これだとカスタマイズ向きではないのでそこのところももう少しなんとかしたいのですけども。
ブログとの統一感の近道はブログテンプレートに忍者メールのスタイルシートも最初から入れる事なんですが、なかなか難しいようです…orz
スタイルシートのクラスやID名がもうちょっと特殊になってたら楽だったんですけども('-';
管理人:ころ ・2006/09/05(Tue)
trackback
・言及リンクを含まないトラックバック、記事内容が英語のみのトラックバックはできません。
この記事のトラックバックURL:
[61] [60] [59] [56] [55] [53] [52] [51] [49] [50] [48
«  BackHOME : Next »

About this site
  • 「忍者ブログ」と「忍者式メールフォーム」のテンプレートを作成配布しています。
search this site
Web clap!
拍手する

カスタマイズに関する質問を拍手で送信するのはどうかご遠慮ください。

PR

» Link Menu

» Other Menu

RSS
あわせて読みたい
Recommend


line

相変わらず常備するお気に入りの「牛とろフレーク」最近また入手困難で、確保に必死です^-^;


TMP*blog@koro wrote all articles.
TemplateDesign by TMP photo by たいしたことないもの

忍者ブログ[PR]