ヤプログのサイドバーにも「メールフォーム」機能がありますが、これは困ったことに「ヤプログユーザー同士」でないと送受信する事が出来ず、しかも「あしあと機能」をonにしないと使えません。

今回はブログを見た人が誰でもメールを送れる「メールフォーム」の設置です**
サンプルは私のブログに設置してあるメールフォームです♪
このメールフォームはレンタルサービス「NINJA TOOLS」のカスタマイズ自由なメールフォームを使用します。ユーザー登録は当然無料☆アクセス解析、ホームページレンタルでも有名ですね。個人的に大好きなサービスです。


■■メールフォームを準備する■■
�@「NINJA TOOLS」に登録されていない場合は、新規ユーザー登録をします。
※クリックすると登録ページに進みます。
個人情報はメールアドレス、職業（小学生、大学生、社会人など）、性別くらいですw

ここで重要なのは、メールフォームのメールを受信するメールアドレスで登録する事。
違うアドレスで既に登録済みの方は、管理情報の「情報を変更する」でアドレスを変更するか、希望のアドレスで再登録して下さい☆

�A登録が完了したら、ログインして「管理ページ」に移動します。
このページの右側にある「作成できるツール」から「忍者メールフォーム作成」を選択して下さい。

�Bツールの名前（適当でいいです）などを入れて作成。
完了すると管理ページに↓↓こんな項目が出来ます。この名前部分をクリック


�C既に「default」がありますが、新たに作成しましょう。ページ上の「新規作成」で、
メールフォームの名前を半角で「yaplog」にします。
※他の名前でもいいですが、今回の講座ではこの名前で説明していきます♪
すると、こんな項目↓↓が出来ますね


�D「yaplog」の「パーツ選択」をクリック。
スキンの選択を「自作CSSを使用する」にします。
※以下はメールフォーム作成後でもokです。
説明文はメールフォーム上に表示されます。
使用するパーツを「使う」「使わない」で選択。表示名は、実際にメールフォームに表示される項目名です。
必須事項にする時はチェックボックスにチェック
一番下の「その他の設定」は表示に関するものです。パーツ名に括弧をつけるにチェックを入れると、表示名が [Name]　のようにカッコが付きます。

当ブログに設置しているメールフォームは、パーツ選択を
[ name ]　[ mail ]　[ url ]　[ textarea ]にしています。nameとmailが必須事項、カッコの設定は外しています☆

�E選択が終わったら「上書き保存」で設定**
メールフォーム一覧に戻り、「使用する」で表示されたソースをコピーしてメモ帳などに保存しておいて下さい。

(・∀・)準備は以上です。続いてデザイン設定です♪

最近マイタグをほったらかしで、さすがにトン教授のお腹もすいてきた頃合だったので、ショッピングモールに買い物に･･･ww
いつも携帯Edyで余った分があれば、タグふれとかに使ってるσ(･_･)です。(ｵｲ
それで、全然知らなかったけれど↓↓

家を購入したら、な、な、なんと扉が開くのですよ！！
12月初めにはこの機能スタートしていたみたい!?(それより前か？
とにかく驚き。

あっ、ちなみにうちのあやトマちゃん、晴れ着にしてみましたｶﾜｲｰ

･･･家をクリックしてみると･･･

入れたよすごっっ。しかも家に合った床にちゃんとなってます。
･･･というわけで、いつもより多くアイテム購入。(タグふれサイドの思う壺ってやつ。
壁なんかも家用にあったのでつけてみましたwwいいねいいね☆.。.:*・゜
それと、福袋に入っていたおみくじで七福神もらいました。これもクリックしたところ･･･


ヽ(#-Д-)ﾉえ゛え゛っ
もらわなきゃよかったよ。しかもラッキーアイテムはやっぱりタグふれアイテムww
購入しろってことねww

実際、今年σ(･_･)が神社で本当にひいたおみくじは「末吉」でした。
願事→かなわず
待ち人→来ず
恋愛→成就せず
旅行→時を待て
･･･など、淡々と(∴｀┏ω┓´)/コラァー!!的な事満載です。
一番ましなもので、
病→信ずれば治る
･･･これだけでした。ヽ(*#｀ｴ´)ﾉ

皆さんがよく言うアイフレとは、
アイフレーム(IFRAME)というもので、ページの中に自由に組み込むことの出来る便利なフレームです。
どんな風に使用するかというと、掲示板など違うサイトのページを表示させたい部分に好きな幅や高さで表示させる･･･という感じです。
これをサイドバーに使用して、掲示板、オートリンクなど好きなページを表示させる事が出来ます

�@サイドバーのHTML欄に下記のタグを入れる
<IFRAME src="表示させたいページ" width="160" height="200" frameborder="0" scrolling="AUTO"></IFRAME>

ﾟ･*:.｡..｡.:*･ﾟ タグの解説ﾟ･*:.｡..｡.:*･ﾟ
src="表示させたいページ"
実際にサイドバーに表示させたいページのURLを「表示させたいページ」の中に挿入します。
掲示板、オートリンクなど好きなページのURLを調べ挿入して下さい。

width="160"
height="200"
幅と高さの指定です。
サイドバーが標準の175pxの方は大体「160px」を目安として下さい。
その他には「width="100%"」にすると、サイドバーの最大値になるので大変オススメです。
高さはあまり気にせず自由に設定して下さい**

frameborder="0"
枠線の有無です。ほとんどの場合は「0」がオススメです。

scrolling="AUTO"
スクロールバーの設定です。「AUTO」は自動なので、スクロールバーが必要な時はちゃんと表示されます。「NO」にすると表示されません

最近スタイルシートに新たな記述が追加されまして、サイドバーテーブルの記述とはまた別に「サイドバー広告(FeedMe広告)」も指定が必要になりました。

※こちらのオリジナルスキン第19弾以下はこの広告の記述がスタイルシートに含まれていません。

最近フリースキンを編集された方はスタイルシートに含まれているので問題ありませんが、それ以前の方は以下の記述を「スタイルシート」に追加して下さい**
※分りやすく一番下などに追加されることをおすすめします

ヤプログ機能として新たに登場した「メールフォーム」ですが、「お名前」「メール」などの項目の表記は日本語になっています。残念ながらこの表記をそのままでは変えることが出来ませんが、新たにタグを作って英語表記などのメールフォームを作成することが出来ます
また、ブログのデザインによってはメールフォームのデザインがサイドバーと同じにならない方にもこの方法はオススメです
但しこのタグは元々あるメールフォームがサイドバーに実際に存在していないと動かない仕組みとなっている為、まずは実際のメールフォームを見えないように隠します。

---------------- 追記　08/3/7 ----------------
メールフォームの構造が少し変わったようですので訂正
しておきます**
またデザインに関するCSSの指定も変わりましたので、
該当記事も訂正しておきます！！
---------------- 8×ｷﾘﾄﾘｾﾝ ----------------

■標準のメールフォームをブログから見えなくする方法
�@　現在お使いのスキンは2カラム、3カラムどちらですか？
2カラムの方⇒�Aへ
3カラムの方⇒�Bへ

�A　2カラムの方
右サイドバーの2カラムの場合は左サイドバー、
左サイドバーの2カラムの場合は右サイドバー
に、ヤプログ標準のメールフォームをサイドバーの「並び替え」で設置する。

�B　3カラムの方
┣A　まず左右どちらかに標準のメールフォームを置く
┗B　サイドバーの「新規追加」で2つ作成する
　　　┣●一つ目→HTML欄に　<noscript>　を入れる
　　　┗●2つ目→HTML欄に　</noscript>　を入れる
┣C　Aで置いたメールフォームの上に「1つ目」のサイトバーを設置。
　　　メールフォームの下には「2つ目」のサイドバーを設置する 。

これでまず標準のメールフォームは設置しても見えないようになります。(つまり機能のみブログに反映されている状態)

その2、その2追記、その3などでご紹介した折り畳みとは違いまして、今回は
開閉ボタン付き、初期の開閉状態設定可能なサイドバーの折り畳みです
今回の折り畳みスクリプトはfrom DFJ様の「折りたたみメニュー」を参考にさせて頂きました**
前回の折り畳みと同様、display:none の「none」を空白と交互に代入させる方式は見たところ同じようです**
これだと他の講座様でやっているスクリプトよりも短く簡潔なスクリプトになりますよね(人´∀｀)

この折り畳みスクリプトはIE4以上、NN6以上対応です
追記：07/12/22　ユーザーのさえり様からIEのバグでGIFアニメなどが止まってしまう件、ご連絡いただきました**
<A href="javascript:dd('fo1')">→×　止まる
<A href="" onclick="dd('fo1'); return false;">→○止まらない
なるほど！return false;でイベント自体無かったことにすれば、IEのバグは確かにおきません！本当にありがとうございました♪
記事は既に訂正済みです**

�@　開閉用のボタンを容易します。
※画像を使用したくない場合はスクリプトも変わってきます。その場合はfrom DFJ様のページを直接参考にして下さい**
このブログでも折り畳み用画像用意しています。こちらからドウゾ**
用意した画像はヤプログ、またはお持ちのサーバーにupします。upした画像は右クリックの「プロパティ」で画像のURLをそれぞれ調べてください**

例)今後の説明はこちらの、画像を使うことにします

�A　折り畳み用スクリプトを編集します

スクリプトはこちらのページからドウゾ(*´∇｀*)

.。o○o。.★.。o○o。.☆.。o○o。.★.。o○o。.☆
追記：08/3/7
ヤプログのメールフォームの構造とCSSが少し変更されました。
訂正済みです☆
.。o○o。.★.。o○o。.☆.。o○o。.★.。o○o。.☆

プログサイドバーに標準でついている「メールフォーム」は、ヤプログユーザー間でのみ送受信が出来るメールフォームです。
以前は他ユーザーの方にも送れたのに少し不便になってしまいましたね(*||´д`)
でもコメントを表示させたくない方などには、このメールフォームは便利かもしれません。

フリースキンの方はこのメールフォームを設置すると、CSSが適用されていないのでイマイチなデザインになることでしょう。
※ヤプログ配布スキンの場合は、デザインに合ったcssが既に適用されているみたいです

ということで、簡単にデザインの変更方法ご説明します♪

�@スタイルシートの一番下辺りに以下記述を追加する
.side_mail
{
COLOR: #333;
}

.side_mail textarea, .side_mail input
{
BACKGROUND-COLOR: #fff;
FONT-SIZE: 11px;
COLOR: #000;
BORDER: #f99 1px solid;
}

※スタイルシートの編集が出来ないスキンの場合は、サイドバー新規作成のHTML欄に
<STYLE type="text/css">
<!--
この中に記述を入れる
-->
</STYLE>

このようにして、並び替えでどこでもいいので配置します。

前回「コメント、リンクなどの一覧にアイコンを付ける」というタイトルで、リストの前にアイコンを付ける方法をご紹介しました。この方法だと、リスト以外にもサイドバーにはこのアイコンが付き統一されます。

今回ご紹介するのは「カテゴリーアーカイブ」「リンク集」のリスト項目にそれぞれに好きなヤプログアイコンを付けるといういたって簡単な方法です。
ここで注意して頂きたいのは、前回の記事のように全てに同じアイコンを付けて統一させたい方には向いていません。

[1]カテゴリーアーカイブのそれぞれの項目にヤプログアイコンを付ける
�@「マイページ」の「サイドバー」から「カテゴリ編集」を選びます。
�Aご自分のブログのどの記事でもいいのでコメント欄を表示させておきます。
�Bコメント欄にお好きな絵文字を選んで表示させます。
●例えば、カテゴリーのある項目が「ファッション関連」だったとします。この項目の前に付ける絵文字を←これにするとしたら、コメントフォームには「｛買い物｝」と表示されるハズです。
�Cカテゴリー編集画面のカテゴリ名の前に�Bで選んだ絵文字のタグを入れ、「追加・変更」を押して適用させます。
●例：｛買い物｝ファッション関連
これで完了です**(*´∇｀*)　リンク集は続きから**

↑これ、おなじみ「Yahoo!アバター」。
服の種類も豊富。背景もいろいろあって面白いんですが、何か･･･何かが足りない気がする。


そうだ、姫が足りてないのよ(￣ェ￣;) エッ?

最近ブログパーツ特集で知ったアバターサイト「eLouai's Candybar Doll Maker 3」
　
もぉとことん姫してます。ハングル文字の背景もあったので、おそらく韓国のサイトなのかな？
でも書いてあるのは簡単な英語だし、英語分らない方にも全然簡単です。
2もありますが、png形式でしか保存する事ができません。「3」はスクリプト呼び出しで、私のブログにあるようなキラキラ動画のアバターも簡単に設置可能

しかし服はど派手なもの多し･･･。今回ブログに設置してみましたが、本人と似てるとか一切なしw
でも白のショートコートは欲しいし(ツイードは買った。)、チェックのフレアもほしいし。
服的には10代向きですが、永遠の姫系の方に是非お勧めです、このサイトw
あまりにキラキラなのでハマると思います(ΦωΦ)ふふふ・・・・

飾りテーブルとは･･･
角が丸かったりレースが付いていたりと、サイドバーのテーブルをデザインテーブルにするにはCSSの力だけでは出来ません。当然画像(素材)が必要となります。

･･･というわけで、今回は「角丸テーブル」のカスタマイズ方法をご紹介しようかと思います。

とりあえずサンプルとしてこんなのを用意してみました☆彡
　　
上部分は高さは長め。下は逆に短めにしてあります。これはタイトル文字が2行などになった時に隙間が空かないようにする為なんです**
画像の幅はどちらも175px

高さなどは下図参照(*´∇｀*)
高さは適当ですw
これらの画像は一応白背景用に作成してあります。黒背景などに使うと、少し角がギサギサに見えてしまうかもしれません(*；´д`)


ではさっそく設定してみます。
※標準のサイドバー幅175pxでの設定となります。それ以外のサイズの方はこの画像は使用しないで下さい。

[1]画像を準備する
�@2つの画像をご自分のヤプログの記事にupし、「下書き」処理にして保存します。
�Aもう一度記事の編集画面を開き、画像を右クリック。IEの場合は「プロパティ」から画像URLをコピーし、メモ帳などに貼り付けておきます。