純和風古民家の貸別荘「すずめのおやど」サポート記

2015年4月15日水曜日

FC２ホームページの「ファイルマネージャー」でページの一部を変更

あるページの一部だけを変更したい場合の手順。この場合はGoogleのAnalyticsのトラッキングコードをある事情で変更したい場合。
●FC2だけで変更する場合
（１）FC2ホームページにログイン。
（２）FC２ホームページで「ファイルマネージャー」を選択
（３）index.htmlで右クリック
（４）「ソース表示で編集」を選択

（５）青色の部分を新しいコードに置き換える。（新しいコードをコピー、青色の部分を選択して、貼り付け）

（６）置き換えたら「上書き保存」

（７）ブラウザでページの表示確認とソース確認

●FC２だけでない時の手順（この方法も覚えておくと、ほかの場面でも応用が利く）
（１）デスクトップのインターネットエクスプローラでトップページを開き、右クリック
（２）「ソースの表示」を選択
（３）ソースすべてを選択し、コピー
（４）メモ帳に貼り付け
（５）青色の部分を新しいコードに置き換える。

（６）適当なフォルダにindex.htmlのファイル名で保存（赤←注意）
（ページの文字コードがUTF-8のとき）

（７）FC2ホームページにログイン。
（８）「ファイルマネージャー」を選択
（９）「ファイルマネージャー」内で右クリックし、「ファイルのアップロード」を選択

（10）「アップロードするファイルを選択」で先に保存したindex.htmlを選択し、アップロード。

（11）ページの表示とソース確認

＊（７）からはFTPソフトを使ってやっても同じ。手順数から言うと、最初のFT2ホームページ・ファイルマネージャー内でやるのが、簡単で確実。

2014年1月29日水曜日

MediaboxをFC2ブログに設定

Lightbox2をFC2ブログに設置する方法はこのブログで紹介したが、Lightboxの高機能版であるMediaBoxでもやって見よう。
MediaBoxは●HTMLファイル ●インラインコンテンツ ●YouTube ●Flash などができる。
MediaBoxの配布元である「MediaBox Advanced」サイトを見ると、私が2012年に導入した当時と変わっていない。
FLASHをやらないのであれば、必要なファイルは
（１）mediaboxAdv-1.3.4b.js
（２）mediaboxAdvBlack21.css
（３）mootools-core-1.4.5-full-nocompat.js
の３ファイルがあるといい。 Lightboxで必要だった画像ファイルも最近のブラウザでは必要ないので、設置がLightboxより簡単である。
ただ、FC2はピリオドの入ったファイル名はダメなので、ファイルのリネームだけはやらないといけない。
Lightbox2の時は.（ピリオド）の代わりに-（ハイフン）を使用したが、今回は次のようにピリオドとハイフンも削除した。
（１）mediaboxAdv134b.js
（２）mediaboxAdvBlack21.css
（３）mootoolscore145fullnocompat.js
FC2ブログの「ファイルのアップロード」から、この３ファイルをアップロードしたら、後は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を有効にする」が出ないので、

ソースでrel=”lightbox”を入れる必要がある。（Windows Live Writer2012）

●使用例：Mediaboxの地図機能を使って、貸別荘「すずめのおやど」をGoogleマップで表示した例はここをクリック。（FC2ブログで表示）
なお、地図へのリンクで、<a の中のコードは　title="「すずめのおやど」の地図"　rel="lightbox[external 800 600]"　とした。titleは省略可能。
Googleマップの埋め込みコードは

また地図へのリンクアドレスはGoogleマップの「埋め込み地図のカスタマイズとプレビュー」で、http://から=embed　までをコピペ。

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

・FC2ブログでのGoogleマップ表示例

2014年1月27日月曜日

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

Bloggerにはライトボックス（Lightbox）が標準機能としてあるが、FC2ブログにはない。そこで、Windows Live Writerで実現するにはどうしたら良いか検討して見た。
Windows Live Writerは新規アカウント登録で、ブログのテンプレートを読む際、Lightboxがあれば、「□Lightbox2を有効にする」のオプションがでる。

※メモ：もし、新規アカウント登録をした後で、FC2のブログにLigntBox関連のファイルを、FC2ブログのHTMLに登録した場合は、「ブログアカウント／テーマの更新」をやっても、動作しない。その場合は該当アカウントを削除してから、再登録する必要がある。

では実際にLightbox2でやって見よう。Lightboxの最新（2014/1/27現在）はLighrbox2.6。ダウンロードはここからできる（lightbox2.6.zip）。
ダウンロードしたら、Lightbox.zipで右クリックして、「すべて展開」（パソコンはWindows7）を選択。

既定の動作に必要なファイルは次の通りだが、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ブログの「ファイルのアップロード」より行う。

これで、アップした画像のアドレスが分かる。

次にlightbox.cssをMKEditorなどのテキストエディタで開き、これらの画像のパスを変更しなければならない。全部で８箇所。
●変更前

●変更後

ファイル名の変更が終わったら、テンプレートの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を有効にする」が出ていれば成功。もし、画像をグループ化したければグループ名を入れる。

これで、Windows Live WriterからFC2へブログを投稿すると、自動的にLightbox2のスクリプトが動作する。
※この方法でBloggerに投稿しても今のところ動作していない。

2014年1月21日火曜日

FC2ブログをWindows Live Writerで作成

Bloggerではスンナリできた初期設定が、FC2では「ブログ設定を自動的に検出できませんでした。・・・・・・」と出た。一度は諦めたが、調べて見ると、次のようにすれば良いことが分かったので紹介。
Windows Live WriterはWindows Essencialの中にあるので、そこから選択して、インストールすると良い。（インストールする製品の選択→Writer）
（１）インストールが始まり、「Windows Live Writerの構成」が出たら、「次へ」をクリック
（２）「どのサービスを利用しますか？」では「他のサービス」にチェックを入れて「次へ」