viviのホームページ作成奮闘記

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  

シックスアパートが出している、Movable Typeの公式タグの本です。
MTを構築する際には重宝します。  

HTML／CSSのチェックツール。
これに合格すればとりあえずはオッケー（?!）

■HTMLチェックツール
http://validator.w3.org/

■文法チェッカー
http://www.esitenet.com/htmllint/htmllint.html

■CSS検証ツール
http://jigsaw.w3.org/css-validator/  

あると便利チェックツール。
自サイトの目安に…。

■キーワードアドバイスツール
オーバーチュア社が提供するツールでキーワード分析のために利用するツールです。
過去１ヶ月間に検索エンジンで実際に使われた検索語の検索回数が表示されます。

■キーワードアドバイスツール
http://inventory.overture.com/d/searchinventory/suggestion/?mkt=jp

■ページ内リンク数チェックツール
http://www.su-jine.com/sujine_seo_included_links.php

Googleリンク数チェックツール
http://www.su-jine.com/sujine_seo_backwardlinks.php

  

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則

こちら、Web標準のサイト作成に大変役立つ書籍です。
いつも片手にもっております（笑）。

是非是非！！おすすめです。  

IE6で、floatで指定した値と同じ方向にmarginの指定をすると、
指定値の倍程度になってしまうバグがあります。非常にやっかいですね…。

IE系のブラウザはバグが結構ありますが、このバグは代表的なバグでもあります。
対処方法は、

・marginの代わりにpaddingを使う
・親要素でpaddingを取る
・display: inline;を指定する　　　　　　等々…。

IE8はどうなのかな…。
またご報告します。

  

携帯電話向け変換プログラム「MT4i／MovableType用」

http://www.hazama.nu/pukiwiki/index.php?MT4i

タイトル通り、MTの情報を携帯サイトとして変換してくれるプラグインです。
これを、導入すれば、記事がすぐさま携帯でも閲覧出来ます。

  

.htaccessファイルを使う機会が多い方にこれは便利！！

■「.htaccess Editor」
http://www.htaccesseditor.com/

ベーシック認証やファイル一覧の拒否、エラーページの設定など
ホームページの完成度をさらに高めることができるでしょう。

よく利用させてもらってます。  

MTは複数のブログを作れるので、メインサイト用、サブサイト用とブログの更新情報を１つにまとめて表示できたら便利だ。と思われた方いませんか？？

そんな機能あります！

つまり
「ブログAにブログBとブログCの更新情報を反映させる」
ことが可能です。

MultiBlogというプラグインを使います。
※MT4.0以降は標準で搭載されてます。

１）ブログごとに表示する場合

<MTMultiBlog include_blogs="1,2">

<MTEntries lastn="5">

　　・・・

　MTEntriesの内容

　　・・・

</MTEntries>

</MTMultiBlog>


２）ブログをまぜこぜにして一緒に表示する場合

<MTMultiBlogEntries include_blogs="1,2" lastn="10">


　　・・・

　MTEntriesの内容

　　・・・

</MTMultiBlogEntries>

と、こんな感じです。
  

CSSのみでロールオーバーするやりかたはよくみかけますが、ちょっと高度な一面も…。
そこでJavaScriptでやるロールオーバーの方法（しかも簡単!）がありますのでご紹介します。

////////////////////////////////////////////////////////////////////////
# function smartRollover() {
# if(document.getElementsByTagName) {
# var images = document.getElementsByTagName("img");
# for(var i=0; i < images.length; i++) {
# if(images[i].getAttribute("src").match("_off."))
# {
# images[i].onmouseover = function() {
# this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
# }
# images[i].onmouseout = function() {
# this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
# }
# }
# }
# }
# }
# if(window.addEventListener) {
# window.addEventListener("load", smartRollover, false);
# }
# else if(window.attachEvent) {
# window.attachEvent("onload", smartRollover);
////////////////////////////////////////////////////////////////////////

上記ソースを◯◯.jsとして保存。そして、外部ファイルとして読み込ませます。
↓
////////////////////////////////////////////////////////////////////////
#<script type="text/javascript" src="◯◯.js"></script>
////////////////////////////////////////////////////////////////////////

★画像を用意します。
通常時の画像と、ロールオーバー時の画像を別々で用意して、ファイル名の最後に「_on」「_off」とつけます。
１）●●_on.gif
２）●●_off.gif

↓
例）<a href="/"><img src="./●●_off.gif" alt="●●●" /></a>


どうでしょう？？できましたか？
複雑なコードが多いですが、これはシンプルで使いやすいです。
是非参考にしてみて下さい。

※使用に関しては自己責任でお願いします。
  

ユーザビリティとは

ユーザビリティとは、「使いやすさ」のことです。「ある利用者が、ある目的を達成するときの効果、効率、満足感」という定義もあります。使いにくければ、製品を利用したときの作業効率や、主観的な満足感が低いというのは、実感できるのではないでしょうか。技術の進歩により、パソコンにも、携帯電話にも、次々と新しい機能が加わり、多機能化する傾向にあります。確かに多機能により便利になることも多いのですが、その反面、操作が複雑になり、使い方を理解するのに時間がかかるなどの問題を生じがちです。情報機器、情報システムは用途や使い方が非常に多様であるため、単機能の道具や製品に比べて、どうしても使い方が難しくなりやすい。

アクセシビリティとは

「アクセシビリティ」とは、高齢者や障害者などを含むできるかぎり多くの人々が、使えるかどうかもしくは使いやすいかどうかを意味します。最初は、建築物や交通機関などのアクセシビリティが問題とされていましたが、現在ではパソコンや電話機の様な情報機器、さらにそれらを使用して得られるコンテンツなど、広い範囲にわたりアクセシビリティが考慮されています。

詳しくは
富士通／ユーザビリティとアクセシビリティ  

SEOやSEMの本当の意味ご存知ですか？

Webサイトが数多く開設されている現在、自分が目的としている情報を探し出すのにも一苦労ですよね。
自分が求める情報をより早く、より正確に探したい。
そんなニーズを満たすため、ポータルサイトには「検索エンジン」サービスが搭載されるようになりました。

検索エンジンの検索結果ページから訪れたユーザーは、その分野に関心を持って訪問している可能性が高く、優良な“見込み客”であることがサイト利用者の行動分析で分かってきています。
そのため、検索エンジンは広告媒体として積極的に活用されるようになり、検索サイトからより多くの潜在ユーザーを集めることが、インターネットビジネスにとって重要なマーケティング要素なのです。

それが、
検索エンジンマーケティング（Search Engine Marketing - SEM)
であり、
その手法のひとつである
検索エンジン最適化（Search Engine Optimization - SEO)
というわけです。

また余談ですが、検索を上位にするものはSEOという認識の方が大多数ですが
本当はそれは「上位表示」の技術です。SEOとは全く違います。
つまり「SEO対策」＝「上位表示」ではありません。  

emoddyというプラグインです。
MTの記事で絵文字が使える優れものです！
ご存知無い方は使ってみて下さい。

http://css-happylife.com/log/movabletype-plugin/000727.shtml
ここからダウンロードできます。

  

SEO/SEMでも少し話題に触れたXHTMLについてです。
XHTML正しく記述しないとXHTMLのメリットを享受できません。
そもそも正確に記述することが求められていることが前提にあります。
そこで、正しい記述を行うための検証方法を紹介します。広く知れ渡っている方法なので、
ご存知の方もたくさんいらっしゃると思います。また、検証はあくまでも目安でしかないが、
案件によってはこれらをクリアすることが品質基準となることもあります。

■W3Cの検証サービス
http://validator.w3.org/
■Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
■JChecker　（MAC）
http://www.artman21.com/old_product/jchecker/index.html
■reamweaverで構文を確認
メニューバーの［ファイル］→［ページのチェック］→［マークアップのバリデート］

  

デザインは見た目でいいか悪いか（好きか嫌いか）が分かりますが、
ソースコードはやはりそう簡単には理解できないものですね。

web標準が浸透し、多くの企業がそれに準拠した形でのコーディングを
施すようになってきましたが、cssとtableをぐちゃぐちゃに書いている
ソースコードもまだまだあります。
（みていると最近リニューアルしたサイトをみてそういったつくりをしているという
ところもあるようですね。）

すぐ判別がつかない人のために、こんな事をやってみると
きれいにつくってあるかどうかよくわかります。

firefoxの場合
表示→スタイルシート→スタイルシートを使用しない
にしてみて下さい。

どうでしょう？？
左部分に下に一列に並びましたか？
これが100%の判断基準にはなりませんが、
左部分に下に一列に並んだサイトは「比較的」に
web標準などを意識した作りになっているはずです。

これが全てではありませんが、10あるうちの1つとして
試験してみてください。