« Archive 2017/05 12345678910111213141516171819202122232425262728293031 »

スポンサーサイト

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

[Permalink] [--/--/--]

jQueryで無理やり関連エントリーを表示させる FC2ブログテンプレート

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を利用したやり方もあるんですね。なるほど。
スポンサーサイト

[コメントを書く] [Permalink] [2008/05/01]

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

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

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

googleの検索結果

ピンとくる人はメタタグ要素の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ブログのテンプレート

[コメントを書く] [Permalink] [2008/04/30]

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

<!--not_category_area-->
<!--not_permanent_area-->
<!--not_search_area-->
<!--not_tag_area-->
<meta name="Keywords" content="キーワード1,キーワード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="キーワード1,キーワード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-->キーワード1,キーワード2<!--/topentry_not_tag--><!--/topentry-->" /><!--/permanent_area-->

日付表示画面 date_area

<!--date_area--><meta name="Keywords" content="キーワード1,キーワード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ブログテンプレート

[コメントを書く] [Permalink] [2008/04/29]

Pixelpost

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

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

[コメントを書く] [Permalink] [2008/04/29]

はてなスターをブログに設置した

はてなスター

<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内に埋め込めばはてなスターを導入でけます。

[コメントを書く] [Permalink] [2008/04/28]
«過去の記事

カテゴリー

月別アーカイブ

RSSリンク

ブログ全記事表示

全ての記事を表示する


あわせて読みたいブログパーツ
ページランク スカウター : bigchocolate
フィードメーター - bigchocolate
SEO対策 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。