診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

リフレ簡単カレンダーを設置する 

リフレ簡単カレンダー設置方法

リフレネットの簡単カレンダーは物販サイトに不可欠な営業日カレンダーが簡単に、しかも無料で設置できる、便利なサービスだ。無料ブログで作る物販サイトでも利用させていただいている。ただ、リフレ簡単カレンダープラスが登場して、設置方法が少々混乱してきたので、リフレ簡単カレンダーとの設置方法の違いをまとめてみた。

リフレの各種カレンダーを設置した無料ブログで作る物販サイトサンプル

リフレ簡単カレンダーには3つのカレンダーがある!

もっと簡単なカレンダーは、簡単カレンダーのトップ画面にあるHTMLタグを貼り付けるもの。IDの登録は不要だが、自社の休日の設定などはできない。→以下、お手軽カレンダ

簡単カレンダーは従来から提供されているサービス。IDを登録し、設定ファイルを作成して、自分のサーバにアップする。休日の変更等は自分のサーバにアップした設定ファイルを変更することになる。→以下、簡単カレンダ

簡単カレンダープラスは簡単カレンダーの派生バージョン。設定ファイルをサーバにアップする手間を省き、設定画面で休日等を変更したら、同画面で作成されたHTMLタグをコピーし自分のHTMLにはりつけることになる。→以下、プラスカレンダ

■お手軽カレンダの設置方法

設置もお手軽。リフレ簡単カレンダーのトップページのHTMLタグを貼り付けるだけ。

曜日の設定ができないので、土日祝日が休みの企業しか使えない!?


お手軽カレンダの設置画面(クリックで拡大、以下の画像も同様)

■簡単カレンダの設置方法

リフレ簡単カレンダーのトップページの下にある ユーザ登録(無料)のリンクから入る。


リフレ簡単カレンダの入り口

ニックネームとメールアドレスを入力する。


簡単カレンダ登録画面

入力したアドレスに登録用のURLが送られてくるので、そのURLを開いて設定ファイルを保存する。


簡単カレンダ設定画面

休日も任意に設定できるが、設定ファイルを自分のサーバにアップし、設置用のHTMLに設定ファイルのURLを書く必要がある。サーバへのファイルのアップロードができ、かつアップしたファイルの場所が分かる人でないと設置は難しい。

■プラスカレンダの設置方法

サーバへの設定ファイルのアップロードができない!という人のタメに作られたのがプラスカレンダ。簡単カレンダと同じリフレ簡単カレンダーのトップページの上部の こちらから のリンクから入る。


プラスカレンダの入り口 簡単カレンダと間違えないように!

IDを登録する。登録後はログイン画面から設定画面に入って設定を行う。


プラスカレンダのログイン画面

曜日や休日の設定を行う。設定が終わったら、HTMLのタグをコピーして、貼り付けたいページにペーストする。


プラスカレンダの設定画面

設定を変更するたびにHTMLが変わる。変更のたびにHTMLをコピー&ペーストするのが面倒でなければこちらの方がより簡単に使えてプラスかもしれない。ただし、複数のサイトにカレンダーを設置して、一括して設定を変更したい人には簡単カレンダーの方が便利だと思われる。

設定画面で休日や色を変更すれば、HTMLを貼り付け直さなくても変更内容が反映されるようです。訂正します。さすがプラス!。HTMLを貼り付けるサイトのURLを登録しないとカレンダーが表示されません。

リフレの各種カレンダーを設置した無料ブログで作る物販サイトサンプル

スポンサーサイト

ブログで作るネットショップ 商品ページの構成 

商品ページの構成をどうするか

ブログでネットショップなどのビジネスサイトを作る場合、商品ページの構成にはチョットした工夫が必要になる。個別の商品ページはブログの記事として作成することになるが、本来、ブログは日記としての利用を前提として作られているため、新着順に記事が掲載されてしまう。ビジネスブログ、ビジネスサイトの場合、新着順では具合が悪いことになる。

FC2ブログで作った通販ビジネスサイトサンプル商品ページ

トップページはテンプレートの変更で

トップページはブログのテンプレートを変更して、常に固定的なコンテンツを表示させる。

無料ブログFC2の場合は、プラグインのカテゴリ3にフリーエリアを追加して、index_areaに表示させる。この場合、特にトップのカテゴリは作らない。

MovableTypeの場合は、いろいろな方法あるが、テンプレート index.htmlを変更し、トップカテゴリのみを表示させる方法でサンプルを作成した。

さて商品ページはどうするか

普通ネットショップで取扱う商品はいくつかの商品群に分けられる。この商品群をブログのカテゴリに追加する。これで各商品群はブログのメニューに表示される。

商品群=カテゴリを選択した後で、個々の商品のページを一覧として表示してもいいが、商品数が多い場合、ページが縦に長くなりすぎてしまう。#moreで詳細を見る という対応も考えられるが、トップページで商品群をクリックしたら、いきなり商品の一覧というのも味気ない。

商品群ごとに紹介ページを作る

商品群が選択された場合、常に最初に表示されるページ、つまり商品群の紹介ページがあれば、群内の商品にどんなものがあるかが分かり、訪問者の利便性が高まる。紹介ページには商品のサムネイル画像やイメージ画像を入れ、段組で商品の簡単な説明をつける。各商品の詳細はリンク先の個別商品ページに書いておけばいい。

個別商品ページは

商品群の紹介ページからリンクされる個別ページには各商品の詳しい説明や画像を記述する。カートに入れるボタンも入れておく。このページを商品の数だけ作り、商品群=カテゴリに分類すればいい。

商品群紹介ページと個別商品ページの並び順は

これで商品群の紹介ページと個々の商品ページができた。ただし、このままでは商品群カテゴリを選択したときの表示順が新着順=作成順になってしまう。商品群が選択されたとき、常に先頭に紹介ページを表示するにはどうするか?

答えはブログの特性を利用すれば簡単だ。ブログは日記として作られ、日付の新しい順に記事を表示する。この仕様を利用して、紹介記事の日付をカテゴリ内の他の記事の日付より新しくしておけば常に先頭に表示されることになる。2番目以降に表示させたい記事も日付でコントロールできる。

商品の数が多いとき

商品数が多いと商品ページの数が多くなり、商品群紹介ページも長くなる。見ている側はあまり多い商品にはついていけない。商品数が多い場合は、商品群の中を細分化し、群内の商品をグループに分ける。商品群紹介ページではグループへリンクし、グループのページから個別の商品ページにリンクする。このように入れ子(ネスト、レベル)を深くしていけば、商品数が増えても対応できる。

階層はあまり深くしないこと

ただし、あまり階層を深くすると訪問者が来なくなる と言われているので注意が必要だ。

商品群は3-6/サイト、グループは2,3/商品群、商品は10数個程度/グループ このくらいが限度ではないだろうか

カテゴリで表示するエントリの数 無料ブログFC2の場合

カテゴリ、ここでは商品群が選択された場合に表示する記事=エントリの数は原則としてブログで決まっているが、カテゴリごとに設定できると好都合だ。

FC2では、環境設定→ブログの設定→記事の設定で、1ページに表示する記事の数を1から30の範囲で指定する。ブログ単位での設定であり、残念ながらFC2ではカテゴリごとに表示する数を設定することはできない。(その下にある 最近の記事リストの表示数 とはプラグインの新着記事で表示する記事の数)

表示数を増やすとカテゴリを選択した際に表示される記事が増えることになる。通常のブログならそれでも我慢できるかもしれないが、ビジネスサイトでは問題だ。

商品ページだけを考えれば表示数を1にしてもいいのだが、ブログとして使っているカテゴリで困ったことになる。

FC2の場合、表示数を5に設定するのが妥当ではないだろうか。商品群カテゴリの場合、1.商品群の全体の説明ページ+2.商品グループA+3.商品グループB+4.お勧め商品+5.定番商品 で5つとなる。

ブログとして使っているカテゴリでも5つの記事が表示されれば問題はないのではないか。FC2の場合、カテゴリ内の記事が多くなると、前ページ、次ページがカテゴリページの下部に表示されるので、ページ単位=5エントリ単位で見ることができる。

サンプルサイトではカテゴリページの先頭に表示、前ページ・次ページの上に表示される、記事の一覧の表示をカットした。このほうがサイトとしては標準的となる。

FC2ブログで作った通販ビジネスサイトサンプル商品ページ

カテゴリで表示するエントリの数 MTの場合

MovableTypでは、設定→表示に関する初期設定でメインページに表示する数をエントリ単位か日付単位かで設定する。カテゴリページで表示するエントリはそのカテゴリ内のすべてのエントリとなる(MTのブログでボリュームのあるカテゴリを見る時にえらく時間がかかるのはこのためである)。ただしMTはテンプレートの中で MTEntries lastn="15" などと表示する数がコントロールできる。これを使えば、カテゴリごとに表示する数が変えられる。さすがMTだ。


MovableTypeの引越し 具体的作業記録 

MovableTypeで引越すための具体的作業

昨日MovableTypeからMovableTypeへの移転作業を行った。PHPを出力するように作成されていたブログを静的なHTMLを出力するブログに変更し、レイアウトに若干手を入れる という作業だった。具体的にどのような作業でブログを引っ越したか を記録する。

PHPのテンプレートを解析する

元ブログのテンプレートはPHPで書かれている。といってもHTMLの中にPHPのプログラムが数行入っているだけであった。実はウェブアプリはJavaで作成しているのでPHPには触ったことがない。最初は面倒かと考えていたが、ソースを読むと単純にヘッダとフッタをPHPでインクルードしているだけであった。

HTMLに埋め込まれたPHP
<?php readfile("http://○○○○○/○○○/header.php");?>

これなら何もPHPを使わなくても、MTのモジュールを使えば標準の設定でモジュール化が実現できる。

ヘッダモジュールとフッタモジュールを作成する

PHPのソースを確認し、同様の内容でヘッダ、フッタモジュールを作った。レイアウトの変更やページの増減によるグローバルナビの変更が必要だったため、タイトルの背景画像やページの背景画像に手を入れたが、単純に移行するだけなら、数分で完了しただろう。作成したモジュールをMTの新ブログのモジュールテンプレートに追加する。

メインページのテンプレートとアーカイブページのテンプレートのPHP部分を MTIncludeに書き換え、拡張子も .php から .html に変更して新ブログに追加する。

今回はこれで引越しの準備ができた。

記事を移転する

元ブログでのエントリの書き出し → 新ブログでの読み込みを行う。記事の数は少ないので、簡単に終わるだろうと思っていた。

元ブログのユーティリティ → 読み込み/書き出し → エントリの書き出し で元ブログのバックアップファイルを作成し、ローカルに保存する。

新ブログのインポートディレクトリにバックアップファイルをアップして、新ブログでユーティリティ → 読み込み/書き出し → 読み込み/書き出し を開き、エントリーの投稿者を自分にするのチェックをONにして実行。数秒で完了した。

画像も移転しようとしたが・・・

MTのバックアップファイルは記事のバックアップであり、画像は元ブログに置かれたままリンクでの表示となる。元ブログを削除したら画像はリンク切れになってしまう。

バックアップファイルはテキストファイルなので、エディターで画像ファイルのURLを置換して、画像ファイルをフォルダーごと新ブログにアップすれば、画像も引越しできるんのではと考えたが・・・・

画像ファイルが日本語!!??

結局、画像の引越しは断念した。問題は手順ではなく日本語にあった。何と画像ファイルの名前が日本=全角となっている。何で日本語なんだ!と言ってもどうしようもない。画像ファイル名自体を変更しようかとも思ったが時間がかかる。今回は同一サーバ上で稼働するから、元ブログを残しておいても問題はない ということで画像の引越しは中止した。

画像の引越しにはFTPが必須

仮に画像ファイル名が日本語でなければ、バックアップファイル上で画像ファイル名を置換しておいて、後は画像ディレクトリごと移転すれば画像の引越しはできるはず。

但し、ディレクトリごと移転するには FTP が使えないとたいへんな作業になるだろう。今回のサーバは FTP を許可していないので、ブラウザ上のファイル管理画面で操作しなければならない。FTPが使えなかったことも画像の引越しを断念した理由であった。サーバの選定の際には FTP が使えるかどうか も重要なポイントである。


MovableTypeの引越し 

MovableTypeからMovableTypeへの引越しが終わりました

今日の午後はMovableTypeのブログをMovableTypeに移転する作業にかかりっきりでした。PHPを出力するように作られている元のブログを変更してHTMLを書き出すように設定を変更し、デザインにも少し手を加え、エントリーを移動しました。

対象のブログは一つではなく、それぞれHTMLとスタイルがビミョウに違う三つのブログです。本番環境での移転のため、失敗は許されません。何とか無事に引越しが完了しました。

厄介だったのは日本語です。ファイル名に日本語を使っていると、文字コードの問題で厄介なことになる可能性が大です。記事以外には日本語を使わないほうが無難でしょう。


MovableTypeVS無料ブログ 

MovableTypeと無料ブログを比較する

ブログを作る際にMovableTypeで行くか? それともFC2などの無料ブログで行くか? を検討する必要がある。単なるお日記ブログではなく、ビジネスサイトをブログで作る場合は、より慎重に検討しなければならない。

ビジネスサイトを作る という前提で、MovableTypeと無料ブログの比較表を作ってみた。無料ブログはアクティブ数でlivedoorを抜いた!という話もあるFC2をターゲットにしている。

比較項目MT無料ブログコメント
費用×MTの商用利用版は約3万
インストールMTはインストールが必要、ただし比較的簡単
デザインMTのデザイン変更は少し面倒、レイアウトまで変更するとだいぶ面倒、無料ブログにはテンプレートやスキンがありデザイン変更は楽
レイアウトMTは2カラム標準、無料ブログは3カラムのテンプレートもあり、左右メニューの入替えも簡単
投稿どちらも記事の投稿は簡単、段組(マルチカラム)にはHTMLの知識が必要
画像MT3.2以降ならサムネイルも自動作成
カテゴリレベルMTならサブカテゴリも作れる、無料ブログはトップレベルカテゴリのみ
カテゴリ順序×MTでは文字コード順に表示されてしまう、無料ブログは入替えも簡単
サーバ×MTはサーバが必要
独自ドメイン×MTなら自分のドメインで運用可能
速度MTは基本的には速いが再構築が面倒
SEO独自ドメインでMT有利か?
移転×MTは業界標準なのでどこでも移転できる、無料ブログは制約あり

こんな感じでしょうか?


MovableTypeにブログを移行する FC2編 

MovableTypeに他のブログからエントリを移行する

昨日はMovableTypeからMovableTypeへブログを移行した。今日は他のブログからMovableTypeへの移行を検証する。

FC2無料ブログからMovableTypeへの移行実験

マクロテストで撮ったラベンダ他のブログの代表として無料ブログではNo2と言われている FC2ブログ からMovableTypeへの移行を行う。

手順は以下の通り

  • FC2にログインしてバックアップを取る
  • バックアップファイルの文字エンコードを変更する
  • MTのサーバにバックアップファイルをアップする
  • MTにログインして、読み取/書き出し を実行する
  • MTで再構築を行う

1.FC2にログインしてバックアップを取る

FC2にログインし、ツール → データのバックアップを選択。FC2ブログ形式でバックアップする を実行し、バックアップファイルをディスクに保存する。

2.バックアップファイルの文字エンコードを変更する

FC2の文字コードは EUC、MTは UTF-8。両者の文字コードが違うのでそのまま移行すると日本語が文字化けしてしまう。バックアップファイルの文字コードを変更する必要がある。 → 文字化けの例

と言っても、そんなにたいへんなことではない。文字コードが指定できるエディタでバックアップファイルを開き、文字コードを UTF-8 を指定して書き込むだけである。エディタとはテキストファイルを編集するワープロソフトのようなもの。メモ帳もエディターと言えるが、文字コードが変更できないので、TeraPad などを使うことになる。

3.MTのサーバにバックアップファイルをアップする

ここからはMT同士の移行と同じ。MTがあるサーバのimportディレクトリに文字コードを変更したバックアップファイルをアップする。

4.MTにログインして、読み取/書き出し を実行する

MTにログインして、ユーティリティ → 読み込み/書き出し画面を開き、「読み込み/書き出し」タブを選択。エントリーの投稿者を自分にする のチェックをONにして、読み込み/書き出しボタンをクリック。

テキストエリアの枠内に実行中のメッセージが表示され、しばらく待つと、エントリーやカテゴリーが追加されている。

ここで安心することなく、アップしたファイルを消しておかないと、次回に今追加したエントリーがダブって追加されてしまう。これまたMT同士の移行と同じ。

5.MTで再構築を行う

最後にMTを再構築すると追加した記事が反映されている。

 → FC2からMTへエントリーを移行した後のブログを見る

この複眼ブログをそっくり移行した。昨日移行したMTブログとFC2ブログの記事が一緒に表示されている。

→ MovableTypeから移行したエントリー

→ FC2から移行したエントリー 昨日の記事

このようにMovableType同士あるいは異なるブログからMovableTypeへの移行ができた。ただし、画像が移行できない、特定のカテゴリのみの移行ができない、コメントの移行に若干の問題が残る等々、解決しなければならない点もある。それらへの対応については次回に続く。


MovableTypeでブログを移行するには 

ブログ移行実験

MovableTypeからMovableTypeの別のブログに、あるいは他のブログからMovableTypeに移行するには、エントリーの移動が必要になる。他のブログからだと調査が必要なので、とりあえずMT同士でブログのエントリーを移動してみた。

移行 Before/Afterのサンプル

Before → 移行元のブログ

After → 移行先のブログ

移行後のブログはMovableTypeインストール設定のまま。ただインストールして移行しても、あまりぱっとしません。テンプレートの設定が必要です。

MovableType間でブログを移行する

MTのブログメニューのユーティリティの読み込み/書き出しを選択する。「読み込み/書き出し」と「エントリーの書き出し」というタブがある。ちょっと名前がややこしいが、「エントリーの書き出し」でファイルに書き出して、「読み込み/書き出し」で書き出したファイルを読み込んで新しくエントリーを追加することになる。

エントリーを書き出す

元のブログにログインし、ユーティリティの読み込み/書き出し画面で「エントリーの書き出し」タブを選択して、「■■■■■■からエントリーを書き出し」をクリックする。 エントリーはブラウザで保存される。

保存したファイルを新しいブログがインストールされている指定のディレクトリにアップする。ディレクトリはMTの環境設定ファイル (mt-config.cgi)で指定されている。たいていは mt/import になっているのではないだろうか?

もし環境設定ファイル (mt-config.cgi)を見るのが面倒なら、次の読み込みを実行して表示されるエラーメッセージから推測することができる。

新しいブログにエントリーを追加する

新しいブログにログインして、ユーティリティの読み込み/書き出し画面で「読み込み/書き出し」タブを選択。エントリーの投稿者を自分にする のチェックをONにして、読み込み/書き出しボタンをクリック。もし先ほどの保存ファイルを指定ディレクトリにアップしていなければ、ここでエラーメッセージとともに指定のディレクトリが表示されるので、保存ファイルを指定ディレクトリにアップして、再度ボタンをクリック。実行中のメッセージが表示され、しばらく待つと、エントリーやカテゴリーが追加されている。ここで安心することなく、アップしたファイルを消しておかないと、次回に今追加したエントリーがダブって追加されてしまう。ご注意!

ブログ移行の問題

以上、簡単にエントリーは移行できたが、実はこの操作では画像は移行してくれない!!!! 元のブログへリンクして画像を表示しているので、元のブログを消すと新しいブログでも画像が見えなくなってしまう。困った。

しかし、手はある。保存されたファイルはテキストファイルなので、エディターで画像ファイルのURLを新しいブログに書き換えてしまえば、元のブログを消しても大丈夫。ただし、画像ファイル自体は新しいブログに追加する必要があるが・・・


暑いときはコレに限ります 

信州松本も暑い一日でした

暑いときはコレに限る暑いときはコレに限ります。暑いときにいただく、冷えた麦茶は格別です。


MovableTypeでビジネスサイトを作るメリット 

ビジネスサイトをMovableTypeで作るメリットとは

マクロ練習 MovableTypeでビジネスサイトを作るといろいろなメリットがある。記事の投稿、つまり新しいページの追加更新が簡単なことが最大の長所だが、実はMovableTypeのメリットは別なところにあるのではないか?

MTを使えばHTMLを勉強しなくてもいい!というメリット?

確かにMTを使うとページの追加更新が簡単にできる。しかし、チョットしたレイアウトのページ、例えばこのような商品一覧のページを作ろうとすると、やはりHTMLやスタイルシートの知識が必要になる。

MTを使おうが、XOOPSを使おうが、気の利いたページを作るにはHTMLは欠かせない。

MTのメリットはモジュールにあり!

 ⇒ MovableTypeでビジネスサイトを作るメリット の続きを読む

3カラムか2カラムか 

左右メニューの3カラムか、左メニューの2カラムか

左右メニューの3カラムタイプが流行しているようだ。3カラムは左右にメニューがあるので、誘導性・一覧性に優れ、情報量の多いページに適していると言われる。反面、メニューの締めるエリアが大きく、肝心のコンテンツのエリアが小さい。物販サイトなどで商品写真を大きく見せたい場合などは3カラムは不利となる。

トップページは誘導性を重視した3カラム、サブページはコンテンツ・画像を重視した2カラムという構成が最適だが、ページのデザインを2つも作るのは面倒だ。

無料ブログならテンプレートの中で制御して、トップページは3カラム、サブページは2カラムというデザインが簡単に実現できる。

 → 3カラム・2カラムが混在した物販サイトサンプル








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。