webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

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

Comment

すいません^^;わたしの説明ベタのせいで
伝え方がすこし間違っていたようです。
フリーエリアにもコメントができるように
できないでしょうか?わがまますぎて申し訳
ございません。あと送信されるメールが特定の
メールアドレスに送信されるようにお願いできませんかね?

2009.12.12 | URL | 宇宙人かも・・・ #- [ edit ]

Re: タイトルなし

> すいません^^;わたしの説明ベタのせいで
> 伝え方がすこし間違っていたようです。
> フリーエリアにもコメントができるように
> できないでしょうか?わがまますぎて申し訳
> ございません。あと送信されるメールが特定の
> メールアドレスに送信されるようにお願いできませんかね?

こちらこそ、勝手に解釈して作ってしまってすみませんw^^;

本題ですが、
FC2ブログのコメント機能は、エントリー(記事)に連携したものなので、
同じ機能を使ってのフリーエリアへの追加は少々難しいように思います。
フリーエリアへのコメント機能は、WEBサービスで利用できるようなものが
ないか調べてみます。

メールの件についてですが、今は、FC2ブログに登録したメールアドレスに
送られてくると思います。このメールアドレスを変更するためには、

http://fc2.com/login.php 
から、ログインしてメニューからIDの編集を行い、登録したアドレスを
送信されるメールに変更すればいいです。

複数のメールアドレスに送信したい場合は、
POPが設定できるメールサービスを利用してください。
例えば「gmail」など。

FC2ブログのメールフォームを使わないやりかたですと、
以下のようにhtmlタグを記述すればいいと思います。
mailto:以下に送信したいメールアドレスを記述してください。

<a href="mailto:hogehoge@example.com">メールはこちらへ</a>




FC2ブログでCGIが利用できたりPHPが記述できたりすると
自作のメールフォームやコメント投稿機能など作成してあげられるのですが
現状では、このような方法がいいかと思います。

2009.12.12 | URL | 管理人 #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 

FC2ブログテンプレート フリーエリアにプラグインの挿入を行う

free_area_edit_e31_00.jpg
一つ目のテンプレートに不具合があったようなので訂正版のHTMLとCSSをアップしておきます。

第一弾テンプレートの記事

・ナビゲーション(エントリーの上部)に点が表示されてしまうこと
・IEでフリーエリアのナビゲーションが崩れている点

の2点を修正しました。

修正するためには、以下二つをダウンロードしてください。
修正版HTMLファイルをダウンロード
修正版のCSSファイルをダウンロード

ダウンロードしたらHTMLの編集の部分をダウンロードしたHTMLファイルの内容にまるまるコピー
してください。
スタイルシートの編集も同様に行ってください。

手動での変更方法
*変更点といってもあまりいじるところも多くないので、手動で書き換えてもいいと思います。


フリーエリアのすぐ下に以下のような記述があると思いますが、

<ul>
<div class="entry-time"></div><li>2009/11/07</li>
<div class="entry-readmore"></div><li><a href="#" alt="about">About</a></li>
<div class="entry-comment"></div><li><a href="#" alt="mail">Mail</a></li>
</ul>

これを以下のような記述に変更してください。

<ul>
<li><div class="entry-time"></div>2009/11/07</li>
<li><div class="entry-readmore"></div><a href="#" alt="about">About</a></li>
<li><div class="entry-comment"></div><a href="#" alt="mail">Mail</a></li>
</ul>

次にCSSに記述を追加します。
スタイルシートの編集から
.entry-navi li{ float:left;}
という記述をみつけてください。
これを
.entry-navi li{ float:left; list-style-type:none;}
のようにしてくだいさい
これを行うことによって、画像横に表示される点のようなものが消えるはずです。

修正点は以上です。
わからないことがあれば聞いてください。

以下からはフリーエリアへのプラグインの追加の説明になります。

今回は、フリーエリアへのコメント欄の追加とメールフォームの追加を行います。
また、リアルタイム時計のプラグインを差込たいと思います。
実際のHTMLとCSSのコードは以下のようになります。


■HTML

<!-- ▽フリーエリア▽ -->

<div id="right-wrap">

<div class="entry-top"><div class="entry-navi">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="160" height="20" id="myclock" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://blog-imgs-27.fc2.com/o/d/o/odoratus/myclock.swf?col=000000&md=1&spd=0.5&bl=0.7" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="http://blog-imgs-27.fc2.com/o/d/o/odoratus/myclock.swf?col=000000&md=1&spd=0.5&bl=0.7" quality="high" bgcolor="#ffffff" wmode="transparent" width="160" height="20" name="myclock" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</div></div>

<div class="entry-body">


<div class="entry">
<h2>フリーエリア</h2><br />

<div  id="rcomment_box">
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
</div>

<div id="top_mailform">
<form action="./" method="post">
  <p class="plugin-mail" &align>
    名前:  <input type="text" size="10" name="formmail[name]"  value="" maxlength="100" style="width:90%;" /><br />
    メール:<input type="text" size="10" name="formmail[mail]"  value="" maxlength="150" style="width:90%;" /><br />
    件名:  <input type="text" size="10" name="formmail[title]" value="" maxlength="150" style="width:90%;" /><br />
    本文:<br />
    <textarea name="formmail[body]" cols="10" rows="4" style="width:90%;"></textarea>
    <input type="submit" value=" 確認 " />
    <input type="hidden" name="mode" value="formmail" />
    <input type="hidden" name="formmail[no]" value="&formno" />
  </p>
</form>
</div>

<br /><br />

<div class="clear"><hr /></div>

</div>

</div>

<div class="entry-bottom"></div>

</div>

<!-- △/フリーエリア△ --> 



■CSS
   

#rcomment_box{

    width:340px; height:260px;
    background-color:#f2f2f2;
    border:1px solid #cecece;
    overflow:auto;
    padding:10px;
    text-decoration:none;
    font-size:14px;
    color:#333;
    float:left;
}
#rcomment_box li{

  list-style-type:square;
  color:#ad0000;
  margin-left:8px;
}

#rcomment_box a{
 text-decoration:none;
    color:#444;

}

#top_mailform{

  width:330px; 
 margin-left:10px;
  
  float:right;
  border:1px solid #cecece;
}

#top_mailform p{

  padding:10px;
 
}


それでは、簡単に説明します。
実はフリーエリアにFC2のプラグインのソースコードを直接貼り付けて,
CSSでレイアウトと装飾しただけです。
*装飾は私が独断でしたものなので、デザインの要望などあればコメントください。

時計の件ですが、以下のサイト様が作成された共有プラグインを使いました。

http://odoratus.blog70.fc2.com/
時計の部分は<object> ~ </object>の中で書かれています。

まずコメント欄ですが、下の画像のように左カラムに設定してみました。
CSSでwidth:340px; height:260px;に設定し、float:leftにて左寄せにしました。
高さを設定することによって、コメントの表示数を変更しても260px以上はスクロールするようになります。
これはブラウザ依存ですがCSSでは、overflow:auto;と書くとこのように動きます。


free_area_edit_e31_01.jpg

次に右カラムにはメールの送信ボックスを表示しました。
<form action="./" method="post">から</form>の内容が送信するために必要な部分となります。
CSSにて、float:rightと記述することで右寄せにしています。
細かいレイアウトについては、marginやpaddingを用いています。この辺りは詳しく説明しているサイトが 多くありますので、調べてみてください。
下の図が完成形になります。見にくいと思いますので、クリックして大きなサイズで見てみてください。

free_area_edit_e31_02.jpg
かなり走って書いたので、わからなかったところ多いかもしれませんが、
またその都度コメントして下さい。

それではサイトを閲覧していただきありがとうございました。

Comment

すいません^^;わたしの説明ベタのせいで
伝え方がすこし間違っていたようです。
フリーエリアにもコメントができるように
できないでしょうか?わがまますぎて申し訳
ございません。あと送信されるメールが特定の
メールアドレスに送信されるようにお願いできませんかね?

2009.12.12 | URL | 宇宙人かも・・・ #- [ edit ]

Re: タイトルなし

> すいません^^;わたしの説明ベタのせいで
> 伝え方がすこし間違っていたようです。
> フリーエリアにもコメントができるように
> できないでしょうか?わがまますぎて申し訳
> ございません。あと送信されるメールが特定の
> メールアドレスに送信されるようにお願いできませんかね?

こちらこそ、勝手に解釈して作ってしまってすみませんw^^;

本題ですが、
FC2ブログのコメント機能は、エントリー(記事)に連携したものなので、
同じ機能を使ってのフリーエリアへの追加は少々難しいように思います。
フリーエリアへのコメント機能は、WEBサービスで利用できるようなものが
ないか調べてみます。

メールの件についてですが、今は、FC2ブログに登録したメールアドレスに
送られてくると思います。このメールアドレスを変更するためには、

http://fc2.com/login.php 
から、ログインしてメニューからIDの編集を行い、登録したアドレスを
送信されるメールに変更すればいいです。

複数のメールアドレスに送信したい場合は、
POPが設定できるメールサービスを利用してください。
例えば「gmail」など。

FC2ブログのメールフォームを使わないやりかたですと、
以下のようにhtmlタグを記述すればいいと思います。
mailto:以下に送信したいメールアドレスを記述してください。

<a href="mailto:hogehoge@example.com">メールはこちらへ</a>




FC2ブログでCGIが利用できたりPHPが記述できたりすると
自作のメールフォームやコメント投稿機能など作成してあげられるのですが
現状では、このような方法がいいかと思います。

2009.12.12 | URL | 管理人 #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

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