bigchocolate

この記事はブロとものみ閲覧できます

■FC2ブログで関連エントリーリスト
FC2ブログの関連エントリーを表示させることができないかなぁ？なんて検索していたら、辿りついたサイト。テンプレートにタグを貼り付ける事で関連記事を表示させることができるらしい。PHPでやっているみたいです。なるほど、こういうやり方もあるのかぁと。しかしながら、利用者が増えた場合は、サーバーの負荷もすごそうではある。というわけで、関連記事をなんとか表示することができないか？と考えてみた。

とりあえずやってみたのは、FC2ブログのテンプレートを利用して、XMLを作成するの方法。この時点で自己責任ネタになっているのをお忘れなく（笑）で、iframeとして表示させてみるか？と。そして、以下のようなテンプレートを作成。

<ul>
<!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></li>
<!--/topentry-->
<li>[<%ad>][<%ad2>]</li>
</ul>

関連記事だから記事タイトルとリンクを使うというシンプルなものでいいと思うのでこんな感じで。
http://bigchocolate.blog120.fc2.com/?template=kanren
これをプレビューするとトップページに表示される記事のタイトルが出てくるだけだから、 http://bigchocolate.blog120.fc2.com/?tag=%A5%C6%A5%F3%A5%D7%A5%EC%A1%BC%A5%C8&template=kanren
?tag=を入れてあげてタグ検索させる。タグ名：テンプレートで検索かけてる。ちなみに、環境設定のタグ検索時の記事数は10件に設定してあります。試してないけどカテゴリーでもいいかも。そして、 adをなんとなくコメントアウトしたくなる気持ちを抑え、プレビューしてみると･･･入れ子になったので仕切りなおし（笑）

データを読み込ませるのってなんかあったなぁと、AJAXやJSONPを真っ先に思いついたんだが、検索して出てきた記事を読んでると、時間がかかりそうなのでやめ（笑）というか、AJAXもJSONPも何それ？って感じなんですけどね（笑）そして、そういや、jQueryなんてものもあったな？と、最近、ホームページを作る人のネタ帳のサイトでいろいろサンプルがあったよね？と思い出して、アクセスしてみると、使えそうなサンプルを発見（笑）

とりあえず一番簡単そうなのでいいわってことで。あとは、タグをエンコードさせないとダメやろうから、<%topentry_tag_list_parsename>（設定したタグリストのURLエンコード化したタグを表示）を使う。そしてできたのが以下のようなタグで、これをテンプレートに貼りつける。もちろん<!--topentry-->の中で。

<script type="text/javascript">
$(document).ready(function (){
<!--tag_list-->
$("#load1").load("<%url>?tag=<%topentry_tag_list_parsename>&template=kanren");
<!--/tag_list-->
});
</script>
<div id="load1">
</div>

↓実行したサンプル

---

■関連記事 ちょっと表示されるのに時間がかかったり、微妙なところが多々あるか。タグが複数あった場合きちんと表示されてないような。load1,2って連番にしていかんとダメなのかなぁ。その辺はjQuery、javascriptに詳しい人がなんとかしてくれたらありがたい（笑）まあ、ここからは、ランダムに表示させてみたり、ページを遡る処理を書いてみたりと、いろいろやっていくんやろうね。また、カテゴリーで表示させるのもいいかもしれないし、その辺はお好みで。後は偉い人に任せた！というか、FC2が関連記事を表示させるものを作ってくれたらいいと思います（笑）

---

■ニュータイプなjQueryその2-jQuery導入方法
ちなみにこの記事も参考にしました。jQueryおもしろそーっていうのは、今回のでなんとなく分かったんですが、こちらのサイト見てるともっとハマってしまいそうな感じです（笑）いろんなことが簡単にできるっていうのはいいですね。

■FC2ブログで、自動で関連記事リストを表示する方法。
同じようなことをやってる方を発見！こちらは、iframeで。

■FC2ブログで「関連記事」「関連エントリー」を表示する方法
関連エントリーを表示する方法がまとまっています。Google AJAX Feed APIを利用したやり方もあるんですね。なるほど。

先ほど記事にした空ビネタですが･･･Googleでさらに面白い記事がないか探していると自分の記事がHITしてあれ？っと思った。

青枠で囲ってあるもの、赤枠で囲ってあるものが違いますよね。
とうか、空ビの個別記事で、テンプレートのカスタマイズと、気になったIT系、経済、金融ニュースを配信。というのは、ちょっとどうかと思ったし、一番どうかと思うのは、このサイト説明文が本当にのサイトに適しているのか？なんですが（笑）もうそれを言い出すと、このbigchocolateっていうタイトルこそ何よ？って感じもしているんですが。まあそれは今いいとして・・・



ピンとくる人はメタタグ要素のdescriptionが違うんでしょうよって事だと思いますが、たしかについ2日前にくらいに中途半端にテンプレートをいじったなぁと。こういう結果を見ると、metaタグのdescriptionは下手に設定しないほうがよいというのも、同意できるなぁとは思いました。しかしながら、descriptionを完全になくしてしまうのもなんかやりきれない感じです。というわけで、表示されるページによって、descriptionの内容を変えてみました。

Googleの検索結果を見ていると、200byte前後の文字列を検索結果として表示されている感じか。そして、descriptionをきちんと設定したいというページは、やはりPermalinkの個別記事かなと思います。テンプレート中に使える変数一覧を見てみると、本文の要約(200文字)を表示することができる<%topentry_discription>があるみたいで、これを利用することにしました。RSSの概要ともおそらく同じ。んー400byteになっちゃうのがちょっといや?な感じもしているんですが、まあ様子見も兼ねてやってみるか。

index_area

トップページ、記事一覧ページはブログの説明である<%introduction>を入れた。

個別の記事 permanent_area

<!--permanent_area--><meta name="description" content="<!--topentry--><%topentry_discription><!--/topentry--> "><!--/permanent_area-->

個別の記事には<%topentry_discription>を。他は、カテゴリー、検索、タグ検索、日付ごとやらいろいろあるけど、それはスルーしようかな。

最終的にはこんな感じになった。

<!--not_category_area-->
<!--not_permanent_area-->
<!--not_search_area-->
<!--not_tag_area-->
<!--not_date_area-->
<meta name="description" content="<%introduction>">
<!--/not_date_area-->
<!--/not_tag_area-->
<!--/not_search_area-->
<!--/not_permanent_area-->
<!--/not_category_area-->
<!--permanent_area--><meta name="description" content="<!--topentry--><%topentry_discription><!--/topentry-->"><!--/permanent_area-->

関連記事

■METAタグ「Keywords」最適化　FC2ブログのテンプレート

<!--not_category_area-->
<!--not_permanent_area-->
<!--not_search_area-->
<!--not_tag_area-->
<meta name="Keywords" content="キーワード１,キーワード2" />
<!--/not_tag_area-->
<!--/not_search_area-->
<!--/not_permanent_area-->
<!--/not_category_area-->
<!--permanent_area--><meta name="Keywords" content="<!--topentry--><!--topentry_tag--><!--tag_list--><%topentry_tag_list_name> <!--/tag_list--><!--/topentry_tag--><!--/topentry-->" /><!--/permanent_area-->
<!--category_area--><meta name="Keywords" content="<%sub_title>" /><!--/category_area-->
<!--tag_area--><meta name="Keywords" content="<%tag_word>" /><!--/tag_area-->
<!--search_area--><meta name="Keywords" content="<%search_word>" /><!--/search_area-->

うーん、なんかごちゃごちゃしてきて、ちょっとおかしいところがあるかもしらんが、こんな感じになった。もっと綺麗になるような気がしないでもないんだけど・・・。わざわざ作ったのはKeywordsのメタタグが入ってないテンプレートが多かったから。以下はメモ。

トップページにアクセスした時など

<!--index_area--><meta name="Keywords" content="キーワード１,キーワード2" /><!--/index_area-->

これは任意で、サイトのキーワードをいくつか設定した方がよさそうだ。なんとなく。

固定リンク画面　Permalink

<!--permanent_area--><meta name="Keywords" content="<!--topentry--><!--topentry_tag--><!--tag_list--><%topentry_tag_list_name>,<!--/tag_list--><!--/topentry_tag--><!--/topentry-->" /><!--/permanent_area-->

記事にはタグを入れることができるという前提で、タグを展開する。最後にカンマが入ってしまうのが微妙･･･。これは、タグがない場合の<!--topentry_not_tag-->について頭の片隅に入れておくが、今はいいや。

<!--permanent_area--><meta name="Keywords" content="<!--topentry--><!--topentry_tag--><!--tag_list--><%topentry_tag_list_name>,<!--/tag_list--><!--/topentry_tag--><!--topentry_not_tag-->キーワード１,キーワード2<!--/topentry_not_tag--><!--/topentry-->" /><!--/permanent_area-->

日付表示画面　date_area

<!--date_area--><meta name="Keywords" content="キーワード１,キーワード2" /><!--/date_area-->

日付だから・・・日付をキーワードに入れる必要もないだろうし、トップページの時と同じでいいかな。

カテゴリー画面　category_area

<!--category_area--><meta name="Keywords" content="<%sub_title>" /><!--/category_area-->

これはカテゴリー名そのまんまでいいか。

タグ検索画面　tag_area

<!--tag_area--><meta name="Keywords" content="<%tag_word>" /><!--/tag_area-->

タグもそのまんまにしてみた。

検索画面　search_area

<!--search_area--><meta name="Keywords" content="<%search_word>" /><!--/search_area-->

検索もそのまんま。

SEO ツール

■Another HTML-lint gateway
■SEO診断ツール Dipper β（ディッパー）?Septeni?
■SEO TOOLS β(SEOツールズ) - 気になるあのサイトのアクセス・SEO対策を無料でチェック！
■FC2 SEO対策 - 検索エンジンランキングチェッカー
■検索キーワードチェックツールSEO対策
■無料SEOツール | 住 太陽の「SEO 検索エンジン最適化」
■SEO＆ユーザビリティ診断ツール・サーチファインダー
■検索エンジン登録なら無料登録ドットコム - 検索エンジンへの無料サイト登録
■キーワード出現頻度解析-SEO対策TIPS
チェック用に使用したりしているやつね。

関連記事

■METAタグ「description」最適化　FC2ブログテンプレート

■Support Pixelpost
写真に特化されたCMSみたいだ。MySQL/PHP要。設置するとなるとなんか面倒そうな気がしないでもないが。
設置している人を発見した。http://www.crimson.be/pixelpost/index.php


■Taken Gold
ついでに・・・FC2のテンプレートでも写真に特化させたものがいくつかあると思いますが、FC2albumは中でもとても素敵だと思います。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','entry_title'];
Hatena.Star.Token = 'e87c41045ae2146685c46539118b70f044fc56b5';
</script>

■はてなスター
■はてなスターをブログに設置するには
templateを使用している方は太字にしたトークンの箇所を変更し、head内に埋め込めばはてなスターを導入でけます。

Flash+XMLで、ブログにアルバムや、音楽を貼り付けることができたりするFlashアプリが増えてきました。エディタを開いて、XMLに追記して、管理画面にログインして、XMLのファイルをアップロードするという一連の工程が少々面倒に感じることもあります。ブログの管理画面で全部できないのか？と。

そこで、今回はFC2ブログの管理画面の中にある、テンプレートの機能を使用することで、XMLを管理してやろうという、なんだか微妙な方法を紹介します。

テンプレートは、<%ad><%ad2>さえ記述してあれば、基本はなんでも記述することができますので、CDATAセクションで<[CDATA[ <%ad><%ad2>]]>することで、ここはちょっと広告の表示を回避しようと。これが微妙なんですが、FC2のブログで利用するということで、そもそもそのブログには同じ広告が入っているからいいんじゃないか？っていう気もしますが、まあ自己責任で。

というわけで、JW FLV Media Playerで利用した、プレイリストを例に、テンプレートの中にXMLを入れてみる。



こんな感じで、できたテンプレートXMLが以下になります。
http://bigchocolate.blog120.fc2.com/?template=xmltest&index

mediaplayerに読み込ませてみる。

<embed src="http://blog-imgs-21.fc2.com/b/i/g/bigchocolate/mediaplayer.swf" width="600" height="220" allowscriptaccess="always" allowfullscreen="true" flashvars="height=220&width=600&file=http://bigchocolate.blog120.fc2.com/?template=xmltest&index&backcolor=0x330033&frontcolor=0xFFFFFF&lightcolor=0x00FF00&displayheight=240&displaywidth=300" />

↑これが↓こうなるということは、XMLとして読み込めています。

bigchocolateで検索をかけると、
関連検索のところにtemplate by bigchocolateと表示されるようになった。というか、こんなキーワードで検索をかけるのって、僕くらいしかいないと思うというのがポイントで、検索時のキーワードっていうのは、やはり保存されているんだろうなぁという事が推測できる。

共有テンプレートにwhite_2clの追加の申請をしてみました。ヘッダー部分をちょっといじりました。
普通の検索、タグ検索時に、
<meta name="Keywords" content="タグ" />
といった感じで、キーワードのメタタグが出力されるようにしました。ちょっとだけSEO的な配慮になるのかなとは思いますが、こういう細かいところを作りこんでいくのが楽しいですね。ちなみに、検索時、タグ検索時の<title>のタイトル名も変化するようにもなっています。

このテンプレートの使いにくいところは、サイドバーにいろいろ貼り付けることができないということでしょうか。元々、そういうものを貼り付けない人達や、淡々と更新して文章を読んでもらいたい方がターゲットにはなっていますので、まあいいかなとは思います（笑）

dark_blue_2clが共有テンプレートに追加されました。擬似フレームを利用したシンプルな２カラムのテンプレートです。まだまだCSS部分の作りこみがあまいんですが、そのうち修正していこうかなー。