RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2009⁄11⁄01(Sun)
  • 01:10

メインエリアにメールフォームを設置する

メインエリアにメールフォームを設置する方法を説明します。

ただ設置するだけでなく、設置場所・テキスト・画像で装飾するかどうかの設定を施せます。

詳しくは続きで!

当テンプレートVer1で有効です。
まず、ダウンロードして頂いたテンプレートの<head>タグ内に、次のような青字の記述があります。

<script type="text/javascript">
<!--
 $(document).ready(function(){
$('#upperPageNaviArea').css('display','block');
$('#mainArea .pageNaviArea').FC2BlogPageNavigation({pageNumMax: '<%total_pages>'});
  $('form.jqtransform').jqTransform({imgPath:'http://blog-imgs-29.fc2.com/h/k/d/hkdesign/'});
//$('#mainArea').FC2BlogMailForm({});
$('#SM_siteMapArea').FC2BlogCreateSiteMap({});
  $("a[href*='#']").easingScroll({easing: "easeInOutCirc", duration: 600});
  $('#headerLogo01').pngfix('#headerLogo01');
 });
function RelationEntry(_tagStr, _categoryNo){
$('#relationEntry').FC2BlogRelationEntry({tagStr: _tagStr, categoryNo: _categoryNo});
}
-->
</script>
HTMLソース1
この部分で設定を行います。
このメールフォーム機能はどちらかというとあまり使われないだろうと思ったので、最初は//でコメントアウトをしてこの機能を封印しています。

とりあえず次のように//を消してみましょう

 $('#mainArea').FC2BlogMailForm({});
HTMLソース2
すると次のようになります。



こんな感じでメインエリア上部にメールフォームがいきなり現れました!


次はこのメールフォームの位置を変更してみましょう。
設置できる場所は4箇所あります。

 $('#mainArea').FC2BlogMailForm({position: "2"});
HTMLソース3
({})の中にposition: "2"を入力しました。

こうすると次のようになります。



同様にposition: "3"の場合は次のように。



position: "4"の場合は次のようになります。



position: "1"については書いてありませんが、これはデフォルトで設定されているので何も記述していない状態と同じになります。

各positionの設定をまとめると・・・
position: "1" メインエリア上部
position: "2" メインエリア上部のエントリーナビの下
position: "3" メインエリア下部のページナビの上
position: "4" メインエリア下部
という風になっています。


次はフォーム内にテキストを設置してみましょう!

 $("#mainArea").FC2BlogMailForm({position:"2", text: "私のブログへようこそ!
ご意見ご感想をお待ちしています!"});

HTMLソース4
text: ""をコンマで区切って追加して、挿入したい文章を記述しています。<br />で改行もできます。
こうすると次のような感じになります。



もちろん次のようにポジション指定はなくてもOKです。

 $("#mainArea").FC2BlogMailForm({text: "私のブログへようこそ!
ご意見ご感想をお待ちしています!"});

HTMLソース5




さてお次はフォームを画像で装飾するかどうかの切り替えをします。

このメールフォームはコメントフォームのデザインを通常に戻すで説明したように、jqtranceformというjQueryプラグインを使って画像に置き換えています。
このプラグインを適用せずに通常のHTMLフォームで表示させる事ができます。
次のようにmode: "nomal"を追加してやってください。

 $("#mainArea").FC2BlogMailForm({text: "私のブログへようこそ!
ご意見ご感想をお待ちしています!", mode: "nomal"});

HTMLソース5
もちろんtext:""の部分がなくmode:""だけでもOKです。

こうすると次のようになります。



フォームの部分が普通のHTMLフォームに変身しました!


こんな感じで簡単にメールフォームを設置する事ができるようになります。
が、このままだと全てのページで表示されてしまいます。
(全てのページとはトップページ、個別記事ページ、全記事一覧ページ等)
そこでFC2で用意されているFC2変数を組み合わせると、必要なページだけで表示するといった事も可能になります。

たとえばトップページにのみ表示したい場合は次の感じに。

 <!--index_area-->
 $("#mainArea").FC2BlogMailForm({});
 <!--/index_area-->
HTMLソース6
赤字で表示している部分がFC2側で用意されているFC2変数。
こうすると、トップページにのみFC2変数で囲まれた部分が表示されるので、トップページにのみメールフォームが表示されるという仕組みになります。

同じように次は個別記事ページでのみ表示。

 <!--permanent_area-->
 $("#mainArea").FC2BlogMailForm({});
 <!--permanent_area-->
HTMLソース7


FC2変数についての詳しい説明はこちらをどうぞ。



説明が長くなってわかりにくいかもしれませんが、いかがでしょうか?
最初のほうに書きましたが、テンプレートをダウンロードして頂いた時点では//を使って適用させないようにしているので、//をはずしてから各種設定をおこなってくださいね。
関連記事
スポンサーサイト
category
カスタマイズ > その他カスタム
tag
カスタマイズ
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/55-2e233c24

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
1441位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
15位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。