遅延クッキーネタのエントリーはグーグル上位に表示されているのは知っていたけど、まさか詳細な内容を記したエントリーが速攻でランクされたのは驚いた。旧ＳＥＯテクニックでは、ロボットが巡回するまでの間、待たなければランクに繁栄されなかったのだけれども。。。。今は速攻でランキングが変わるのね。恐るべし、グーグル。。。オフィシャルブログにそれっぽい内容があったけれども、実感するまで信じられなかった。
あと、Ｙａｈｏｏ！で「遅延クッキー」を検索してもこのＷｅｂサイトはもとより、他のＷｅｂサイトも表示されませんでした。表示されたのは無関係なＷｅｂサイトのみ。Ｙａｈｏｏ！はカテゴリー登録したＷｅｂサイトをひいきしているとは聞きましたし、そう思いますが、検索結果のクオリティーに問題がありますね。売上げばかり狙っていると唯一勝っている日本市場でも検索シェアとられちゃうよ？
<MTPages id="56">
<$MTPageBody templatize="all"$>
</MTPages>
説明不要かな。
ＷｅｂページのIDは「ログ」画面で確認可能
<div id="wrap">
<MTIf name="page" eq="home">
<p id="vi"><img src="img-home/v.jpg" alt="***" width="777" height="235" /></p>
<p id="messege"><img src="img-home/messege.gif" alt="***" width="519" height="40" /></p>
<MTElseIf name="page" eq="other">
<MTPages lastn="1">
<p id="vi"><img src="img-home/v-<$MTPageBasename$>.jpg" alt="<$MTPageTitle$>" width="777" height="150px" /></p>
</MTPages>
</MTIf>
<div id="contents">
メインページに
<MTSetVar name="page" value="home">
アーカイブテンプレートのウェブページに
<MTSetVar name="page" value="other">
タグを仕込み、セカンドページ以降のビジュアル画像の名前付けルールをＷｅｂページのファイル名と同じにすればＯＫ。オルトは、ページのタイトルが入ります。
もっと効率的な方法がありそうだけど、この方法は結構シンプルで使いやすい 気がする
メインページに
<MTSetVar name="page" value="home">
アーカイブテンプレートのウェブページに
<MTSetVar name="page" value="other">
仕込んで、各Ｗｅｂページに対応したタグを入れれば、そのページだけ特定のタグを表示させることができます。グループ化したい場合は、グループ化したいＷｅｂページに同じタグを付けてください。
まぁフォルダに分別して、そのフォルダー別にルールを縛るって言う方法もあるけどね
<MTIf name="page" eq="home">
<p id="visual01"><a name="top" id="top"><img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02"><img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
<MTElseIf name="page" eq="other">
<MTPageTags>
<MTPageIfTagged tag="carrecycle">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="carrecycleschool">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="iso14001">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="usedparts">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="kaitori">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="company">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="press">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="faq">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="map">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="otoiawase">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
<MTPageIfTagged tag="nagare">
<p id="visual01"><a name="top" id="top">
<img src="<mt:BlogUrl />img/top01.gif" alt="" width="900" height="12" /></a></p>
<div id="containerInner">
<p id="visual02">
<img src="<mt:BlogUrl />img/top02.jpg" alt="" width="900" height="268" /></p>
</MTPageIfTagged>
</MTPageTags>
</MTIf>
まずは、再構築ボタンを押して、再構築します。
ＭＴインストール直後は、Ｗｅｂサイトを構築するフォルダが作られていません。
再構築後、ホームページを格納するフォルダができているはずなので、そのなかにＷｅｂサイトで利用する画像をFTPソフトで画像をフォルダにアップロードする。
おおむね、これだけ知っていればいいだろう。的なタグを寄せ集めてヘッダーを作成しました。
まずはご覧下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<link href="<mt:BlogUrl />tag-format.css" rel="stylesheet" type="text/css" />
<link href="<mt:BlogUrl />common.css" rel="stylesheet" type="text/css" />
<link href="<mt:BlogUrl />initialaize.css" rel="stylesheet" type="text/css" />
<link href="<mt:BlogUrl />common.css" rel="stylesheet" type="text/css" />
<MTIf name="page" eq="home">
<meta name="keywords" content="島田,山形" />
<meta name="description" content="山形の島田です" />
<title>山形の島田ページ</title>
<link href="<mt:BlogUrl />home.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="<mt:BlogUrl />home.css" title="standard" />
<link rel="alternate stylesheet" type="text/css" href="<mt:BlogUrl />home-small.css" title="small" />
<link rel="alternate stylesheet" type="text/css" href="<mt:BlogUrl />home-big.css" title="big" />
<MTElseIf name="page" eq="other">
<meta name="keywords" content="<$MTPageKeywords$>" />
<meta name="description" content="<$MTPageExcerpt$>" />
<title>島田｜<$MTPageTitle$></title>
</MTIf>
<MTIf name="page" eq="home">
<link href="<mt:BlogUrl />home.css" rel="stylesheet" type="text/css" />
<MTElseIf name="page" eq="other">
<MTPageTags>
<MTPageIfTagged tag="column"><link href="<mt:BlogUrl />second.css" rel="stylesheet" type="text/css" /></MTPageIfTagged>
<MTPageIfTagged tag="nocolumn"><link href="<mt:BlogUrl />second02.css" rel="stylesheet" type="text/css" /></MTPageIfTagged>
</MTPageTags>
</MTIf>
<script type="text/javascript" src="<mt:BlogUrl />styleswitcher.js"></script>
<script type="text/javascript" src="<mt:BlogUrl />smartRollover.js"></script>
<link REL="stylesheet" type="text/css" HREF="<mt:BlogUrl />print.css" media="print">
</head>
<body>
<div id="head">
<h1><a href="<mt:BlogUrl />"><img src="<mt:BlogUrl />img-common/home.gif" alt="" width="300" height="28" /></a></h1>
<p><img src="<mt:BlogUrl />img-common/moji-title.gif" alt="文字サイズを変更できます" width="161" height="27" /><a href="javascript:void(0);" onclick="setActiveStyleSheet('big'); return false;"><img src="<mt:BlogUrl />img-common/moji-big.jpg" alt="文字を大サイズにします" width="23" height="27" /></a><a href="javascript:void(0);" onclick="setActiveStyleSheet('standard'); return false;"><img src="<mt:BlogUrl />img-common/moji-mid.jpg" alt="文字を中サイズにします" width="18" height="27" /></a><a href="javascript:void(0);" onclick="setActiveStyleSheet('small'); return false;"><img src="<mt:BlogUrl />img-common/moji-small.jpg" alt="文字を小サイズにします" width="20" height="27" /></a></p>
<ul id="globalnavi">
<li><a href="<mt:BlogUrl />"><img src="<mt:BlogUrl />img-common/01-off.jpg" alt="ホームへ戻る" width="133" height="77"/></a></li>
<li><a href="<mt:BlogUrl />koe.html"><img src="<mt:BlogUrl />img-common/02-off.jpg" alt="お客様の声" width="133" height="77"/></a></li>
<li><a href="<mt:BlogUrl />map.html"><img src="<mt:BlogUrl />img-common/03-off.jpg" alt="周辺地図" width="131" height="77"/></a></li>
<li><a href="<mt:BlogUrl />boshu.html"><img src="<mt:BlogUrl />img-common/04-off.jpg" alt="職員募集" width="132" height="77"/></a></li>
<li><a href="<mt:BlogUrl />vo.html"><img src="<mt:BlogUrl />img-common/05-off.jpg" alt="ボランティア募集" width="133" height="77"/></a></li>
<li><a href="<mt:BlogUrl />shiteki.html"><img src="<mt:BlogUrl />img-common/06-off.jpg" alt="ご指摘ご要望" width="138" height="77" border="0"/></a></li>
</ul>
</div>
解説は、次回にします
…っというのも、MTでＷｅｂサイトを作ってからCSS変更するのって大変なんですよ。ですから、小規模なＷｅｂサイトならすべてDWでもホームページビルダーでもいいから先にＷｅｂサイトを作成指定した方が遠回りなようで近道です。
ちなみに僕は５０ページ程度のＷｅｂサイトなら先に作り込んでしまって、納品前にMT化します。
作成するテンプレートは次の通り。
※インストール時からあるテンプレートは削除しないように！
インデックステンプレート
DWで作成したＷｅｂページのCSSを適当なテンプレート名を付けて保存してきます。
僕なら次の表のようなテンプレートを作成します。このあたりは、作成する人それぞれでしょうね。
既存のテンプレートは削除しないようにお願いします。
ちなみに、CSSを登録するときに背景画像の指定をしている場合、オーサリングソフトはおおむね相対指定になっているはずです。絶対指定の方が、安心できるかなぁと思いますので、相対指定の前に<mt:BlogUrl />を入力してください。<mt:BlogUrl />は、ブログを作成したときに指定したURLに変換されます。
| テンプレート名 | 出力ファイル名 |
| CSS:スタイルシートの初期化 | initialize.css |
| CSS:レイアウト | common.css |
| CSS:トップページ | home.css |
| CSS:セカンドページの書式設定 | second.css |
| css:印刷用CSS | print.css |
テンプレートモジュール
次のテンプレートモジュールを作成します。
どのページでも同じような内容ならテンプレートモジュール化してしまった方が効率的です。
分割しすぎるとワケ分からなくなりますけどね。
修正するテンプレート
僕が使っている初期化CSSはこんな感じ。
YAHOOのライブラリでダウンロードしてきたモノにimgへのスタイル追加したモノを使っておりまする。
では、また次回。
/* タグの初期化用CSS */
html{
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/* Yahoo!User Interface Libraryの初期化CSSを利用 */
body {color:#000;background:#FFF;margin:0;padding:0;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/* イメージをリンクした際に、囲い線がでないようにする */
a img {
border:0;
overflow: hidden;
}
※僕のＭＴ構築のメモ書き程度の記事です。
チラシの裏よりかは役に立ちます。。。と思う。
基本的に初心者でも更新できる
変なプラグインは使わない
※初心者が更新できなくなります
Ｗｅｂページ機能だけでＷｅｂサイトを構築
ブログ機能を使うと、記事が多くなりすぎて直感的に修正できなくなるためです。
ブログ機能も後付けできます。
マルチブログタグ未使用で、簡単設置
ＦＣＫエディタのアイコンをかわいくする方法
トップ１％様のブログに記事があったのでメモ。
ＦＣＫエディタのアメリカンコミック調のキャラクターをＤｏＣｏＭｏの絵文字に切り替えられます。
http://www.dakiny.com/archives/movable-type/movable_type_4_fckeditortypepad/
htacsessは奥が深い。。。まだまだ勉強が必要です。
具体例満載
http://coliss.com/articles/build-websites/operations/926.html
htacsesssのいろいろな使い方を紹介
http://www.shtml.jp/htaccess/redirect.html
htaccsessのちょっと変わった使い方を紹介
http://mikeneko.creator.club.ne.jp/~lab/web/htaccess/redirect.html
ちょっと興味深かったのでメモ
SSLを考えずに作られているページを、.htaccessだけの変更でSSL対応する方法をご紹介します。
もちろん、サーバがSSLに対応している必要はありますが…。
さらに.htaccessとmod_rewriteが入っている必要もあります。SSLページにしたいHTMLファイル(PHP等でも可)のあるディレクトリに.htaccessファイルを作成し、下の文を追加します。
携帯電話用ホームページを作成する場合、キャリアごとにホームページを作成するか、最大公約数的にどのキャリアの携帯で閲覧しても大丈夫なＷｅｂサイトを構築するかで迷っていませんか？
htaccsessって方法もあることを本日悟る。
分岐用CGI導入しなくてもいいんじゃねかな？
携帯電話を専用ページで飛ばしたい。この場合はHTTP_USER_AGENTで書くページに飛ばせばいいだろう。
RewriteEngine On RewriteCond %{HTTP_USER_AGENT} DoCoMo [OR] RewriteCond %{HTTP_USER_AGENT} J-PHONE [OR] RewriteCond %{HTTP_USER_AGENT} UP\.Browser RewriteRule ^/$ i/index.html [L] 引用元 http://nai.homelinux.net/apache_rewrite.html
モバイルサイトを簡単に閲覧するためには、グーのサービスを利用すると吉ですよ。
天下のNTTさんが運営しているだけあって、先進的なサービスがあるのね。
見直したｗ
っというカテゴリーを作ってみました。
ムーバブルタイプでＷｅｂサイトを構築しますってなった場合、書店で販売しているムーバブルタイプのカスタマイズの本ってちょっと使いづらいんですよね。お客様が求めているＷｅｂサイトってのはもっとシンプルなものが多いような気がします。
んなわけで、ムーバブルタイプで構築する超簡単なＷｅｂサイトの構築手順をご紹介します。（まぁ僕のメモとして残しておきたいわけですけどね。）我流の構築方法なので、つっこみどこ満載ですが閲覧してくださっている方の参考になれば幸いです。
ムーバブルタイプがインストールされた状態からスタートです
以上！なんて簡単なＷｅｂサイトでしょうｗ
中小企業のＷｅｂサイトなんて、おおむねこのレベルで満足してくれるお客様が多い気がしますよ。
まぁ僕の営業努力が足りていないだけかもしれませんが…。。。。
ぼちぼち更新してきますノシ
ロールオーバーするのに、変なCSSくんだりＤＷの汚いソースで我慢する必要がなくなりました（たぶん）
ロールオーバーする手順はもっさかんたん。
手順
１．表示しておく画像と、差し替える（ロールオーバーさせる）画像を作る。
画像の名前に「_on」と「_off」ってのを拡張子前に追記。
２．ヘッダー内にJavaスクリプトのライブラリを読み込ませるコードを貼り付ける。
以上！
ライブラリや詳細については、トラックバックを参考してください。
いいソフトです。すばらしい！ありがとうございます。へこへこ。
ＭＴにFCKエディタを３つの簡単ステップでインストールしてみますよ
ムーバブルタイプのエディタ強化かんたんにしちゃいましょう。
（カスタマイズってなると話が違うんだけどね ちょっと面倒です）
手順１：男なら黙ってダウンロード
次のＷｅｂサイトから、MT-Plugin-FCKeditor-1.2.ja_v2.zipをダウンロードしてください。これがムーバブルタイプに簡単にFCKエディタをインストールするファーストステップになります。
http://sourceforge.jp/projects/fckeditor/releases/
手順２：ファイルを解凍し、アップロード
FCKエディタのファイルを圧縮した「MT-Plugin-FCKeditor-1.2.ja_v2.zip」がダウンロードできたはずです。それを解凍し、「mt-static」「plugins」のフォルダをムーバブルタイプをインストールしたフォルダにアップロードしてください。ＦＴＰソフトが「上書きしちゃうよ？」と聞いてくるのでＯＫボタンを押してください。
なお、補足で画像をアップロードしていますが、僕はmtのインストール先を「system」ってフォルダにしています。さくらインターネットさんやロリポップさんのムーバブルタイプ標準インストールマニュアルに従ってインストールした場合「mt」になっているはずです。その場合は、「mt」フォルダに、「mt-static」「plugins」フォルダをぶち込んでください。
手順３：mt-config.cgiに呪文を記述ｗ
ムーバブルタイプをインストールしてるフォルダから「mt-config.cgi」をダウンロードして、下記の呪文を追記します。んで、「mt-config.cgi」を同じフォルダにアップロードして上書きしてください。
これにて、ムーバブルタイプにＦＣＫエディタがインストールされました。簡単簡単。
#======== RichTextEditor =======================
RichTextEditor FCKeditor
次のサイトを参考にスクリプトを書いてみました。
未だにコンストラクタの働きが良く理解できない。。。
Ｇｏｏｇｌｅマップスクリプトのサンプル
<script src="http://maps.google.com/maps?file=api&v=2&key=■ＧｏｏｇｌｅからDL■" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("■googlemap■"));//divタグとおなじidを書く
map.setCenter(new GLatLng(■緯度■,■軽度■), ■15■); //行末の数字を変更すると地図の縮尺が変わります
//マーカーを追加
var marker = new GMarker(new GLatLng(■緯度■,■軽度■));
map.addOverlay(marker);
//マップコントローラを付ける
map.addControl(new GLargeMapControl());
//マップオーバービューコントローラを付ける
var miniMap=new GOverviewMapControl(new GSize(■200■,■150■));
map.addControl(miniMap);
}
}
//]]>
</script>
<!--↑ｈｔｍｌヘッダーに入れる-->
<body onload="load()" onunload="GUnload()">
<div id="■googlemap■">地図を表示中です。しばらくお待ちください。</div>
<!--↑CSSで縦と横の幅を設定して下さい その大きさで地図が表示されます-->
■■で囲っている部分を変更してお使い下さい。
