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>


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

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