CSSで半透明にさせる。(クロスブラウザ)

以下を記述。

filter:alpha(opacity=60);/*IE用*/ -moz-opacity:0.6;/*昔のFirefox用*/ opacity:0.6;/*CSS3*/

疑似クラス,hoverなどをaタグ以外でも使えるようにする。

(1)以下のサイトでcsshover.htcをダウンロード
http://peterned.home.xs4all.nl/csshover.html#changes

(2)任意の場所にアップロード
(3)cssに以下のように記述(パスは実行するhtmlファイルからcsshover.htcへのパス)

body { behavior:url("csshover.htc"); }
そのほか動かない場合の対処などは以下のサイトで
http://d.hatena.ne.jp/sa90/20080403/1207653253

(4)また普通の要素にマウスポインタを表示させたい時は以下の
CSSを加える。
<style> cursor:pointer;/*リンクポインタが表示される*/ </style>
<参考URL>
http://www.htmq.com/style/cursor.shtml

CSSだけでギャラリーを作る。マウスオーバーで画像切り替え

画像のマウスオーバーで、離れた位置に拡大画像を表示する

clear:both;やclearfixの代わりにoverflowでfloatの周り込みの解除する。

floatの周り込みの解除方法。
overflowを使うのが今の所スマートな感じがする。


.overflow{ _zoom: 1;/*IE6用*/ overflow: hidden; }

以上の記述をfloatを解除したい要素に指定する。

clear:borth;は空divなどの余計な空要素を作るし
clearfixは効かない事も多いのでこれが簡潔でいいかも。

googleアナリティクスの使い方リンク集

googleアナリティクスの使い方リンク集

衣袋教授のGoogleアナリティクス入門講座

ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方

 「jsfiddle」
ブログに実行したスクリプトと結果がでるので便利。
β版もこれからでるそうなので使い方はこれから探る。

<参考サイト>
http://kachibito.net/web-service/how-to-join-jsfiddle.html

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)
<参考サイト>
 http://coliss.com/articles/build-websites/operation/work/tutorial-fullscreen-slit-slider-by-codrops.html
<元サイト>
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

MTのサイト内検索設置

 
 「MTのサイト内検索設置」最速でシンプルなAjax検索。

(1)blog_ajax_json_search.zip (www watchさんより)をダウンロード。

• Ajax_search_form.txt
• head_js.txt
• search_data.txt
• index.html
• js/
  • blog_ajax_json_search.js
  • prototype.js
• css/
  • sample.css
• img/
  • icon_arrow.gif
  • loader.gif

以上のファイルが入っている。
この先の説明は下記サイトへ
 www watch

※1.注意「Ajax_search_form.txt」ファイルの記述がそのままだと
上手く行かなかったのでし直します。
<MTEntries lastn="0">  →  <MTEntries lastn="0" include_blogs="all">

<?xml version="1.0" encoding="<$MTPublishCharset$>"?> { data:[ <MTEntries lastn="0" include_blogs="all">{ title:"<$MTEntryTitle remove_html="1" encode_js="1"$>" ,link:"<$MTEntryLink$>" ,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>" },</MTEntries> {title:"",link:"",body:""} ] }

※2 .またこの検索はprototype.jsを使っているのでjQueryとコンフリクトしないように
記述を加える必要がある。以下参考
prototype.js jquery コンフリクトを4行で解決する。

prototype.js jquery コンフリクトを4行で解決する。

prototype.jsと jqueryは一緒に使うとコンフリクトしてどちらかが
動かなくなります。その解決方法。

(1)読み込ませる順番を変える。
1：prototype.js
2：prototype.jsのプラグイン
3：jQuery
4：jQueryのプラグイン

(2)以下のスクリプト4行を上記2と3の間に入れる。
<script type="text/javascript"> jQuery.noConflict()(function($){ var j$ = jQuery; </script>
完了。

<例↓>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict()(function($){ var j$ = jQuery; </script> <script type="text/javascript" src="js/accordion.js"></script>

<参考サイト>
jQueryとprototype.jsを共存させる方法

MT 月別アーカイブリスト カウント付きの記述

 

  <参考URL>
「MTArchiveList」MTタグリファレンス
「MTArchiveCount」 MTタグリファレンス

MT すべてのブログからの記事の一覧を最新順に表示

<参考URL>
http://www.css-lecture.com/log/movable-type/015.html

jQueryPlugin「ColorBox」WebページやHTML、AJAX表示やインラインコンテンツにも対応

jQueryPlugin「ColorBox」WebページやHTML、AJAX表示やインラインコンテンツにも対応、5種類のデザインがある(2012/6/6現在)。

<参考URL>
http://www.css-lecture.com/log/javascript/031.html

Movable Typeの画像アップロード時にリサイズできる「UploadImageResizerプラグイン」

このプラグインをMTのpluginsフォルダに入れるだけ。
アップロード時に「アップロード画像オプション」にチェックを入れると
上記のような画面が出てくるのでアップロードする画像の大きさや
アスペクト比の保持などを設定してアプロードする。

<参考サイト>
http://www.koikikukan.com/archives/2011/11/16-005555.php

カスタムフィールドで画像のサムネール生成

カスタムフィールドで制作時に生成した
テンプレートタグを下記コードに入れる。

<MTIf tag="テンプレートタグ">
<MTテンプレートタグAsset>
<a href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL width="130"$>" /></a>
</MTテンプレートタグAsset>
</MTIf>

※ <img src="<$MTAssetThumbnailURL width="130"$>/>を使うと横130pxのサムネイル画像のURLが出力され画像名もアップロード時のものから変わってしまう。
アップロード画像のそのままのURL表示は<img src="<$MTAssetURL$>" /> を使う。

<参考URL>
http://www.movabletype.jp/blog/custom-field_view-image.html
http://2244.jp/daily/2008/02/26/post_352/

 http://www.movabletype.jp/documentation/mt5/custom-fields/

カスタムフィールドの使用方法