fc2ブログ

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

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








FC2ブログのナキドコロ 独自ドメインが使えない 

FC2無料ブログにも弱点が

IMGP9388機能豊富、カスタマイズ自由、検索エンジンにも強く、ツールも盛りだくさんのFCブログだが弱点がないわけではない。

プラグインの中でテンプレートタグが効かない、特定のカテゴリの抽出ができない などなど。その中で検索エンジン対策上、最大の弱点は独自ドメインが使えない!ということだろう。

QAによると

A.対応しておりません。FC2ドメインで取得したドメインも同様に未対応です。今後対応予定は現在未定となっております。

とのことだ。確か、以前に早急に独自ドメインに対応する というアナウンスがあったような気がするが、今は未定ということなのだろう。

どうしても独自ドメインを使いたい場合は

FC2が対応してくれるまで待つわけにはいかない。Seesaa(シーサー)ブログは独自ドメインに対応している。機能も豊富、老舗ブログで信頼性もある。カスタマイズも可能だ。昔シーサーブログを使ってみたときはカスタマイズに限界があり断念したが、数年前からコンテンツHTMLが編集可能になり、カスタマイズできる対象が拡張している。真剣にシーサーブログに取り組むことにした。

FC2が独自ドメインに対応してくれていればこんなことにはならなかったのだが・・・


MTOS4.21のテンプレートセットをカスタマイズする 

MTOS4.21にオリジナルのビジネステンプレートセットを適用する

MTOS4.2からMTOS4.21にバージョンアップし、データベースもMySQLからSQLiteに変更した。次は、企業サイトやネットショップ向けにカスタマイズしたビジネステンプレートセットを適用する。インストール直後は、既定のブログテンプレートセットが適用されているので、このテンプレートセットをビジネステンプレートに変更することになる。

  1. ビジネステンプレートセットプラグインのインストール
  2. テンプレートの画面のアクションからテンプレートセットの初期化を選択
  3. 新しいテンプレートセット適用をチェック
  4. 次へをクリック
  5. 確認をクリック

これでテンプレートセットが変更された。

config.yaml の内容がウィジェットセットに反映されていなかった。config.yaml をサーバにアップして、テンプレートセットを再度初期化したら反映された。

気になったので新しいブログを作成してテンプレートセットを初期化したところ、同様にウィジェットセットに欠落があった。config.yamlは入れ替えずに、テンプレートセットの初期化だけを再実行したら欠落はなくなった。どうも、二回テンプレートを初期化する必要があるようだ。あるいは config.yaml の書き方の問題か?

ビジネステンプレートセットプラグインのインストール

ビジネステンプレートセットプラグインとして以下のものを作成準備する。

  1. congif.yaml
    テンプレートセット内のテンプレートの名前とファイル名、構成を記述するファイル
  2. templates/XXXX.mtml
    各テンプレートが記述されたファイル、MTのテンプレート管理画面の内容から作成する。ビジネステンプレートの場合50ファイル以上もあるので混乱しないように注意する。
  3. lib
    テンプレートセットをインストールするためのperlモジュール

これらが準備できたら、サーバのpluginsディレクトリにテンプレートセット用のディレクトリを作成し上記のファイルをアップする。これでビジネステンプレートセットが利用可能になるので、ブログのテンプレート管理画面で冒頭の処理を実行する。

テンプレートで使用する画像はmt-staticのimagesディレクトリにテンプレートセット名と同じディレクトリを作成してアップする。

テンプレートセットの作り方の記事を書こうと思っていたが、面倒なのでついつい先送りにしていた。実際、ファイルの数が多く、試行錯誤を繰り返すことになるので、本当に面倒だった。と考えていたら親切な方がテンプレートセットの作り方の説明をしてくれている。実に丁寧に詳しく説明されている。いまさら同じ記事を書いても仕方がない。テンプレートセットの作り方についてはMovable Type 備忘録の記事を参照願いたい。


FC2カートの個別商品ページへ

タグ: MTOS4.2 ビジネステンプレート カスタマイズ インストール テンプレートセットの作り方

ユーザタグをどう使えばいいか?について考える 

ユーザタグは便利だと言われているが・・・

最近のブログでは記事の内容に応じてタグをつけることが当たり前になっている。ここで言うタグとは、h1やbrと言った< > でくくるHTMLタグではなくて、FC2ブログ言うところのユーザタグのこと。MovableType(MT および MTOS)やWordPress(WP)では単にタグと言っているので紛らわしい!この記事ではHTMLタグと区別するために「ユーザタグ」と呼ぶことにするが、MTやWPの「タグ」と同じものだ。

タグとは

そもそもタグとは、「荷札」や「付箋(ふせん)」といった意味だ。HTMLタグも、文章(コンテンツ)につけた荷札や付箋のようなものなのでタグと呼んでいる。ユーザタグも文章につけた付箋だ。

HTMLタグとユーザタグ

HTMLタグの場合、ブラウザがタグを解釈して表示を制御している。ユーザタグは情報の分類や検索に使うためのものだ。

ユーザタグとカテゴリの違い

ユーザタグは情報の分類や検索に使われる というと、カテゴリと同じではないか!という疑問が出てくる。カテゴリは情報=記事を分類し、分類された内容によって記事の一覧を表示するためのものだ。情報を分類し、情報を一覧表示するという意味では、ユーザタグとカテゴリは同じ機能だと言える。

ただし、ブログではカテゴリは固定的なものだという前提がある。ブログでカテゴリを変更する場合のリスクについては以前の記事で触れている。リンク切れが発生することがあるので、ブログではカテゴリを頻繁に変更追加することはおすすめしていない。テンプレートによっては、カテゴリによって表示レイアウトを変えている。後でカテゴリを変更すると困ったことになる可能性がある。カテゴリは固定的である と思っておいたほうがよい。

固定的なカテゴリに対して、ユーザタグは任意に使えるという点が最大の違いだ。ユーザタグは記事を書いている最中にいくらでも追加できる。いったん記事につけたユーザタグを変更するのも自由だ。

カテゴリは固定的、ユーザタグは自由に追加変更できるという違いを踏まえておこう。

自由に使えるユーザタグの使い方は?

ではユーザタグをどう使えばよいか? ご自由に!といわれても困ってしまうかもしれない。ユーザタグの使い方を考えてみよう。

ユーザタグの使い方 「カテゴリでは対応できない要素で分類する」

カテゴリは固定的だ。ネットショップなどのサイトの場合、カテゴリは商品の種類を基準として設定されていることが多い。ジュエリーに関するサイトやブログなら、ネックレス・ピアス・イヤリングなどなど。

ところが訪問者は商品の種類だけで検索しているとは限らない。ブランドや材質や価格を中心にジュエリーの記事を見たい!と思っている人も多いはずだ。カテゴリが商品の種類だけだと、このような人は、すべてのカテゴリを開いていちいち商品記事を見ていかなくてはならない。これはたいへんな作業だ。もしかすると、途中で嫌になって他のサイトに行ってしまっているかもしれない。一つの記事を複数のカテゴリに分類できるブログなら別にカテゴリを作って分類すればよいが、複数カテゴリが指定できないブログ(FC2もそうだ)では対応不可能だ。

ユーザタグとしてブランドを追加しておけば、ユーザタグの検索で指定ブランドの商品の一覧が表示できて便利だろう。

材質をユーザタグに設定しておけば、指定された材質、例えばシルバーで作られた商品の一覧が表示できる。

価格ごとのユーザタグがあれば、一万円以下の商品の一覧、十万円以上の商品の一覧、など予算に合わせた検索が可能になる。

クリスマスのプレゼントに適した商品なら、ユーザタグに「クリスマスギフト」というタグを追加しておくべきだろう。

記事に使われているユーザタグを記事の最後に表示しておけば・・・

ユーザタグは一般的には「タグクラウド」「タグリスト」などとしてサイドバーに一覧表示される。これを見れば、ブログ全体で使われているユーザタグを知ることができる。これはこれで便利な機能だ。ただ、すべてのユーザタグが表示されているので、今表示している記事との関連が見えてこない。

記事で使われているユーザタグの一覧を、記事の末尾に一覧表示しておけば、気になるタグをクリックするだけで、同じユーザタグが使われている記事が一覧表示できる。

ヴィトンのバッグの記事を見て、同じヴィトンの財布が気になったら、記事の末尾のヴィトンをクリックして、ヴィトン商品の記事の一覧が表示できる というわけだ。せっかくタグ付けしたのなら、ここまで対応したいものだ。

ユーザタグの使い方 「テンプレートを制御する」

ユーザタグによる検索が可能だ ということは、タグを抽出条件として使用できるということだ。タグ検索では、すべての記事の中から特定のタグがつけられた記事を検索して表示している。これをテンプレートに応用すれば、いろいろな拡張が可能になる。トップページに特定のタグの記事だけを表示する とか、サイドバーにタグが共通する記事を表示するとか・・・

MovableType(MT および MTOS)の場合、記事だけでなく、画像をはじめとするアイテムにもタグが使えるので、さらにアイデアは膨らんでくる。MovableType(MT および MTOS)では、カテゴリにもタグ付けができる。これも使えるかもしれない。

タグの使い方はアイデア次第だ。使わないのは、モッタイない。

タグ: カテゴリとタグの違い タグの使いこなし タグ SEO 記事に表示

記事の末尾にタグの一覧とリンクを表示する 

FC2ブログの記事の末尾に記事のタグを表示する

ブログではタグの使いこなしが重要な要素となってきている。HTMLタグももちろん重要だが、ここで言っているタグとは、記事の投稿時に入力するタグのこと。FC2ブログでは「ユーザタグ」という名前で呼んでいる。一般のブログでは「タグ」と呼んでいるようだが HTMLのタグと紛らわしい。このタグ=ユーザタグは検索エンジン対策でも大切な要素である!というのがこのところの識者の意見だ。

前述の通りユーザタグは記事の投稿時に入力できる。FC2ブログではプラグインの「ユーザタグ」を追加すると、サイドバーにタグリストが表示される(おまけに本文中の文字にリンクをはってくれる!)。これはこれでOKだが、このユーザタグプラグインで表示されるのは、全ブログ記事のタグの一覧だ。せっかくタグ付けしたのなら、個別記事にその記事だけのタグの一覧を表示したいものだ。

プラグインを探してみたが

amazonや楽天と連動したプラグインはあるが、単純に記事ごとのタグを表示するプラグインは見つからなかった。連動も便利だが、記事のキーワードを際立たせ、テキストリンクとしてコンテンツに埋め込みたいところだ。

仕方がない、自作することにしよう。

記事の末尾に記事で使われているタグの一覧と検索へのリンクを表示する

FC2のテンプレートをチェックしたところ、tag_listで有効になる単変数 が使えそうだ。

rtagやstagはタグリストやタグクラウド用らしい。

tag_listで使える変数は2つ

  • <%topentry_tag_list_name> ユーザタグ名を表示
  • <%topentry_tag_list_parsename> URLエンコード化したユーザタグ名を表示

記事テンプレートの適当な箇所に下記のコードを追加する。適当とはいっても、本文の末尾、コメント・トラックバックの前あたりになるだろう。

<!--tag_list--><a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a> <!--/tag_list-->

tag_list から /tag_list が記事のタグを表示するループ。その中に タグの表示 %topentry_tag_list_name とタグ検索へのリンク a href="<%url>?tag=<%topentry_tag_list_parsename>"> を入れる。%topentry_tag_list_parsename はURLエンコードされたタグの名前。

タグのない記事の場合、何も表示させたくないので、上記のコードの前後に <!--topentry_tag--> <!--/topentry_tag--> を追加する。これでタグ付けされた記事だけ限定して表示される。また、記事中に表示させるので topentry ループ内にあることが前提となっている。

以上で、タグ付けしたキーワードが記事の最後に表示される。テキストリンク付きなので、文字列をクリックすれば、タグ検索結果が表示される。SEOでも有利だと思われる。よかったらお試しください。その際は、コメント願います。

この下の、全文表示させるをクリックして、記事全文を表示すると、タグの一覧が文末に表示されます。

トップページのプラグインにも、前述のコードを埋め込んで、トップページの最新記事にもタグを表示するようにしました。

タグ: タグ 記事に表示 検索エンジン対策 プラグイン 自作 テキストリンク SEO タグの使いこなし

ブログの記事をサイトに貼り付ける 

ブログのRSSを取得して他のサイトに貼り付ける

MovableTypeやWordPresをCMSとして使い、サイト全体をブログで構築していれば、新着記事をトップページに引用することができる。イベント情報をアップすれば、トップにも記事が反映されるので、利用者にも親切・SEO的にもOK・サイト管理も簡単になる という三方一両得的なメリットが享受できる。

無料ブログやブログを日記としてしか使っていない場合は、このメリットは生かせない。ただJavaScriptやAjaxをHTMLに埋め込めば、ブログのRSSを取得して、別のサイトに表示することはできる。スクリプトで表示しているだけなのでSEO面ではメリットにはならないが、いちいちブログの記事の抜粋をHTMLに追記してアップする苦労からは解放される。

PHPを使えばHTMLに直接書き込むことができるのでSEO的にも有利となるが、サーバの制約がありPHPが使えないこともある。というわけでJavaScriptを使う方法が一般的だ。Ajaxも使えるが、別ドメインのデータが取得できないという制限があるので同一サーバにサイトとブログを持つ人に限られていた。

GoogleAPIでRSSを取得する

GoogleがGoogleAJAXFeedAPIを提供してくれている。これは別サーバのデータを取得できないというAJAXの制限をGoogleがプロキシサーバ(代理サーバ)を立てて取得してくれる という仕組み?だ。とにかく利用してみよう。

GoogleAPIでRSSを取得してみた

まづGoogleAPIを利用するためにAPIキーを取得する必要があるが、GoogleMapAPIと同じキーなので取得済みだった。(未取得ならGoogleのガイダンスに従って取得しておこう)Google AJAX Feed APIを利用するページが開かれた。利用許諾を承認して、APIを使うサイトのURLを入力して Generate API Key ボタンをクリックする。Your API Key と スクリプトが表示されるので、スクリプトをHTMLに貼り付ければとりあえずの作業は終了だ。

スクリプトは以下の通り

<script type="text/javascript" 
src="http://www.google.com/jsapi?key=XXX"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
      var feed = new 
        google.feeds.Feed("http://www.digg.com/rss/index.xml");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>

GoogleAPIスクリプトをカスタマイズして概要を表示させる

貼り付けたHTMLには、ブログ記事のタイトルが表示されている。既定ではタイトルしか表示しないようだが、ここは概要や日付けも表示させたいところだ。貼り付け先のスタイルにあわせてHTMLタグも入れたい。

以下の行をコメント化する

            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);

代わりに下の行を追加

            var entry = result.feed.entries[i];
            var eTitle = entry.title;
            var eContent = entry.content;
            var eDescription = entry.contentSnippet;
            var eDate = entry.publishedDate;
            container.innerHTML += "<h4>"+eTitle+"</h4>";
            container.innerHTML += "<p>" + eDate+"<br />";
            container.innerHTML += eDescription+"</p>";

RSSの表示画像はこんな感じ

GoogleAJAXFeedAPIこのページは貼り付けたRSSを表示しているだけ。新着情報やブログ新着記事など、本格的に利用する場合は、トップページ等の貼り付けるページに feed というdivを作り、h4 p へのスタイルを指定することになる。

GoogleAPIは検索エンジンのペナルティもなしで安心だ

せっかくブログを書いていても肝心のネットショップのトップページに記事が反映されないのはモッタイない ということで、これまでいろいろなサービスを取り上げたことがあるが、いずれも作者やサービス提供サイトへのリンクが避けられなかった。このGoogeAPIならリンクの表示もなく、飛び先もGoogleなので検索エンジンのペナルティを気にすることなく、安心して使える。お勧めです。

この記事は http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter22/001/index.html を参考にさせていただきました。AJAXだけでなく JavaScriptの情報も参考にさせていただいています。 openspc@po.shiojiri.ne.jp さんに感謝! 塩尻、お近くです。








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