MovableTypeのススメ - MovableTypeアーカイブ

2007年8月31日

Faviconの設置方法（お気に入りアイコン）

Favicon を設置してみました。

Favicon、いろんなサイトで見かけますよね。

最初はこのFaviconの事をなんと呼ぶのかがわからず、どう検索して調べたらいいんだろ？って感じで戸惑いました。（苦笑）

FaviconとはFavorite Icon（お気に入りアイコン）の略でFaviconをあらかじめ用意しておくとアドレスバーのURLの先頭やブックマークにアイコンが表示されるというものです。

それでは設置の方法です。

１．アイコン画像作成
画像ソフトで16px × 16pxの画像を作ります。（GIF、JPG、PNGで作成）

２．favicon.icoファイルを生成
Favicon は .ico 形式である必要があるため下記サイトで変換・ダウンロード。

Favicon Japan

３．ファイルのアップロード
favicon.icoファイルをindex.htmlと同じ場所にアップロードします。

４．テンプレートの<head>～</head> に下記を追加・再構築

<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />

以上で表示されるようになります。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

2007年8月22日

Google Sitemaps（グーグルサイトマップ）の自動作成

Googleの検索エンジンに正しくサイトの構成を認識してもらうためのGoogle Sitemaps。その登録に必要なXMLベースのサイトマップファイルをMovableTypeを使って簡単に作成する方法です。

手順は下記のとおり

１．インデックステンプレートの新規作成
デザイン＞テンプレートを選び、インデックステンプレートを作成。

２．テンプレートの名前を設定
例）GoogleSitemaps

３．テンプレート編集画面のテキストエリアに下記をペースト

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc><$MTBlogURL encode_xml="1"$></loc>
<priority>1.0</priority>
</url>
<MTCategories>
<url>
<loc><$MTCategoryArchiveLink encode_xml="1"$></loc>
</url>
</MTCategories>
<MTEntries lastn="9999">
<url>
<loc><$MTEntryPermalink encode_xml="1"$></loc>
<lastmod><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></lastmod>
</url>
</MTEntries>
</urlset>

４．出力ファイル名を設定し保存
例）出力ファイル名：sitemap.xml

５．XMLファイルが正しく出力されたら、下記よりGoogleに登録を行います。

Google ウェブマスターツール
http://www.google.com/webmasters/sitemaps/login

今回参考にさせてもらったサイトはトータルWEBさんです。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

リンク先のプレビュー表示｜WebSnapr2.0

最近、いろいろなところで見かけるリンク先のプレビュー表示を試してみました。
探してみると、いろんなのがありますね。

で、今回試したのはWebSnapr2.0

他のものに比べると表示がシンプルで余計なリンクがないところがいいです。

導入手順は下記のとおりです。

１．WebSnapr2.0のサイトよりpreviewbubble.zipをダウンロードし解凍
２．previewbubble.jsの10行目の画像パスの設定を変更（赤字部分）

var bubbleImagePath = '/images/bg.png';

３．previewbubble.js、bg.pngをアップロード

４．テンプレートのヘッダー部分に下記を挿入

<script type="text/javascript" src="previewbubble.js"></script>

５．プレビュー表示したいリンクに対してclass="previewlink"を設定

<a class="previewlink" href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>

以上です。

プレビューを表示したい部分にだけ設定できるところもGOOD！

気になる点としてはプレビューが表示されるまで時間がかかるところですが、
しばらく様子を見てみようと思います。

この記事は期待通りの内容でしたか？

Permalink | Category : | Comments [0] | Trackbacks [0]

<<前のページへ 6｜7｜8｜9｜10｜11｜12｜13｜14｜15 次のページへ>>