忍者ブログ
TMP*blog
  • « 07月 
  • 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
  •  »
July 27'2017
×

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

August 30'2006
またまた忍者式メールフォームです。本日はサイドバー設置編。
これはテンプレートとは呼べませんが…カテゴリーがないのでテンプレートカテゴリーです。
(非常にいいかげんです)

サイドバーに設置するなら「プレーンスキン」でも十分ですが、ブログテンプレートのサイドバーの幅によってはうまく収まらないので、ここでまたデザイン「自作CSSを使用する」でいってみマス。
(いやぁ…ウチのブログテンプレも幅あわなくて…orz)
サイドバーのプラグイン>フリーエリアを作って設置することを想定しています。

まずは恒例の…CSS追加でございます。コピーでOKでございます。
ブログテンプレートのスタイルシートに以下のスタイルシートを丸ごと追加してください。

/*--サイドバーメールフォーム用--*/

/*--メールフォームを囲む箱--*/
div#sidemail{
margin:0;
padding:0;
font-size:10px;
line-height: 120%;
}
/*--既存mainクラス設定修正用--*/
div#sidemail div.main{
margin:0;
padding:0;
font-weight: normal;
border: none;
font-size:10px;
line-height: 120%;
width:90%;
background-color: transparent;
background-image: none;
}
/*--各行の間のbr間隔を指定--*/
div#sidemail div.main br{
line-height: 1px;
}
/*--テキストエリア--*/
div#sidemail div.main textarea {
margin :1px 0;
background: #fff;
border : 1px solid #666;
font-size: 13px;
line-height: 130%;
color: #666;
width: 90%;
height:70px;
}
/*--一行テキストエリア--*/
div#sidemail div.main input {
margin :1px 0;
background: #fff;
border : 1px solid #666;
font-size: 13px;
color: #666;
width: 90%;
}
/*--送信ボタン--*/
div#sidemail div.main input.submit_button {
color: #fff;
margin : 0;
background: #666;
font-weight : bold;
font-size: 10px;
border : 1px solid #666;
width: 50px; /*送信ボタンの文字数が多い場合はこの数字も増やして下さい*/
line-height: 100%;
}

基本的な文字の色(項目名、メールフォームタイトルナド)は使用しているブログ用テンプレートのサイドバーに使われている文字色になります。
指定したい場合は「div#sidemail」にcolor指定を付けてください。



次に「プラグイン」の「フリーエリア」に忍者式メールフォームのタグを書きます。
この時に以下のようにしてください。
(下のタグをコピーして赤字の部分をメールフォームタグに変更でOKです)

<div id="sidemail">
ここにメールフォームのタグをコピー&ペースト
(この文章は削除してくださいね~)

<noscript>javascriptをオンにしてご利用下さい</noscript>
</div>

上のタグの指定場所に忍者式メールフォームで発行されるタグをコピーして書き込み、プラグインで追加した「フリーエリア」の「HTML編集」で丸ごとフリーエリアに放り込んで下さい(・ω・
借りるメールフォームのデザイン選択は「自作CSSを使用する」にしてくださいネ。


で、以上でおわりです(・ω・

あとはCSS部分を好きなように変更してみてくださいな。
色とかいっそ愉快なほどにシンプルですんで。(汗)
各部の色を変更する程度に留めておくのが一番いいかなってかんじです。
サイドバーのメールフォームがあんまりゴテゴテしてもね、と。

一応見本はウチのサイドバーのオープンメニュー2に放り込んであります。
これは実際ウチで使ってるので相変わらずテストはできませんけども…どんなかんじなのかの表示確認にでもどうぞ。
一見プレーンスキンなのですが、幅が可変になっておりサイドバーのサイズに適当~にあうようになっています。(適当にネ…)


応用編・サイドバーin忍者式メールフォーム2
余談:
スタイルシートの「既存mainクラス設定修正用」は保険です。
今まで書いてたコトの色々な部分への保険でゴザイマス。

これでも完全ではないので、必要があれば各自で調整お願いします<(_ _)>

拍手

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

勝手ながらTBと記事からのリンクをさせていただきました。
Pav: URL 2006.09/15(Fri) 12:40 Edit
Re:ありがとうございました♪(゚▽゚*)
おおお…レス遅れまして申し訳ないです<(_ _)>

何の飾りっ気もないCSSですが、どうぞ使ってやってくださいませ~
そ、それと実は…トラックバックが設定ミスってて受け付けない設定になっておりまして…orz
す、すいません…はじいてしまったようです…ごめんなさいー!
設定変更しておきましたので宜しいようでしたらまた送ってやってください
管理人:ころ ・2006/09/27(Wed)
trackback
・言及リンクを含まないトラックバック、記事内容が英語のみのトラックバックはできません。
この記事のトラックバックURL:
[59] [56] [55] [53] [52] [51] [49] [50] [48] [47] [46
«  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]