2007年1月 6日
ＭＴ用メールフォームの作成
今回は、MovableType用のメールフォームの作成方法を説明します。
「The blog of H.Fujimoto」の壱さんが作成された「メールフォーム作成用プラグイン」を使用しますので、簡単にメールフォームを作成することができます。
カスタマイズをすれば、MTで作成したブログのデザインと合わせたり、メールフォームの項目を追加したりすることもできます。
実際に、当ブログでもメールフォームを使用してますので、ご覧頂いた方がイメージしやすいと思います。
当ブログのメールフォームは、こちら→ メールフォーム
それでは、メールフォームの作成方法を説明します。
また、小粋空間さんのテンプレートをベースにしたメールフォームのサンプルテンプレートも配布されていますので、参考にしてください。
さらに、今回紹介したプラグインのメール送信等の処理をAjaxで行うことも可能です。
以上、MT用メールフォームの作成方法を説明しました。
参考になりましたら、応援お願いします。
「The blog of H.Fujimoto」の壱さんが作成された「メールフォーム作成用プラグイン」を使用しますので、簡単にメールフォームを作成することができます。
カスタマイズをすれば、MTで作成したブログのデザインと合わせたり、メールフォームの項目を追加したりすることもできます。
実際に、当ブログでもメールフォームを使用してますので、ご覧頂いた方がイメージしやすいと思います。
当ブログのメールフォームは、こちら→ メールフォーム
メールフォームの作成方法
それでは、メールフォームの作成方法を説明します。
- [1] プラグインのダウンロード
- 「The blog of H.Fujimoto：メールフォーム作成用プラグイン（その1）」のページを開き、「MailForm_1_11.zip」をクリックして、ダウンロードします。
- [2] プラグインのアップロード
- ダウンロードしたファイルを解凍し、「MailForm」フォルダを、MTの「Plugins」フォルダにアップロードします。そして、アップロード先の「MailForm」フォルダにある「mt-mail-form.cgi」のパーミッションを「755」等に変更し、実行可能します。
- [3] 送信先メールアドレスの設定
- MTの管理画面から「設定」メニューの「プラグイン」をクリックすると、「MailForm」が表示されていますので、「設定を表示」をクリックし、送信先のメールアドレスを入力し、「変更の保存」をクリックします。
- [4] テンプレートの作成
- メールフォームで使用するテンプレートを作成します。詳しくは、配布元のページで解説されていますので、参照してください。
- メールフォーム（インデックス・テンプレート）
[解説]→メールフォーム作成用プラグイン（その2）
- 送信完了ページ（テンプレート・モジュール）
[解説]→メールフォーム作成用プラグイン（その3）
- 送信前確認ページ（テンプレート・モジュール）
[解説]→メールフォーム作成用プラグイン（その4）
- 送信エラーページ（テンプレート・モジュール）
[解説]→メールフォーム作成用プラグイン（その5）
- メール本文用テンプレート（テンプレート・モジュール）
また、小粋空間さんのテンプレートをベースにしたメールフォームのサンプルテンプレートも配布されていますので、参考にしてください。
さらに、今回紹介したプラグインのメール送信等の処理をAjaxで行うことも可能です。
以上、MT用メールフォームの作成方法を説明しました。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (4)
| トラックバック (1)
はてなブックマークに追加
| 
2007年1月 2日
QRコードの作成
今回は、QRコードの作成方法を説明します。
MovableTypeの携帯用サイトを作成したら、パソコンで見ている方にも、簡単に携帯からアクセスできるように、ブログにQRコードを貼っておくと便利です。
それでは、簡単にQRコードを作成する方法を説明します。
「QRトルカ一発作成」で作成したQRコードは、次のようになります。
ブログ別！作成・カスタマイズ講座(mobile.ver)
以上、QRコードの作成方法を説明しました。非常に簡単でしたね。
参考になりましたら、応援お願いします。
MovableTypeの携帯用サイトを作成したら、パソコンで見ている方にも、簡単に携帯からアクセスできるように、ブログにQRコードを貼っておくと便利です。
QRコードの作成方法
それでは、簡単にQRコードを作成する方法を説明します。
- [1] 携帯サイトのＵＲＬを指定する
- 「QRトルカ一発作成」のページを開き、ページ中央の「QRコードに変換する内容」に「URLや紹介文」を記入し、「QRコード作成」をクリックします。
- [2] 文字が入っていないQRコードを取得する
- メールアドレスを入力し、「取得」ボタンをクリックすると、文字が入っていないQRコードが作成されます。
- [3] QRコード保存する
- 送られてきたメールのＵＲＬをクリックすると、作成されたQRコードが表示されますので、パソコンに保存します
- [4] QRコードをブログに貼る
- 保存したQRコードをサーバーにアップロードし、任意の場所に貼り付けます。
「QRトルカ一発作成」で作成したQRコードは、次のようになります。
ブログ別！作成・カスタマイズ講座(mobile.ver)
以上、QRコードの作成方法を説明しました。非常に簡単でしたね。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (1)
はてなブックマークに追加
|
2005年12月25日
メニューのプルダウン化（MovableType）
今回は、MovableTypeのメニューをプルダウンにするカスタマイズ方法について説明します。
ブログを長期間運営しますと、月別アーカイブやカテゴリなどが増えてきます。特に、月別アーカイブをサイドバーに表示させている場合は、月が替わるごとに縦長になっていきますね。
そこで、縦長に表示されている月別アーカイブやカテゴリのメニューをプルダウンにして、すっきりさせる方法を説明します。当ブログでも月別アーカイブは、サイドメニューでプルダウン化していますので、実物を見て参考にしてくださいね。
■ HTMLの編集
１． javascriptを追加
まず、<head>～</head>内に下記のスクリプトを追加します。
※スクリプトの追加は、<body>内でも構いませんが、呼び出し部分よりも前に追加します。
※ javascriptの外部ファイル化
javascriptを多用される方は、外部ファイル化しておくと便利です。
１．javascriptファイルの作成
テキストエディタで下記の内容をコピーし、「script.js」というファイル名で保存します。
※ファイル名はjs拡張子以外の部分は別名でも構いません。（xxx.js）
2．javascriptファイルのアップロード
「script.js」をftpソフト等でサーバーにアップロードします。
3．htmlの編集
<head>～</head>内に下記を追加します。
2． formタグの追加
次に、プルダウン化したい部分に、下記のようにformタグを追加します。
■ CSS（スタイルシート）の編集
プルダウン化した部分をカスタマイズするには、スタイルシートを編集します。
xx部分に数値を入れて、調整してください。
以上、「メニューのプルダウン化」について説明しました。
参考になりましたら、応援お願いします。
ブログを長期間運営しますと、月別アーカイブやカテゴリなどが増えてきます。特に、月別アーカイブをサイドバーに表示させている場合は、月が替わるごとに縦長になっていきますね。
そこで、縦長に表示されている月別アーカイブやカテゴリのメニューをプルダウンにして、すっきりさせる方法を説明します。当ブログでも月別アーカイブは、サイドメニューでプルダウン化していますので、実物を見て参考にしてくださいね。
カスタマイズ方法（MovableType編）
■ HTMLの編集
１． javascriptを追加
まず、<head>～</head>内に下記のスクリプトを追加します。
※スクリプトの追加は、<body>内でも構いませんが、呼び出し部分よりも前に追加します。
<script language="javascript" type="text/javascript">
//プルダウンメニュー
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
//プルダウンメニュー
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
※ javascriptの外部ファイル化
javascriptを多用される方は、外部ファイル化しておくと便利です。
１．javascriptファイルの作成
テキストエディタで下記の内容をコピーし、「script.js」というファイル名で保存します。
※ファイル名はjs拡張子以外の部分は別名でも構いません。（xxx.js）
//プルダウンメニュー
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
2．javascriptファイルのアップロード
「script.js」をftpソフト等でサーバーにアップロードします。
3．htmlの編集
<head>～</head>内に下記を追加します。
<script type="text/javascript" src="スクリプトURL"></script>
※スクリプトURLは、「script.js」をアップロードしたURLを絶対パスで記載します。2． formタグの追加
次に、プルダウン化したい部分に、下記のようにformタグを追加します。
<!--月別アーカイブ -->
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option selected>【年月を選択】</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
<$MTArchiveTitle$> (<$MTArchiveCount$>)</option></MTArchiveList>
</select>
</form>
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option selected>【年月を選択】</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
<$MTArchiveTitle$> (<$MTArchiveCount$>)</option></MTArchiveList>
</select>
</form>
<!--カテゴリアーカイブ -->
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option selected>【カテゴリを選択】</option>
<MTCategories show_empty="1">
<option value="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>[<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option selected>【カテゴリを選択】</option>
<MTCategories show_empty="1">
<option value="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>[<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>
■ CSS（スタイルシート）の編集
プルダウン化した部分をカスタマイズするには、スタイルシートを編集します。
form {
margin:xxpx;
padding:xxpx;
}
select {
width:xxpx;
font-size:xxpx;
}
margin:xxpx;
padding:xxpx;
}
select {
width:xxpx;
font-size:xxpx;
}
xx部分に数値を入れて、調整してください。
以上、「メニューのプルダウン化」について説明しました。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (3)
| トラックバック (8)
はてなブックマークに追加
|
2005年9月13日
パンくずリストの設置
今回は、パンくずリストの設置方法について説明します。掲示板にてリクエストがありましたので、早速、取り上げてみました＾＾
パンくずリストとは、下記のように、トップページから現在表示しているページまでの階層を示したリストのことです。
＜表示例＞
パンくずリストを設置していると、訪問者がサイト上のどの位置にいるのか把握しやすくなり、ユーザビリティを向上させることができます。
ちなみに、「パンくずリスト」という名前の由来は、童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたというところからきていると言われています。
是非、パンくずリストを設置して、訪問者をサイトの中で迷わさせないようにしてくださいね。
カスタマイズ方法は、パンくずリストを設置したいテンプレートに、下記のような記述を追加します。
■ 個別エントリーの編集
＜記述例＞
・「MTParentCategories」
エントリーが属する親カテゴリーとサブカテゴリーをリストアップします
・「glue=" > "」
リストをつなぎ合わせる文字を指定します
・「>」とは、「>」のことで、「greater than」の略です。
別の文字や記号に変更してもＯＫです。
＜表示例＞
■ カテゴリー・アーカイブの編集
＜記述例＞
＜表示例＞
※カレントディレクトリにリンクを貼らない方法
カレントディレクトリ（現在表示しているカテゴリ）にリンクを貼らない方法は、MTタグだけでは複雑なソースになってしまいますので、MTタグとPHPを併用すると簡潔に記述することができます。（前提として、カテゴリーアーカイブの拡張子をphpにする必要があります）
詳しくは、下記のサイトを参考にしてくださいね。
［参考記事］小粋空間 「パンくずリスト」
［参考記事］やむやむ 「カテゴリ・日付アーカイブにもパンくずナビ」
■ 日付アーカイブの編集
＜記述例＞
＜表示例＞
■ メインページの編集
＜記述例＞
＜表示例＞
編集後は保存して再構築すると完了です。
参考になりましたら、1クリックの応援お願いします。
パンくずリスト（パン屑リスト、トピックパス）とは
パンくずリストとは、下記のように、トップページから現在表示しているページまでの階層を示したリストのことです。
＜表示例＞
| トップページ >MTカスタマイズ講座 > 操作アップ編 > パンくずリストの設置 |
パンくずリストを設置していると、訪問者がサイト上のどの位置にいるのか把握しやすくなり、ユーザビリティを向上させることができます。
ちなみに、「パンくずリスト」という名前の由来は、童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたというところからきていると言われています。
是非、パンくずリストを設置して、訪問者をサイトの中で迷わさせないようにしてくださいね。
カスタマイズ方法（MovableType編）
カスタマイズ方法は、パンくずリストを設置したいテンプレートに、下記のような記述を追加します。
■ 個別エントリーの編集
＜記述例＞
| <a href="<$MTBlogURL$>">トップページ</a> >
<MTParentCategories glue=" > "> <a href="<$MTCategoryArchiveLink$>"> <$MTCategoryLabel$></a> </MTParentCategories> > <$MTEntryTitle$> |
・「MTParentCategories」
エントリーが属する親カテゴリーとサブカテゴリーをリストアップします
・「glue=" > "」
リストをつなぎ合わせる文字を指定します
・「>」とは、「>」のことで、「greater than」の略です。
別の文字や記号に変更してもＯＫです。
＜表示例＞
| トップページ >MTカスタマイズ講座 > 操作アップ編 > パンくずリストの設置 |
■ カテゴリー・アーカイブの編集
＜記述例＞
| <a href="<$MTBlogURL$>">トップページ</a> > <MTParentCategories glue=" > "> <a href="<$MTCategoryArchiveLink$>"> <$MTCategoryLabel$></a> </MTParentCategories> |
＜表示例＞
| トップページ >MTカスタマイズ講座 > 操作アップ編 |
※カレントディレクトリにリンクを貼らない方法
カレントディレクトリ（現在表示しているカテゴリ）にリンクを貼らない方法は、MTタグだけでは複雑なソースになってしまいますので、MTタグとPHPを併用すると簡潔に記述することができます。（前提として、カテゴリーアーカイブの拡張子をphpにする必要があります）
詳しくは、下記のサイトを参考にしてくださいね。
［参考記事］小粋空間 「パンくずリスト」
［参考記事］やむやむ 「カテゴリ・日付アーカイブにもパンくずナビ」
■ 日付アーカイブの編集
＜記述例＞
| <a href="<$MTBlogURL$>">トップページ</a> >
<$MTArchiveTitle$> |
＜表示例＞
| トップページ > 2005年09月 |
■ メインページの編集
＜記述例＞
| <a href="<$MTBlogURL$>">トップページ</a> |
＜表示例＞
| トップページ |
編集後は保存して再構築すると完了です。
参考になりましたら、1クリックの応援お願いします。
パーマリンク
| コメント (4)
| トラックバック (9)
はてなブックマークに追加
|
2005年8月11日
Google検索ボックスの設置方法
今回は、MovableTypeにGoogleの検索ボックスを設置する方法について説明します。
MovableTypeのデフォルトテンプレートには、検索ボックスが標準で設置されていますが、Googleの検索ボックスを設置するメリットは、なんといっても広告収入や詳細レポートが得られるということですね。
Googleの検索ボックスを設置し、AdSense収入や詳細レポートなどを得るには、下記の手順で進めてください。
1. Google AdSense にログインします
広告収入や詳細レポートを得るためには、Google AdSenseに登録する必要があります。未登録の場合は、Google AdSenseを参考にして、登録してください。
２. 「検索向け AdSense」 タブをクリックします
３. エンコード、サーチボックス、色、ロゴなどを選択します
MovableTypeのデフォルトテンプレートの場合、エンコードは、「UTF-8」を選択します。そうすると検索結果のページで文字化けされずに表示されます。
４. コードをコピーし、HTMLファイルに貼り付けます
検索ボックスコードをコピーして、「メインページ」などのHTMLファイルに貼り付けます。
編集後は保存して再構築すると完了です。
無事、Googleの検索ボックスが設置されましたね。
設置後は、文字化けなどされずに、正常に検索できるかチェックしてください。ただし、サイト内検索の場合、クロールされていないページは検索対象にはなりませんので、注意してください。
AdSense収入や詳細レポートなど必要としない場合は、Google - 検索機能の追加のページ内のHTMLタグを貼り付けるだけで、設置できます。
エンコードは、MovableTypeのデフォルト・テンプレートの場合、「UTF-8」に変更すると、検索結果のページで文字化けされずに表示されます。
以上、Google検索ボックスの設置方法（MT編）について説明しました。ページ数が増えてきますと、「サイト内検索」は非常に便利ですので、是非設置してくださいね。
ブログランキングに参加中です。応援お願いします。
MovableTypeのデフォルトテンプレートには、検索ボックスが標準で設置されていますが、Googleの検索ボックスを設置するメリットは、なんといっても広告収入や詳細レポートが得られるということですね。
| Google検索ボックス（カスタマイズ版）の設置方法 |
Googleの検索ボックスを設置し、AdSense収入や詳細レポートなどを得るには、下記の手順で進めてください。
1. Google AdSense にログインします
広告収入や詳細レポートを得るためには、Google AdSenseに登録する必要があります。未登録の場合は、Google AdSenseを参考にして、登録してください。
２. 「検索向け AdSense」 タブをクリックします
３. エンコード、サーチボックス、色、ロゴなどを選択します
MovableTypeのデフォルトテンプレートの場合、エンコードは、「UTF-8」を選択します。そうすると検索結果のページで文字化けされずに表示されます。
４. コードをコピーし、HTMLファイルに貼り付けます
検索ボックスコードをコピーして、「メインページ」などのHTMLファイルに貼り付けます。
編集後は保存して再構築すると完了です。
無事、Googleの検索ボックスが設置されましたね。
設置後は、文字化けなどされずに、正常に検索できるかチェックしてください。ただし、サイト内検索の場合、クロールされていないページは検索対象にはなりませんので、注意してください。
| Google検索ボックス（ベーシック版）の設置方法 |
AdSense収入や詳細レポートなど必要としない場合は、Google - 検索機能の追加のページ内のHTMLタグを貼り付けるだけで、設置できます。
エンコードは、MovableTypeのデフォルト・テンプレートの場合、「UTF-8」に変更すると、検索結果のページで文字化けされずに表示されます。
以上、Google検索ボックスの設置方法（MT編）について説明しました。ページ数が増えてきますと、「サイト内検索」は非常に便利ですので、是非設置してくださいね。
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (1)
はてなブックマークに追加
|
2005年8月 2日
トラックバックURLを1クリックで選択
今回は、トラックバックURLを1クリックで選択できるカスタマイズ方法について説明します。
トラックバックを送る際に、トラックバックURLを1クリックで選択やコピーすることができるブログは非常に便利ですね。
当ブログでも実装していますので、実例は個別記事のトラックバックURLを参考にしてくださいね。
トラックバックURLを1クリックで選択するカスタマイズを行うには、「個別エントリー・アーカイブ」を編集します。
■ 個別エントリー・アーカイブの編集
MovableTypeのデフォルトテンプレートでは、下記のような記述があります。
＜個別エントリー・アーカイブ＞
これを下記のように書き換えてください。（コピーして貼り付けてＯＫです）
size="50"の数値を変えると、幅が変更できますので、調整してくださいね。
編集後は保存して再構築すると完了です。
これで、すこし便利になりましたね。
以上、トラックバックURLを1クリックで選択する方法について説明しました。カスタマイズも非常に簡単ですので、是非、とり入れてくださいね。
ブログランキングに参加中です。応援お願いします。
トラックバックを送る際に、トラックバックURLを1クリックで選択やコピーすることができるブログは非常に便利ですね。
当ブログでも実装していますので、実例は個別記事のトラックバックURLを参考にしてくださいね。
| カスタマイズ方法 |
トラックバックURLを1クリックで選択するカスタマイズを行うには、「個別エントリー・アーカイブ」を編集します。
■ 個別エントリー・アーカイブの編集
MovableTypeのデフォルトテンプレートでは、下記のような記述があります。
＜個別エントリー・アーカイブ＞
| <p class="techstuff"> このエントリーのトラックバックURL:<br /> <$MTEntryTrackbackLink$> </p> |
これを下記のように書き換えてください。（コピーして貼り付けてＯＫです）
| <p class="techstuff"> このエントリーのトラックバックURL:<br /> <input type="text" name="trackback_url" size="50" value="<$MTEntryTrackbackLink$>" readonly="readonly" class="edit" id="trackback_url" onfocus="this.select()" /> </p> |
size="50"の数値を変えると、幅が変更できますので、調整してくださいね。
編集後は保存して再構築すると完了です。
これで、すこし便利になりましたね。
以上、トラックバックURLを1クリックで選択する方法について説明しました。カスタマイズも非常に簡単ですので、是非、とり入れてくださいね。
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (1)
はてなブックマークに追加
|
』
→
』
→