2014年1月29日水曜日

MediaboxをFC2ブログに設定

Lightbox2をFC2ブログに設置する方法はこのブログで紹介したが、Lightboxの高機能版であるMediaBoxでもやって見よう。
MediaBoxは●HTMLファイル ●インラインコンテンツ ●YouTube ●Flash などができる。
MediaBoxの配布元である「MediaBox Advanced」サイトを見ると、私が2012年に導入した当時と変わっていない。
FLASHをやらないのであれば、必要なファイルは
(1)mediaboxAdv-1.3.4b.js
(2)mediaboxAdvBlack21.css
(3)mootools-core-1.4.5-full-nocompat.js
の3ファイルがあるといい。 Lightboxで必要だった画像ファイルも最近のブラウザでは必要ないので、設置がLightboxより簡単である。
ただ、FC2はピリオドの入ったファイル名はダメなので、ファイルのリネームだけはやらないといけない。
Lightbox2の時は.(ピリオド)の代わりに-(ハイフン)を使用したが、今回は次のようにピリオドとハイフンも削除した。
(1)mediaboxAdv134b.js
(2)mediaboxAdvBlack21.css
(3)mootoolscore145fullnocompat.js
FC2ブログの「ファイルのアップロード」から、この3ファイルをアップロードしたら、後はLightbox2の時と同じ。ヘッダー部に次のコードを挿入するとよい。
××部分はユーザ毎で異なる。
<link rel="stylesheet" href=http://blog-imgs-58.fc2.com/×/×/×/×/mediaboxAdvBlack21.css type="text/css" media="screen">
<script src="http://blog-imgs-58.fc2.com/×/×/×/×/mootoolscore145fullcompat.js" type="text/javascript"></script>
<script src=http://blog-imgs-58.fc2.com/×/×/×/×/mediaboxAdv134b.js type="text/javascript"></script>
※メモ
・Mediaboxの場合、Lighbox2の様に「Lightbox 2を有効にする」が出ないので、
image 
ソースでrel=”lightbox”を入れる必要がある。(Windows Live Writer2012)

●使用例:Mediaboxの地図機能を使って、貸別荘「すずめのおやど」をGoogleマップで表示した例はここをクリック。(FC2ブログで表示)
なお、地図へのリンクで、<a の中のコードは title="「すずめのおやど」の地図" rel="lightbox[external 800 600]" とした。titleは省略可能。
Googleマップの埋め込みコードは
image
また地図へのリンクアドレスはGoogleマップの「埋め込み地図のカスタマイズとプレビュー」で、http://から=embed までをコピペ。
image

※注:LightboxとMediaboxをFC2ブログに同居させるため、実際にはMediaboxのrel=”lightbox”の部分をMediaboxのrel=”mediabox”とした。これはブログのソースを見ると分かります。(Mediaboxだけの場合は「使用例」にように、rel=”lightbox”でOK)
jsファイルの変更場所は「mediaboxAdv134b.js」で、次の一カ所のみ。
image
FC2ブログでのGoogleマップ表示例

2014年1月27日月曜日

Windows Live WriterからFC2へ投稿したLightbox方式を動作させる方法

Bloggerにはライトボックス(Lightbox)が標準機能としてあるが、FC2ブログにはない。そこで、Windows Live Writerで実現するにはどうしたら良いか検討して見た。
Windows Live Writerは新規アカウント登録で、ブログのテンプレートを読む際、Lightboxがあれば、「□Lightbox2を有効にする」のオプションがでる。
image
※メモ:もし、新規アカウント登録をした後で、FC2のブログにLigntBox関連のファイルを、FC2ブログのHTMLに登録した場合は、「ブログ アカウント/テーマの更新」をやっても、動作しない。その場合は該当アカウントを削除してから、再登録する必要がある。

では実際にLightbox2でやって見よう。Lightboxの最新(2014/1/27現在)はLighrbox2.6。ダウンロードはここからできる(lightbox2.6.zip)。
ダウンロードしたら、Lightbox.zipで右クリックして、「すべて展開」(パソコンはWindows7)を選択。
image
既定の動作に必要なファイルは次の通りだが、FC2ブログの場合、ファイル名にピリオドはダメなので、次の様に書き換える。
lightbox.css
jquery-1.10.2.min.js → jquery-1-10-2-min.js
lightbox-2.6.min.js → lightbox-2-6-min.js 
prev.png next.png loading.gif close.png
ここで、先ず画像の転送をFC2ブログの「ファイルのアップロード」より行う。
image
これで、アップした画像のアドレスが分かる。
image
次にlightbox.cssをMKEditorなどのテキスト エディタで開き、これらの画像のパスを変更しなければならない。全部で8箇所。
●変更前
image
●変更後
image
ファイル名の変更が終わったら、テンプレートのHTML編集で、<head>~</head>の中に次のように入れる。
<link href="http://blog-imgs-58.fc2.com/XX/XX/l/XXXXX/lightbox.css" rel="stylesheet" />
<script src="http://blog-imgs-58.fc2.com/XX/XX/l/XXXXX/jquery-1-10-2-min.js"></script>
<script src="http://blog-imgs-58.fc2.com/XX/XX/l/XXXXX/lightbox-2-6-min.js"></script>
設定が終わったら、FC2のエディタを使って、動作テストをする。動作テストOKになったら、Windows Live Writerを起動し、新規アカウントの設定(FC2ブログ用)を行う。
(既にFC2のアカウントを設定していたら、アカウントを削除してから再設定)
そして、Windows Live Writerを再起動、FC2ブログへの新規投稿で画面で、画像を挿入したとき、「ソース画像のオプション」で「Lightbox2を有効にする」が出ていれば成功。もし、画像をグループ化したければグループ名を入れる。
image
これで、Windows Live WriterからFC2へブログを投稿すると、自動的にLightbox2のスクリプトが動作する。
この方法でBloggerに投稿しても今のところ動作していない。

2014年1月21日火曜日

FC2ブログをWindows Live Writerで作成

Bloggerではスンナリできた初期設定が、FC2では「ブログ設定を自動的に検出できませんでした。・・・・・・」と出た。一度は諦めたが、調べて見ると、次のようにすれば良いことが分かったので紹介。
Windows Live WriterはWindows Essencialの中にあるので、そこから選択して、インストールすると良い。(インストールする製品の選択→Writer)
(1)インストールが始まり、「Windows Live Writerの構成」が出たら、「次へ」をクリック
(2)「どのサービスを利用しますか?」では「他のサービス」にチェックを入れて「次へ」
image
(3)「ブログ アカウントの追加」で、「アドレス、ユーザー名、パスワード」を入力して、「次へ」
image
(4)「ブログ種類の選択」で、「使用するブログの種類」を「Movable Type AP1」に、ブログのリモート投稿用のWebアドレスに、http://blog.fc2.com/xmlrpc.php を挿入して「次へ」
image
(5)「ブログ アカウントの設定中」
image
(6)「ブログ テーマのダウンロード」で「はい」
image
(7)「ブログ アカウントの設定中」
image
(8)「ブログが構成されました」で「完了」をクリック
image
これで、FC2でのブログ作成が楽になるはず。