2010年05月30日

Movable type 5::親子サイトでJavascriptを共有する

ウエブサイトを親として、子供に複数のブログサイトを作成した場合は、JavascriptやCSSなどの共通部分の管理が煩雑になります。
今回は、自作のJavascriptファイルを、親と子供のサイトで共通で利用する方法を試したいと思います。

まず親のウエブサイトのテンプレートモジュール内に”HTMLヘッダーJS”というテンプレートを作成します。これは既存の”HTMLヘッダー”を複製したほうが簡単で間違いがないと思います。
複製したテンプレートを開き、名称を”HTMLヘッダーJS”に変更し、追加したいJavascript関連の記述のみ残して、他のmetaタグやlinkタグを削除します。

注意:以下のデフォルトで書かれているJavascriptの指定部分はそのまま”HTMLヘッダー”に残しておいてください。
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

テンプレートを保存します。

既存の”HTMLヘッダー”を開きます。
今度は先ほどとは逆に、追加したJavascript関連の記述を削除します。
そして削除した位置に”HTMLヘッダーJS”をIncludeします。
<$mt:Include module="HTMLヘッダーJS"$>

子供のブログサイトの”HTMLヘッダー”を編集します。
同様に追加したJavascript関連の記述を削除します。
そして削除した位置に”HTMLヘッダーJS”をIncludeしますが、ここでは親のサイトのIDを指定する必要があります。
<mt:BlogParentWebsite>
<$mt:Include module="HTMLヘッダーJS" blog_id="親サイトのID">
</mt:BlogParentWebsite>

ウェブサイトとブログサイトの両方を再構築して完了です。
タグ:Movable Type
posted by まーつん at 11:55| Comment(0) | TrackBack(0) | Movable type | このブログの読者になる | 更新情報をチェックする

2010年05月22日

Movable type 5::カスタムフィールドのテキストエリアをカスタマイズする

カスタムフィールドで複数行のテキストエリアを作成する場合、通常HTMLで指定するrowsアトリビュートが指定できません。image 
  (デフォルトのままのカスタムフィールドのテキストエリア。rows=3で指定されている。)

そこで今回はjQueryを利用してrowsに属性値を指定することにします。それとテキストボックスの内部に初めから表示されているメッセージの設定も行いたいと思います。
まずテキストエリアの行数の変更ですが、jQueryには属性値を変更するattr()というメソッドがあるので、それを利用します。attr()は変更したい属性名と変更後の属性値を括弧の中でカンマ区切りで指定します。
$(セレクター).attr(“属性名”, “属性値”);
今回はrowsアトリビュートを10に変更したいと思いますので、以下のようなコードになります。
 
$(function(){
$(テキストエリアのセレクター).attr("rows","10");
});

次にページが表示された際にテキストボックスの内部にメッセージが表示されるようにします。
$(function(){
    $(テキストエリアのセレクター).val("コメントにはスタイル用のHTMLタグが利用可能です。") .css("color","#ccc").one("focus",function(){
         $(this).val("").css("color","#000");
        });
});

val()を使ってテキストエリアにメッセージを設定します。そしてcss()を使って、メッセージの色を指定します。次にone()を使ってfocusイベントが発生した初回にのみ、メッセージを消して文字の色を黒にしています。
完成したテキストエリアは以下のようになりました。image
posted by まーつん at 21:08| Comment(0) | TrackBack(0) | Movable type | このブログの読者になる | 更新情報をチェックする

2010年05月05日

Movable type 5::カスタムフィールドの検索 その1 Google カスタム検索

Movable type標準の検索では、コメントやカスタムフィールドを検索できないので、その対策としてGoogle カスタム検索を試してみたいと思います。
Google カスタム検索では次のようなことができるようです。

単数、複数のウェブサイトやウェブページを検索範囲に指定
自分のサイトに検索ボックスを設置して検索機能を提供
サイトに合わせて検索結果のデザインをカスタマイズ

初めにGoogle カスタム検索のページから「カスタム検索エンジンの作成ボタン」を押します。
image
検索エンジンの設定ページが表示されるので、情報を入力します。
これで作成は完了です。

「マイ検索エンジン」を表示すると、作成したエンジンが表示されます。
image 
自分のサイトに挿入するためのコードを取得するために、「コントロールパネル」をクリックします。
「コントロールパネル」ページの左メニューの「コードの取得」をクリックします。 
image 

取得したコードを自分のページのテンプレートに貼り付けます。私は「バナーヘッダー」テンプレートを利用しました。
これで作成した検索Boxが利用できるようになります。
image

検索を試してみます。
しかし、残念ながら「結果はありません」とのこと。
image 
実験用に作ったサイトですから、Googleにインデックスされていないのでしょう。

「コントロールパネル」ページの左メニューの「インデックス作成」をクリックします。
image
表示されたページを見るとサイトマップが登録されていないようなので、サイトマップを登録しようと思いましたが、
確認済みのサイトマップの URL がわかる場合は、下記に入力して [今すぐインデックス登録] をクリックすることができます。しかし、Google でサイトマップを確認できるように、まずウェブマスター ツールを使用してサイトマップを登録することをおすすめします。
とのことなので、Google ウェブマスター セントラルで登録します。

Google ウェブマスター セントラルページの「サイトステータス ウィザード」をクリックします。「サイトを追加」ボタンを押します。
image 
ダイアログが表示されるので、自分のサイトのURLを登録します。
「所有者の確認」ページで自分がサイトのオーナーであるための確認用コードを取得します。
取得したコードをMovable typeの「HTMLヘッダー」テンプレートに貼り付けます。
変更を保存して、再構築します。
googleウェブマスターの「所有者の確認」ページに戻り、「確認」ボタンを押します。
「ダッシュボード」ページが表示されるので、左メニューのサイト設定>サイトマップをクリックします。
image
「サイトマップを送信する」ボタンをクリックします。
表示されたダイアログにサイトマップのURLを記述します(注1)。
これでサイトマップが登録されました。
image

しばらくして、ページをリロードするとステータスが「OK」になりました。

「Google カスタム検索」の「インデックス作成」ページに戻り、「サイトマップによるオンデマンド インデックス登録」のドロップダウンから、登録したサイトマップを選択し、「今すぐインデックス登録」ボタンをクリックします。
image

インデックスの作成に数時間必要なようですが、徐々に検索結果が表示されるようになりました。

注1:
サイトマップの作成については、以前紹介した「Movable Type 5 Web制作ガイドVolume 2」を参考に作成しましたが、こちらのページも参考になるようです。

posted by まーつん at 12:59| Comment(0) | TrackBack(0) | Movable type | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。