2011年10月 Archive

今月（2011年10月）サイトのカスタマイズした箇所をまとめたエントリです

• utilities カテゴリリストの上下paddingの値を少し増やした
• Lightbox表示は、Fancyboxに切り替え
• カテゴリアーカイブページのGooglebotへのアーカイブ拒否
• サイト内検索をGoogleカスタム検索に移行

display:blockのリンク要素のpaddingですが、あまりよくわかっていないのですけれど、タッチパネル系で選択しやすくなるかも（？）というあたりでしょうか。

カテゴリ一覧ページには、metaタグによりGoogleのキャッシュを作らないようにしました。（投稿ごとに変化するので）月別のほうは当月分のみが変化するものなので特に指定してなくてもいいのでないかと判断しました。どちらもnoindexでもいいんですけどアーカイブページをエントランスとするかたもいらっしゃるだろうってことで今の時点ではそのままにしてます。

サイト内検索でAjax Searchを使っていましたが、ブログトップページと一部ウェブページにおいてGoogleカスタム検索のほうに移行しています。

• www.markdiary.com内検索

カスタム検索専用ページの作成ですが、「デザイン」の項目で、「2ページ」というのを選択すると、検索結果を表示させるページのURIとクエリ文字の設定ができるフォームがあらわれますのでそこで必要事項を入力していきます。そのあと「保存してコードを取得」で表示されたコードをコピーします。

あとは、Movable Typeからでもいいので、適当な検索用ページを用意して取得したコードをそのページ内に埋め込んでおきます。

そのあとサイドカラムなどにある検索用のformの行き先(action属性)に作成したページを指定して、クエリで設定した文字（標準ではq）が検索フォームから渡せるようにしておけば完成です。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

MacとWindowsとでデータのやりとりをしてる外付けのポータブルHDDがWindowsのほうで認識されなくなった問題についてです

フォーマットですが、承知のとおりFAT32フォーマットで、もともとWindowsでバックアップ等で使用していたものです。容量がまだあるので、Macのほうのファイルの保管にと使うことにしていたのですが----

ちなみにTimemachineには専用に別のHDDを使っています。

症状はというと以下のとおりです。

1. Macでファイルを開いたりなどする
2. 取り外して、Windows (XP) のほうに接続する
3. 通常はつなぐとカコンとかいって読み込みが始まるのだけど、これが音沙汰無しになる
4. マイコンピューターを開いてもドライブが認識されていない

やったこと

一旦取り外しをおこない、Windows再起動後に再び接続してみるも、状況かわらず。

で、ウイルス対策ソフトを止めた状態でも何も変化無しでした。

結局どうしたかというと、USB2.0のインターフェイスカードのドライバを更新してみる、というものです。

インターフェイスカードは少し古めなものでしたが、幸いにもメーカーがドライバを提供してくれているようでしたのでメーカーサイトからダウンロードして入手しました。

その後再び再起動、接続を試みたら今度はなんとか認識されたみたいでした。でもこれはまたおこるかもわからないですので、何が原因だったのかはいまだに不明です。

Firefoxの小ネタです。新規のタブボタンを隠した状態にするもので拡張なしでおこなうものです。

確認はMac OS版 Firefox 7.0.1 にておこなっています。ツールバーのカスタマイズ方法の基本はアイコンをドラッグ&ドロップにて移動させたりします。

1. ツールバーの空いている箇所で右クリックメニューをだす
2. カスタマイズを選択
3. ツールバー領域にある「＋」のアイコンをドラッグして、ダイアログボックスに収める
4. 完了をクリックする
5. 以降、新規タブはツールバー領域の空いた箇所をダブルクリックするか、command+Tなどで開く

以上です。以下に操作の動画を用意しました。

• Hide new tab button(652.2 KB)
• Hide new Tab button - YouTube

AdobeのPhotoshop Elements 10の体験版をMacにいれてみました。

Macbook pro Early 2011 、Mac OS X 10.6.8、メモリ4GBという環境です。

• 窓の杜 - 【NEWS】Adobe、「Photoshop Elements 10」「Premiere Elements 10」の体験版を公開
• 写真の加工と編集ソフト | Adobe Photoshop Elements 10（体験版のリンク先から体験版を入手することができます。 ）

体験版は、最新版になっているのでご注意ください（以下のページも参照してください）。

A14.　体験版のダウンロードは最新版のみとさせていただいております。

体験版に関するよくあるお問い合わせ

「Adobe Download Assistant」というアプリケーションが必要でこれが最初にインストールされました。

Macの場合ですが、Adobe Download Assistantのダウンロードファイルの保存先は任意（自分は/Downloadに）、ダウンロード後の.dmgファイルをクリックで指示にしたがいインストールしていきました。

Adobe AIRのインストールがありましてインストール先は/Applications 以下としました（途中で管理者パスワード入力などがあります）。

Adobe Download Assistantインストール後に起動するようにしておき、Adobe Download Assistantから、Photoshop Elements 10を選択してダウンロードします。(自分がおこなったときは2GB程度)

あとは指示通りでインストール先も/Applications以下で、完了後は/Adobe Photoshop Elements 10/Adobe Photoshop Elements 10のエイリアス　から本体を起動でしました。

以上で体験版を30日間利用できるようになりました。

Adobe Storeから製品版の購入をおこなって納品方法をダウンロードとするとシリアル番号を入手でき、番号を入力することで製品版として使用できるようです。

体験版についてのFAQは以下のページにありました。

• Adobe Photoshop Elements／Adobe Premiere Elements：体験版FAQ

記事内に誤読される表現があったので、修正しました。

jQueryのLightbox効果のプラグインをFancyboxに移行することにしました。

サンプルのコードをよく読んでいなかったりして、コチラの手際が悪くて躓いていましたのでメモとして残しておきます。自分でも使い方はよくわかっていなくて、細かな解説ができませんのでそこのところはよろしく--ということで

Movable Typeテーマ、mtVicuna Simple(https://github.com/naoaki011/mt5-theme-mtvicuna-simple)を使われている環境のかたは、bundleされているようですのでプラグイン上で設定されたほうが早いです（たぶん）

設置までの大まかな流れ

• Fancybox一式をダウンロード、展開、サーヴァーにあげる
• jQuery本体の読み込み（CDN経由を推奨するとFacyboxのサイトには記載されている）
• Fancyboxのプラグインファイルとlightbox効果のスタイルシートを読み込ませる
• Fancyboxを有効にする
• 記事内で使用する箇所をFancybox用に調整する
• 編集記事を更新して完了

Facyboxのダウンロードは以下より。この記事作成の時点でヴァージョンは1.3.4でした

• Fancybox (Downloadのリンクバナーから)　

jQueryのロードは、Google APIs経由で

Lightbox表示のためのスタイルをhead要素に

<link rel="stylesheet" href="PATH/TO/fancybox/jquery.fancybox-1.3.4.css" />
 <!-- ファイル名の箇所はfancyboxフォルダ内のCSSファイルを参照のこと -->

次のようなことでFacyboxが使えるようになるみたいです。これがないと通常の画像リンクをクリックしたときと同じです。

class属性の値がfacyboxというものだったとして

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

<a href="test1.jpg" class="fancybox">
    <img src="test1_thumb.jpg" alt="" />
</a>

グループを使う場合は（my_groupというclassがあるとして）、

<script type="text/javascript">
$(document).ready(function() {

    $(a[rel=my_group]).fancybox({
                   'transitionIn'       : 'none',
                   'transitionOut'    : 'none',
                   'titlePosition'      : 'over'
   });

});
</script>

・・・・・・
<a href="test1.jpg" rel="my_group" title="test1">
    <img src="test1_thumb.jpg" alt="" />
</a>
<a href="test2.jpg" rel="my_group" title="test2">
    <img src="test2_thumb.jpg" alt="" />
</a>

・・・・・・

あと細かなカスタマイズとかは、
Tips & Tricks をみるといろいろ記載されているようです

オプションとかメソッドの一覧は以下に

• Fancy lightbox alternative| API & Options