【 相互リンクWeb 】

• サイト公開 ： 2005/09/01


• 主旨 ： Yomi-Searchを利用したHTML表示の相互リンクサイト


• 内容 ： アクセスアップやSEO対策といった目的のために相互リンクサイトを作る方は多いと思います。相互リンクサイトを作るのに、最も有益なツールと思われるYomi-Searchを使って相互リンクサイトを作ってみました。


• 感想 ： Yomi-Searchをダウンロードして設定するだけなら簡単ですが、多くの相互リンクサイトのように、カスタマイズするのは今の自分には少し難しい。CGI という言語をまったく分かっていないので少し勉強しようかな！？


• 参考サイト ： yomi-search FAN!
  

1. まず、POST MAILをダウンロードします。
2. ダウンロードしたファイルを解凍すると、7つのファイルができます。
   postmail.cgi
   postmail.html
   tmp_conf.html
   tmp_err1.html
   tmp_err2.html
   tmp_thx.html
   jcode.pl
3. また、mime plsでmimew.plもダウンロードします。
4. postmail.cgiを編集します。
   私が編集したところは、次の4ヶ所です（メールプログラムまでパスはXREAのパスです）。
   $mailprog = ' /usr/sbin/sendmail ' ;
   $mailto = ' 自分のメールアドレス ' ;
   $subject = ' 好きなメールタイトル ' ;
   $back = ' メール送信後に戻るページのURL ;
5. 編集が終わったら、8つのファイルをサーバーにアップし、「postmail.cgi」、「jcode.pl 」、「mimew.pl」のパーミッションを変更します。
6. 動作確認（http://〜〜/postmail/postmail.cgi?mode=check へアクセス）をし、メッセージが出たらインストール完了です！
7. あとは、htmlファイルを自分のサイトにあった感じに変更すれば、違和感の無いフォームメールの出来上がり！？です。

【感想】
思ったよりPOST MAILの設置は簡単でした。また、各ページがテンプレート形式なので、自分のサイトにあったデザインにページを変更できるのが嬉しいです。

オールカラー HTMLポケットリファレンス

出版社：技術評論社

私が初めて買ったHTMLの本です。

HTML初心者の私は、まずはあまり厚くない本で、そこそこ詳しく書いてある本を探しました。ぱっと見、ちょうど良さそうに見えた本が、HTMLポケットリファレンスでした。

今まで、この本とインターネットの情報だけで、HTMLやCSSはやってこれているので、初心者向きの本かな？と思っています。最初は、本を見ながら、タグを打つことが多かったですが、最近では本を見る回数も減ってきました。

本の説明形態は、やりたい内容、タグの基本形、タグ説明といった感じで書いてあります。初心者には、良い本かなと思いますが、どうですかね！？

1. STAGGER[nation]で「FilterCategories」をダウンロードします。
2. ダウンロードしたファイルを解凍すると、「FilterCategories.pl」ファイルができます。
   これを「plugins」ディレクトリィにアップロードします。
3. 以下のようにすると、カテゴリ1、2、3が非表示になります。
   

   <MTCategories show_empty="1">
   <MTFilterCategories exclude="カテゴリ1|カテゴリ2|カテゴリ3">
   <a href="<$MTCategoryArchiveLink$>">
   <$MTCategoryLabel$>(<$MTCategoryCount$>)</a/>
   </MTFilterCategories>
   </MTCategories>

   
   「exclude」を「include」に変更すると、逆に、カテゴリ1、2、3のみ表示します。

【参考サイト】
・MovableTypeを攻略せよ！
・CROSSBREED
参考にさせて頂きました。

しかし、「＜」と「＞」を表示する特殊記号があり、これを使ってHTMLを表示させていることを知りました。また、「lt」は「less than」、「gt」は「greater than」の略のようです（参考サイト参照）。

【参考サイト】
雑学・コンピュータ関連用語集

【プチ日記】
今日はしなさんがコメントしてくださり、タグ表示に特殊記号を使っていることを知りました。

&copy

■著作権表示

• 最小限の表示方法
  次の3つを表示させるのが最小限の表示方法です。
  ・著作権記号→「©」や「(c)」と書きます。
  ・年号→2005や「2004-2005」などと書きます。
  ・著作者名→管理人名やサイト名を書くことが多いです。

  そして、「著作権マーク©.」・「年号」・「著作者名」の順に並べます。
  つまり、「© 2005 MovableType 初心者講座」となります。

• お好みで追加
  ・Copyright→著作権を意味します。
  ・All Rights Reserved.→「無断転記・転用の禁止」を意味します。

  私はこんな感じで使っています↓
  Copyright© 2005 MovableType 初心者講座. All Rights Reserved.

• ファイルのアップロード手順
1. 次のソースをTeraPadなどを用いて、「cutfirstchar.pl」というファイル名をつけて保存します。
   

   package MT::Plugin::CutFirstChar; use strict; use MT; use MT::Template::Context; use MT::Plugin; my $plugin = MT::Plugin->new; $plugin->name("Cut First Char 0.01"); $plugin->description('Cut first n char from MTtag.'); MT->add_plugin($plugin); MT::Template::Context->add_global_filter(cutfirstchar => \&cutfirstchar); sub cutfirstchar { my ($text, $arg, $ctx) = @_; $text = substr $text, $arg; $text; } 1;

   
   
2. 保存したファイルを「plugins」フォルダにアップします。
   アップすればインストール完了です。



• 「cutfirstchar」属性の使い方
  1. 管理画面においては、従来通り数字を使って、並べたい順に並べます。
     001カテゴリA
     002カテゴリB
     003カテゴリC
  
  
  
  2. カテゴリ名を表示させるタグに「cutfirstchar="n"」の属性を付け加えます。
     今の場合は、「001」、「002」・・・と3桁の数字を使っているのでcutfirstchar="3"」です。例えば、<$MTCategoryLabel cutfirstchar="3"$>や<$MTArchiveTitle cutfirstchar="3"$>のように使います。
  
  
  <参考サイト＞
  The blog of H.Fujimoto←このプラグインを作ったサイトさんです。 ]]> 2005-10-18T11:13:25Z 2005-07-01T12:57:28Z tag:www.wareteki.com,2005:/movabletype//16.63 2005-07-01T12:57:28Z
  リンクに関するHTMLタグについてです。...
  woda http://www.wareteki.com/ wareteki1@yahoo.co.jp 5.HTML/CSS リンクに関するHTMLタグについてです。
  1. リンクの基本形 <a href="リンクしたいURL">テキストor画像</a> 【テキストリンクの場合】
     例えば、当サイトのリンク「MovableType 初心者講座」は次のようになります。
     <a href="http://www.wareteki.com/movabletype/">MovableType 初心者講座</a>
     【画像リンクの場合】
     人気blogランキングを例にとると次のようになります。
     <a href="http://blog.with2.net/"> <img src="http://www.wareteki.com/movabletype/images/blogranking1.gif" border="0"> </a>
  
  

• テキストの回り込み
  <img src="画像URL" align="回り込み位置"> ※回り込み位置：テキストが回り込む位置（画像に対するテキストの並び）




画像とテキストの左右の関係
left	画像が左、テキストが右に表示
right	画像が右、テキストが左に表示
画像とテキストの上揃え・中央揃え・下揃え
top	画像・テキストが上揃え
middle [center]	画像・テキストが中央揃え
bottom	画像・テキストが下揃え
その他の位置揃え
texttop	行の中で最も背の高い位置のテキストと上揃え
absmiddle	行の中で最も背の高い画像にたいして中央揃え
absbottom	テキストの下端にあわせる
baseline	テキストのベースラインにあわせる



• テキストの回り込み解除 <br clear="解除属性">

属性値	回り込み解除	次のテキストの位置	条件
none	なし	通常改行	なし
left	あり	画像の下端	「align="left"」使用時
right	あり	画像の下端	「align="right"」使用時
all	あり	画像の下端	なし



• 画像とテキストの間の余白設定 <img src="画像URL align="回り込み位置" vspace="上下余白" hspace="左右余白">

1. 画像表示の基本形
   まず、画像を表示するためのHTMLの基本形を覚えます。このタグは終了タグがありません。次のようになります。
   <img src="表示したいファイルのURL"> また、幅width、高さheightを用いて図形のサイズを指定します。ここでは「width="88"」、「height="31"」と設定します。すると、以下のタグになり、画像も次のように表示されます。
<img　src="http://www.wareteki.com/movabletype/images/blogranking1.gif" width="88" height="31">



2. 代替テキスト
   alt属性はイメージファイルが何らかのトラブルで表示できない場合にテキストを変わりに表示させるタグです。通常はサイト名や商品名などを入力します。「alt="代替テキスト"」をimgタグ内に記述します。ここでは、「alt="人気blogランキング"」と設定してみます。すると、次のようになります。
   
   



3. 画像表示の境界線指定
   画像にリンクをする際などに「border="0"」がないと境界線が目立ちます。実際に、「border="0"」の有無で下記のように違います。
   
   
   
   

http://api.my.yahoo.com/RPC2
http://bitacoras.net/ping/
http://blog.goo.ne.jp/XMLRPC
http://blog.rank10.net/update/ping.cgi
http://blogdb.jp/xmlrpc
http://blogstyle.jp/xmlrpc/
http://bulkfeeds.net/rpc
http://coreblog.org/ping/
http://jugem.jp/?mode=NEWENTRY
http://ping.amagle.com/
http://ping.blo.gs/
http://ping.bloggers.jp/rpc/
http://ping.blogmura.jp/rpc/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.exblog.jp/xmlrpc
http://ping.gpost.info/xmlrpc
http://ping.myblog.jp
http://ping.rootblog.com/rpc.php
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://rpc.atblogs.com/
http://rpc.bloghackers.net/newsoku
http://rpc.blogrolling.com/pinger/
http://rpc.pingomatic.com/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/
http://rpc.weblogs.com/RPC2
http://serennz.cool.ne.jp/sblog/rep.cgi
http://tb.threetree.jp/
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://www.weblogues.com/RPC/
http://xmlrpc.blogg.de/

探せば他にもあると思います。

■私のMovable Type履歴
6月になり、Movable Typeでサイト作成することを決心。

• 6/4：Movable Typeの参考書をネットで発注。
• 6/8：2冊の参考書が届き読み始める。
• 6/10：Movable Typeをダウンロード購入する。
• 6/11〜19：作るサイトを考え、ちょこちょこMTをいじっていました。
  最初はこのサイトではなく、違うサイトを作ろうとしていましたが、MT自身を勉強するのも時間がかかったのでまず覚書としてこのサイトを作成することに決めました。
• 6/20：サイト作成開始
• 6/28：サイト公開開始（検索エンジン登録開始）
• 7/4：検索エンジンで検索されはじめる（少しずつ）。
• 7/23：サイト公開を開始して約1ヶ月、ユニークビジター数は10〜30人/日

Tableタグ以外にも内容を簡潔に見せるタグがあります。それがリストタグです。このタグは編集画面でも、ごちゃごちゃせず、非常に気にいっています。

HTML中心でサイト作成しているころは、そんなことも考えず、ひたすらホームページビルダーで表の中に表を入れてみたいな複雑な構造にしたりしていましたが。今は表作成する場合もなるべくCSSを使い、表の代わりに、リストタグで十分ならリストタグを使うようにしています。

そのうち、リストタグについても書きます。