町家カフェ・ホームページ制作・京都　ダバダバ tag:dabadaba.jp,2010-01-27://4 2011-06-18T05:22:00Z dabadabaは町家カフェとwebデザイン（ホームページ制作）やそれに伴う印刷物(紙媒体)、ロゴ、写真撮影、イラストレーション等トータルにプロデュースするナカガワ イサム（中川 勇）によるユニットです。 Movable Type 5.01 画面のスクロールに合わせて画像を読み込むjQuery tag:dabadaba.jp,2011://4.886 2011-06-18T05:19:11Z 2011-06-18T05:22:00Z このjQueryプラグイン「Lazy Load Plugin for jQuer... dabadaba このjQueryプラグイン「Lazy Load Plugin for jQuery」はディスプレイで表示されている分だけ画像を読み込むというもの。
画像はスクロールにあわせて都度読み込む、つまり無駄な画像読み込み時間が減る分、ページ表示速度向上を実現。

Lazy Load Plugin for jQuery

]]> WordPress プラグイン Add Lightbox tag:dabadaba.jp,2011://4.466 2011-01-28T15:19:28Z 2011-01-28T15:25:47Z WordPressで画像のポップアップに lightboxを使う場合、 「Add... dabadaba WordPressで画像のポップアップに lightboxを使う場合、
「Add Lightbox」 プラグインを利用すれば、投稿記事（ページ）内にある
a タグに内包された img タグを判別し、自動的に a タグに rel="lightbox" を追記してくれます。

このプラグインの rel="lightbox" 部分を改造すれば、 highslide に対応させたり、
その他のlightbox系画像ポップアップにも利用することができます。

このプラグインは、プラグインを有効化すれば、過去の記事も含めて
全ての記事に反映されるます。

プラグインを無効にすると、rel="lightbox" が消えるので、画像ポップアップを
lightbox以外のものに変更する場合も、一つずつ修正する手間がかかりません。

WordPress3.0.4でも動作しました。

プラグインの導入方法は、

「Add Lightbox」 プラグインをダウンロードして、有効化するだけです。

]]> css3ドロップシャドウ tag:dabadaba.jp,2010://4.427 2010-12-18T02:47:12Z 2010-12-18T02:48:47Z css3ドロップシャドウ -moz-box-shadow: 0px 2px 5p... dabadaba css3ドロップシャドウ

-moz-box-shadow: 0px 2px 5px #ccc;
-webkit-box-shadow: 0px 2px 5px #ccc;
box-shadow: 0px 2px 5px #ccc;/*horizontal vertical blur*/

]]> macで.htaccsess"."で始まるファイル表示 tag:dabadaba.jp,2010://4.399 2010-11-17T01:35:51Z 2010-11-17T01:40:07Z macで.htaccsess"."で始まるファイルが見えなくて表示させたいとき。... dabadaba macで.htaccsess"."で始まるファイルが見えなくて表示させたいとき。
「hiddenfiles」隠しファイルの表示/非表示を切り替えるウィジェット。

http://www.apple.com/downloads/dashboard/developer/hiddenfiles.html

]]> 特定カテゴリー別に表示内容を変える tag:dabadaba.jp,2010://4.386 2010-11-06T05:57:02Z 2010-11-13T01:54:50Z movabletypeカテゴリーテンプレートで、特定のカテゴリー別に表示させたい... dabadaba movabletype
カテゴリーテンプレートで、
特定のカテゴリー別に表示させたい内容を変えたい場合

<MTIfCategory name="カテゴリー1">
カテゴリ1に表示する内容
<MTElse>
<MTIfCategory name="カテゴリ2">
カテゴリ2に表示する内容
<MTElse>
<MTIfCategory name="カテゴリ3">
カテゴリ3に表示する内容
<MTElse>
カテゴリ1～3に該当しない場合の内容
</MTElse>
</MTIfCategory>

</MTElse>
</MTIfCategory>

</MTElse>
</MTIfCategory>
]]> 日菜設計室様 tag:dabadaba.jp,2010://4.385 2010-11-05T15:20:23Z 2010-11-05T15:50:49Z 日菜設計室様のホームページリニューアル制作を担当させていただきました。壬生の京... dabadaba 日菜設計室様 日菜設計室様のホームページリニューアル制作を担当させていただきました。壬生の京町家の素敵な事務所に伺ってお話しさせていただきました。初対面なのにずっと前から知っていたような素敵な雰囲気の方です。

日菜設計室様〜一級建築士事務所〜
]]> ブログ(Movable Type)をCMSとして導入してカスタマイズしました。お客様自身で更新可能な生きたサイト運営をしていただけます。

]]> MTIfNonEmptyタグで条件分岐 tag:dabadaba.jp,2010://4.374 2010-10-19T11:43:29Z 2010-11-13T01:56:45Z 「条件分岐するコンテンツを作る」●MTタグで条件分岐--------------... dabadaba 「条件分岐するコンテンツを作る」


●MTタグで条件分岐

-----------------------ソースここから-----------------------------
<MTEntryIfExtended>
<a href="<$MTEntryLink$>#<$MTEntryID$>">続きを読む</a>
<MTElse> 
この記事はここまで 
</MTElse> 
</MTEntryIfExtended>
-----------------------ソースここまで-----------------------------


●<MTIfNonEmpty> タグを使いこなす

<MTIfNonEmpty>タグは少し特殊な条件タグです。このタグには「tag」というアトリビュートが必須で、そこで指定された変数タグに一文字でもなにか値があるかどうかを判定します。実際の利用例は以下のようになります。

-----------------------ソースここから-----------------------------
<MTIfNonEmpty tag="値の有る無しを設定できる変数タグ">
tagアトリビュートで指定したタグに値がある時のみ表示するコンテンツ
<MTElse>tagアトリビュートで指定したタグに値が無い時のみ表示するコンテンツ</MTElse>
</MTIfNonEmpty>
-----------------------ソースここまで-----------------------------

○例1：カテゴリーが指定されている場合のみカテゴリー名を表示する

-----------------------ソースここから-----------------------------
<MTEntries>
<MTIfNonEmpty tag="MTEntryCategory">
<$MTEntryCategory$>
<MTElse>カテゴリーなし</MTElse>
</MTIfNonEmpty>
</MTEntries> 
-----------------------ソースここまで-----------------------------

○例2：最新10件のエントリーの中で、任意のエントリーにだけ new マークをつける

-----------------------ソースここから-----------------------------
<ul><MTEntries lastn="10">
<MTIfNonEmpty tag="MTEntryKeywords">
<li class="new">
　 <MTElse>
<li class="normal">
</MTElse>
　</MTIfNonEmpty>
　<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a>
　</li>
</MTEntries></ul>
-----------------------ソースここまで-----------------------------


-----------------------ソースここから-----------------------------
li.new {
padding-left: 20px; /* 画像の幅と少しの余白分 */
background: transparent url(new-icon.gif) no-repeat left center; /* 背景画像で new マークを表示 */
}

li.normal {
padding-left: 20px; /* 画像の幅と少しの余白分 */
}
-----------------------ソースここまで----------------------------- 
]]> ブックマーク tag:dabadaba.jp,2010://4.226 2010-03-16T08:40:28Z 2010-03-16T08:40:48Z http://www.screamo.jp... dabadaba http://www.screamo.jp

]]> MacOSX Safariプラグイン tag:dabadaba.jp,2010://4.225 2010-03-16T04:50:29Z 2010-03-16T05:08:14Z ・ZMGoogleCSS Googleの検索結果をAppleのページっぽくスタ... dabadaba ・ZMGoogleCSS
Googleの検索結果をAppleのページっぽくスタイリッシュなものに変更するSafari用スタイルシート
http://homepage.mac.com/dy4/zumuya/ZMGoogleCSS/index.html

・Glims
GoogleやYahoo.comの検索結果にサイトのサムネイルを表示
http://www.machangout.com/

・SafariStart
画像の情報を得ることと、ブックマークの参照と保存を右クリから行えます。
CSS のバックグラウンド画像もいけます。
http://www.redwinder.com/macapp/SafariStart/

]]> MacOSX mailプラグイン tag:dabadaba.jp,2010://4.224 2010-03-16T04:10:10Z 2010-03-16T04:49:15Z ○Mac OS X標準のメールクライアント「Mail.app (Apple Ma... dabadaba ○Mac OS X標準のメールクライアント「Mail.app (Apple Mail)」を最適化
・SpeedMail
http://www.1802.it/speedmail.php

新着メールをフローティングウインドウでお知らせ表示
・Mail.appetizer
http://www.bronsonbeta.com/mailappetizer/beta/
※10.6はβ版
http://www.bronsonbeta.com/mailappetizer/developmentsnapshot/

○アップル純正アプリ「Mail」を3段カラム表示に
「~/ライブラリ/Mail/Bundles/」内にダウンロードした「Letterbox.mailbundle」フォルダをそのまま入れるだけで「Mail」が3段カラム表示になります。
・Letterbox
http://harnly.net/category/software/letterbox/

○メニューバーに未読メール数を表示
・Mail Unread Menu
http://loganrockmore.com/MailUnreadMenu/

]]> [MT4]カテゴリーごとにデザイン（テンプレート）を切り替える方法 tag:dabadaba.jp,2010://4.219 2010-03-13T05:16:47Z 2010-03-13T05:19:04Z Movabletype カテゴリーごとにデザインを変える、すなわち、カテゴリーご... dabadaba Movabletype
カテゴリーごとにデザインを変える、すなわち、カテゴリーごとにテンプレートを切り替える方法です。

引用元
http://kiasma.vox.com/library/post/20071013.html

MT4の新機能タグとかを用いるというしばりで考えました。
2007年10月13日土曜日、WebSig 24/7・MT4分科会でのグループワーク・黒野さんチームで検討いたしました。

【作業手順】

デザインの数だけテンプレートを作成し、それぞれモジュール化します。
カテゴリー（としてマッピングした）テンプレートに条件分岐を書きます。
条件分岐の例その1：

カテゴリー「AAA」の場合、モジュール"AAA"を呼び出し、
カテゴリー「BBB」の場合、モジュール"BBB"を呼び出し、
それら以外のカテゴリーはモジュール"CCC"にする場合の条件分岐の書き方

<$MTEntryCategory$>

<$MTInclude module="AAA"$>


<$MTInclude module="BBB"$>

<$MTInclude module="CCC"$>



【応用編】

MTIfのモディファイアですが、「eq」だけでなくいろいろ種類があるようです。「like」を使ったバージョンも作成しました。

▼MTIfの説明
http://movabletype.jp/documentation/appendices/tags/if.html

条件分岐の例その2：

カテゴリー名に「事例」が含まれる場合、モジュール"typeA"を呼び出し、
それら以外のカテゴリーはモジュール"typeB"にする場合の条件分岐の書き方

<$MTEntryCategory$>

<$MTInclude module="typeA"$>

<$MTInclude module="typeB"$>

※ちなみにMT3までの機能ですと、
「ミワラボ | カテゴリーごとにテンプレートを切り替える」
http://miwa.offside.ne.jp/topics/movable_type/post.html
記載の方法で可能です。

]]> Macの遠隔操作 tag:dabadaba.jp,2010://4.215 2010-03-13T00:25:51Z 2010-03-13T00:27:24Z 個人ユースは無料でMacの遠隔操作が可能。 ・TeamViewer http:/... dabadaba 個人ユースは無料でMacの遠隔操作が可能。

・TeamViewer
http://www.teamviewer.com/ja/index.aspx

]]> MovableTypeのアーカイブページ分割 tag:dabadaba.jp,2010://4.187 2010-02-25T07:54:07Z 2010-02-25T15:08:26Z dabadaba MT5に入れてみたら
「Undefined subroutine &MT::Template::Context::_hdlr_entries called」
でエラーになりました。

ArchivePage
プラグインダウンロード

ナビゲーションタグ

<MTIfArchivePage>
<div class="pagelinks">

<MTArchivePageFirst>
<a href="<$MTArchivePageLink$>"><$MTArchivePageTitle text="最初"$></a>
</MTArchivePageFirst>

<MTArchivePagePrevious>
<a href="<$MTArchivePageLink$>"><$MTArchivePageTitle text="前のページ"$></a>
</MTArchivePagePrevious>

<$MTArchivePager class="blink"$>
<MTArchivePageNext>
<a href="<$MTArchivePageLink$>"><$MTArchivePageTitle text="次のページ"$></a>
</MTArchivePageNext>

<MTArchivePageLast>
<a href="<$MTArchivePageLink$>"><$MTArchivePageTitle text="最後"$></a>
</MTArchivePageLast>
</div>
</MTIfArchivePage>

]]> css透明 tag:dabadaba.jp,2010://4.159 2010-02-08T02:35:34Z 2010-02-08T02:36:49Z css透明設定 opacity: .70; /* Standard: FF gt... dabadaba css透明設定

opacity: .70; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=70); /* IE lt 8 */
-ms-filter: "alpha(opacity=70)"; /* IE 8 */
-khtml-opacity: .70; /* Safari 1.x */
-moz-opacity: .70; /* FF lt 1.5, Netscape */

]]> 斜めにスクロールjavascript tag:dabadaba.jp,2010://4.151 2010-01-31T16:25:20Z 2010-01-31T16:40:37Z 斜めに滑らかにスクロールするjavascript 「scrollsmoothly... dabadaba 斜めに滑らかにスクロールするjavascript

「scrollsmoothly.js」をダウンロードしてきて、ヘッダーに読み込ませればOK。
滑らかかつ縦横無尽にスクロールする快感を実現できる。
「scrollsmoothly.js」を実装しているページなら、別ページへのマーカーへも滑らかに移動できる。（2をclick）

http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly

http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

http://www.webinventif.fr/wslide-plugin/

]]>