« Archive 2017/04 123456789101112131415161718192021222324252627282930 »

スポンサーサイト

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

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

white_2clが追加された FC2ブログテンプレート

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

[Permalink] [2008/05/08]

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]

FC2ブログで画像にリンクを張る時の注意点

テスト用の画像
ここに1つテスト用の画像がありますが、この画像にリンクを張る時、FC2ブログの方だと、以下のような流れになると思います。

アップロード画面
とりあえず、ファイルをアップロードするところから。


アップロード画面
アップロードが完了し、「この画像で記事を書く」ボタンを押す。

記事作成画面
記事にimgタグが貼り付けられた状態。


アップロード画面
imgタグを反転して、

アップロード画面
URLを押すと、上のような窓が出てくる。この時、タイトルが反転したimgタグになってる!これいつからだっけ。ここでタイトルを設定しないと、いや?な感じになる。

NGの例 タイトルを設定しない場合


アップロード画面

アップロード画面

OKの例 タイトルを設定した場合


アップロード画面

アップロード画面

[20:10:18] 彼女の発言: よく分からない
[20:10:23] 彼女の発言: 何に気をつければいいの?

ここまで書いて、よく分からないとツッコミをうけたので、追記しておきます。

画像にリンクを張る時は、タイトル欄に適切なタイトルを入力しよう。



環境設定画面
ちなみに僕の環境設定はこんな感じ。タグがごちゃごちゃ入るのがイヤなので。

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

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

はてなスター

<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]

JW IMAGE ROTATORをFC2ブログに設置する



JW IMAGE ROTATOR JW IMAGE ROTATORは、画像をFlashで表示させることができるFlashのアプリです。ブログにも設置することができるので、写真をよく公開しているブログでは、けっこう使い道がありそうです。(※この記事が書かれた時のバージョンは3.16)

JW IMAGE ROTATORの主な機能

  • スライドショーを作成できます。簡易アルバムとしても機能するとは思います。また、写真単体での表示も可能なため、imgタグで表示させたくはないが、Flashでならいいかな?っていう微妙な願望にも応えてくれそうではあります。
  • flickrの写真を読み込める。
  • リストを記述し、それを表示させることができる。(対応しているフォーマットは、XSPF、RSS、ASX example)
  • 画像にリンクを張ることができる。
  • 写真と一緒に音楽を流すことができる。

設置の手順

imagerotator
サイトからファイルをダウンロードする。

imagerotator
ダウンロードしたファイルを解凍すると、上のようになる。FC2ブログの管理画面から、imagerotator.swf、swfobject.jsをアップロードする。複雑なことをしないなら、swfobject.jsは必要はないです。swfobject.jsを使用した例をはこちら

SETUP WIZARD

SETUP WIZARD
1: Select an example setupで、Imagerotatorに関するものをとりあえずセレクトする。 sourceにFCブログでアップロードしたimagerotator.swfのURLを入れる。あとは、サイズなんかを指定したり、自分の好みの設定にして、「Update preview & code」ボタンを押下して、自分のブログに貼り付けるためのソースを表示させる。それをコピーしてブログに貼り付けたらOK。

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

FC2ブログのテンプレートを利用して、XMLを作成する

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

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

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

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

テンプレート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として読み込めています。


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

JW FLV Media PlayerをFC2ブログに設置する

JW FLV Media PlayerをFC2ブログに設置する
JW FLV MEDIA PLAYER 3.16
SETUP WIZARD@JW FLV Media Player

前回の記事は中途半端だったので、実際に設置してみます。主に、SETUP WIZARD@JW FLV Media Playerの説明です。とりあえず、動画を公開できたらいいやっていう軽い気持ちで読んでもらえたらと思います。前回書いた時はバージョンが3.15だったのですが、今は3.16が最新のものになっており、設置は同じ要領でできます。機能がいろいろ追加されているので3.15の方は3.16にするのをオススメします。

JW FLV MEDIA PLAYER 3.16の主な追加機能

Longtail videoと、Bits on the Runについては、あまりよく分かってませんが、今後注目を浴びるサービスだと思います。今はベータ版みたいなので様子見することに・・・。

Mediaplayer with a single FLV



とりあえず、入力欄に自分がFC2ブログにアップしたファイルのURLなんかを入力します。今回は、fileのところに入力した動画は、FC2動画にアップしたものにしてみました。


sourceとfileしか入力してないけど、とりあえずこんな感じで。 そして、「Update preview & code」ボタンを押下して、自分のブログに貼り付けるためのソースを表示させます。上の例でいくと、以下のようなソースになりました。

<embed src="http://blog-imgs-21.fc2.com/b/i/g/bigchocolate/flvplayer.swf" width="320" height="250" allowscriptaccess="always" allowfullscreen="true" flashvars="height=250&width=320&file=http://movie1.fc2.com/up/flv/200804/26/7/20080426uyqaNr3A.flv" />

これを、ブログの記事などに貼り付けたら、動画を公開できるようになります。

Mediaplayer with a Youtube video

mediaplayer 3.16 (04.04.2008)では、Youtubeの動画も公開できるようになりました。3.15の時も、FLVのURLを直接指定してやることで表示させることもできたのですが、3.16ではYoutubeの動画のURLを指定するだけで表示できるので便利にはなりました。まあ、なんらかの制限がかかったり、CMなんかと重ねて表示したりすると、まずそうではありますが・・・。また、crossdomain云々の話もありそうですが、僕は詳しくは分かりません。



Mediaplayer with a single MP3

flvplayerを一度設置してしまえば、後はSETUP WIZARDでいろいろ試してみる。ネットラジオなんかを公開している人なんかは、単発でMP3を公開したいこともあると思いますが、そんな時は、Mediaplayer with a single MP3をセレクトしたらいい。


heightを250、widthを320にしてみた。

backcolor(プレイヤーの基調となる色)、frontcolor(文字色)、lightcolor(マウスカーソルが当たった時の文字色)、screencolor(プレイヤーのバックの色)を設定することで、色も変更できます。Mediaplayer with a single MP3の場合は、screencolorは設定しなくてもいい。

プレイリストを記述する

Supported Playlists
サポートされているフォーマットは、XSPF、RSS(2.0)、ASXになります。それぞれ記述する方法、特徴も変わってきますが、ここではその詳細は省くとして、とりあえず公式サイトのリストを参考に、エディタで作成してみます。

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">
<channel>
<item>
<title>Go!Go!7188 - こいのうた</title>
<link>http://jp.youtube.com/watch?v=glEkpdYb-5c</link>
<media:credit role='author'>Go!Go!7188</media:credit>
<media:content url="http://jp.youtube.com/watch?v=glEkpdYb-5c" type="video/x-flv" />
<media:thumbnail url="http://i.ytimg.com/vi/glEkpdYb-5c/default.jpg" />
</item>
<item>
<title>GO!GO!7188 近距離恋愛</title>
<link>http://jp.youtube.com/watch?v=bodOYM-XXCc</link>
<media:credit role='author'>Go!Go!7188</media:credit>
<media:content url="http://jp.youtube.com/watch?v=bodOYM-XXCc" type="video/x-flv" />
<media:thumbnail url="http://i.ytimg.com/vi/bodOYM-XXCc/default.jpg" />
</item>
</channel>
</rss>

こんな感じでyoutube_list.xmlというファイル名で作成してみました。このファイルももちろんFC2ブログの管理画面からアップロードします。
http://blog-imgs-21.fc2.com/b/i/g/bigchocolate/youtube_list.xml

なんだかプレイヤーのサイズの指定が微妙なんですが、面倒なのでもう貼り付ける(笑)こんな感じでリストに記述したものを、プレイヤーで読み込ませることによって、いろんな動画を公開することもできます。ちなみに、サポートされているのは動画だけではなく、MP3やJPEGやら画像なんかもいけると思います。(SUPPORTED FLASHVARSを参照)

例えば、CDTubeβ - カウントダウンチューブというサイトがありますが、このサイトでもRSSがあるので、これを保存して、mediaplayerに読み込ませたり・・・すると、ダメだった。あっ、動画のリンクが記事のURLになってるのか。



[コメントを書く] [Permalink] [2008/04/26]
jimichan 設置できました。:ありがごうとざいます。テストで設置してみましたが、成功しました!
O(≧▽≦)O ワーイ♪

あとで、ゆっくり遊びに来ます。
bigchocolate :この記事が役に立ったみたいでよかったです~
«過去の記事

カテゴリー

月別アーカイブ

RSSリンク

ブログ全記事表示

全ての記事を表示する


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