Movabletype Category : blog@nero-8

September 22, 2009

ソーシャルブックマークリンクを設置

ソーシャルブックマークリンクを設置してみました。

こちらのサイトを参考にさせて頂き、リンクを設置しました。
・ Movable Typeでソーシャルブックマーク
ちょっと修正して新規ウィンドウが開くように、また、FC2ブックマークを追加しました。

また、上記で設置したダイレクトリンク以外への対応は、
AddThis というサイトのサービスを使いました。
海外のサービスですが、日本語表示してますね。お手軽設置できました。

追記：20090929

こちらを参考に、AddThis をカスタマイズしてみました。
変更点は以下のとおりです。

・アイコンを 16px x 16px の小さなものに変更
・マウスオーバーでのポップアップを、クリックに変更
・ポップアップ表示時の表示項目を指定
・ポップアップ時の右肩にネーム表示

古い MovableType なので Plugin は使えず、
addthis:url と addthis:title は TypePad の設定を流用です。

<!-- AddThis Button BEGIN -->
<a
    class="addthis_button"
    href="http://www.addthis.com/bookmark.php?v=250&amp;pub=hoge"
    addthis:url="<$MTEntryPermalink encode_url="1"$>"
    addthis:title="<$MTEntryTitle encode_html="1"$>"
    title="More BookMarks"
    target="_blank"
>
<img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16px" height="16px" style="border: 0;" alt="More BookMarks" />
</a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=hoge"></script>
<script type="text/javascript">
var addthis_config = {
    ui_language: "ja",        // 日本語表示
    ui_cobrand: "hogehoge",   // ポップアップ右肩にネーム表示
    ui_click: true,           // 表示を onmouse → onclick に変更
    services_compact: ' google, live, delicious, technorati, twitter, tumblr, facebook, myspace, email, gmail, favorites, more ',
    services_exclude: ' print '
                              // ポップアップ内の表示項目指定及び非表示指定
}
</script>
<!-- AddThis Button END -->

2009/09/22 23:30 | Comments [0] | Trackbacks [0]

September 20, 2009

画像や動画など、オーバーレイ表示できる jquery-lightpop を入れてみた。

ブログ記事内の画像や動画サービスの映像などを、ブラウザウィンドウ内にオーバーレイ表示させる jQuery.lightpop.js を導入してみました。

当初、LiteBox で画像のみ実現しようとしてたのですが、動画も出来ないかな？と検索かけたら lightpop に行き着き。。
サンプルページで試してみていたところ、LiteBox からも簡単に移行できてしまう様子で、もう入れるしかないでしょ！！…と、Script 関連の経験値はとっても低いのですが、テストページを作って遊んで、一気に導入してしまいました。

こんな画像の表示とか…

YouTubeの動画もオーバーレイでしかもお好みサイズで。 → 大きなサイズ(853x480：YouTubeHDサイズ)で見る
 → もっと大きなサイズ(1024x576)で見る ※ディスプレイ解像度注意です。
→ YouTubeHD原寸(1280x720)で見る ※ディスプレイ解像度注意です。
※HD表示にならないときは切り替えてください。

このような感じでキレイに表示されるようになりました。
記事カラムの幅に縛られず、見栄えもとっても良くなりました。これは嬉しいです。
作者さま、感謝・感謝・感謝であります。

以下、初心者目線の導入手順です。

● 必要なもの

・ jQuery ：こちらから最新の Minified 版 jQuery を拾ってくる。
・ jQuery.lightpop.js ：こちらから最新版 jQuery.lightpop.js を拾ってくる。

● lightpopのimagesパス修正

・ jquery.lightpop-x.x.x.min.jsをエディタで開いて検索かけてパスを修正します。.jsファイルは、/jsというディレクトリに置く予定なので、下記の通り修正しました。
f=f||"images/"; → f=f||"/js/images/";

● .jsファイルのファイル名変更

それぞれのファイル名を下記の通り変更します。

jquery-x.x.x.min.js → jquery.min.js
jquery.lightpop-x.x.x.min.js → jquery.lightpop.min.js
ftpでファイルを転送 jquery.min.js と jquery.lightpop.min.js、そして images フォルダごと /js ディレクトリへ。

● htmlファイルの記載

・<head>～</head>内に下記を追加します。

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.lightpop.min.js"></script>

・最終行手前の</body>手前に下記を追加します。

<script type="text/javascript">
//<![CDATA[
// jQuery Lightpop
$(function(){
$('a[rel*=lightbox]').lightpop({overlayBgColor:'#333',overlayOpacity:0.9,contentBorder:'1px solid silver'});
$('a[href^=http://www.youtube.com/watch]').lightpop({overlayBgColor:'#333',overlayOpacity:0.9,contentBorder:'1px solid silver'});
});
//]]>
</script>
</body>

lightpop作動時の背景色：#333 で、透過10% (overlayOpacity:0.9) としてみました。
<a>タグ内に「rer=lightbox」がある場合に lightpop 適用(画像用)
<a>タグ内に「http://www.youtube.com/watch」がある場合に lightpop 適用(YoutTube用)
画像とYouTubeしか入れてありませんが、他にも様々な機能があるようですので、詳しくは lightpop のページやサンプルのページを参照ください。

● タグの書式 YouTube

(href 要素にYouTubeの表示・動作パラメータを全て記載します)

<a href="http://www.youtube.com/watch?v=xxxxxxxxxxx&hl=ja&autoplay=1&width=xxx&height=xxx" title="hogehoge"> imgタグや文字など </a>

http:// ～ v=xxxxxxxxxxx ： YouTube の URI
hl=ja ：日本語表示
autoplay=1 ： lightpop 起動で自動再生
width=xxx/height=xxx ：動画表示サイズ。(高さは動画+25px)
title= ： lightpop画面左下にタイトルが表示されます。
画質指定の fmt=xx は試してみましたが、反映されませんでした。

● タグの書式画像

(LiiteBox からの移行となってます)

<a href="/hoge/hoge.jpg" rel="lightbox" title="hogehoge"><img src="/hoge/hoge-thumb.jpg" border="0" alt="hogehoge" /></a>

<a>タグ指定の画像： lightpopで表示する画像
rel="lightbox" ：このタグでlightpop適用
title= ： lightpop画面左下にタイトルが表示されます。
<img>タグ指定の画像：元から表示させるサムネイル画像

ローディング中のアニメGIFを改変しましたので、その画像のみ置いておきます。
lightpop-ico-loading.zip

過去記事の対応…どうしましょ。。。（汗

2009/09/20 19:10 | Comments [1] | Trackbacks [0]

April 27, 2009

RSSリーダーへ登録頂いてる方へ

このBlogで使っているFeedBurnerというサービスがGoogle傘下となり、
Feedのアドレスが変更となりました。
お手数ですが、RSSリーダー登録アドレスの変更をお願いいたします。

RSSリーダーで購読する

新しいフィードは下記のアドレスとなります。

http://feeds2.feedburner.com/nero-8

よろしくお願いいたします。

2009/04/27 18:00 | Comments [0] | Trackbacks [0]

May 04, 2008

携帯対応 (MT4i Ver.3)

ブログの携帯対応を実施しました。

携帯対応のためのツールには、MovableTypeでの携帯閲覧を可能にする、最近Ver.3となった MT4i を使わせて頂きました。

携帯用のURIは、最後に「 i 」を付けて、
http://www.nero-8.com/blog/i/　・・・となります。

このURIからの閲覧は、スパムコメント防止のためコチラを参考にさせて頂き、携帯電話以外の端末からのアクセスは閲覧制限を実施しています。

初期表示では最新記事のリストが表示され、任意のカテゴリへは上部リストから選んで閲覧が可能となります。またコメント送信が可能、そして記事内の画像はリンクとなり、リンクを開くと携帯幅へ縮小されてから送信されます。

このブログのカウンタやアクセス解析などは画像形式の記述で行っていますが、MT4iでは余計な画像を排除してしまうため、トップバナーの位置に埋め込みました。しかしこれも各記事を見る際には表示されないためトップページのみに反応する状態です。画像記述埋め込みエリアが作れると嬉しいですネ。

追記：080515
はてなブックマークに作者さま直々にコメントを頂いていたようで。。。恐縮です。

解析タグにつきまして、訂正致します。
上記取り消し部分はテンプレートではなくcgiファイルにタグを記載していました。
テンプレートへのタグ記載で問題なくタグ埋め込みができました。
この場をお借りしてお詫び申し上げます。
追記：終了

不具合などありましたら、何なりとお知らせ下さい。

2008/05/04 23:00 | Comments [2] | Trackbacks [0]

November 20, 2007

配色自由なリアルタイムカウンタ　(Flashウィジェット)

このサービスは終了した模様です。

Make an Online Now Count

「今、何人の人が自分のサイトやブログを見ているの？」を表示するカウンタです。

たまに見かける機能ですが、数字が表示されてお仕舞い…というのが良くあるデザインです。しかしこのリアルタイムカウンタは、レベルメータみたいでちょっと楽しいデザインしてます（中の人、ずっと歩き続けてます・笑）。また配色も自由に設定可能で難なく設置できました。アメリカのサービスですが、色を決めて設定ソースをコピーするだけなので無問題（少し修正が入ります）、ユーザ登録も必要無いみたいです。本来はアメリカのSNS、myspace.com 向けのサービスのようですが、myspace 以外＆ブログで複数ページに設置しても問題無く使用できました。

ではでは、設置方法です。

１，ページを開きます

modmyprofile.com というサイトの、"Realtime Users Online Counter"のページを開きます。スクロールすると、下のような設定画面が出てきます。

２，色を決めます

三通りの方法があります。
・RGBで直接入力
・画面右のカラーピッカーで色を決める
・サンプルの色から選ぶ

配色の確認は、”preview”ボタンを押すと上部にあるカウンタの色が変わります。

３，ソースコード作成します

”Make my counter!”ボタンを押します。
Your Counter Code: の下にソースコードが表示されますので、これをコピーしてメモ帳などにペーストします。

４，ソースコードの修正をします。

作成されたコードでは、FireFoxでページ表示が壊れてしまいました。
このため、下記の通り修正します。

・作成されたコードの１行目と２行目の間に青文字の部分を追加します。

<div style="width:180px;text-align:center;">
<object width="180" height="60">
<param name="allowScriptAccess" value="sameDomain" />

・最後のほうにある、<br><a href…の手前に青文字の部分を追加します。

<embed src="http://web2. … getflashplayer" />
</embed></object>
<br><a href="http://www.modmyprofile.com/" …

下のソースコードが修正を加えたものです。
これをメモ帳へコピペして書き換えて使用したほうが早いですね。
・青：追加したコードです。
・赤：表示サイズが変更可能です。幅180：高60を３：１で修正します。
・緑：自分用のIDに変更します。
・橙：表示色です。作成された表示色の6桁の数字をペーストします。

表示の隠れた所にも修正がありますのでご注意下さい。
（改行修正してあります。）

<div style="width:180px;text-align:center;">
<object width="180" height="60">
<param name="allowScriptAccess" value="sameDomain" />
<param name="flashVars" value="myid=XXXXXX&mycolor=YYYYYY">
<param name="movie" value="http://web2.modmyprofile.com/flash/usersonline/uo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://web2.modmyprofile.com/flash/usersonline/uo.swf?myid=XXXXXX&mycolor=YYYYYY" quality="high" wmode="transparent" bgcolor="#ffffff" width="180" height="60" name="uo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</embed></object>
<br>
<a href="http://www.modmyprofile.com/" title="Free Online Now Counter" style="font-size:11px;">Make an Online Now Count</a>
<br>
</div>

この修正したソースコードを自分のサイトやブログのテンプレートに追加すればリアルタイムカウンタが表示されます。

ただしアメリカでのサービスのため、向こうの夜間帯＝日本のお昼過ぎは表示に重い事があるようです。でも逆に、日本の夜間帯はアチラの朝になるのでストレスなく表示されます。日本で使うにはこの方が良いですネ（笑）

どうぞお試し下さいマセ。

2007/11/20 00:30 | Comments [5] | Trackbacks [0]

October 29, 2007

FEED機能を強化（FeedBurner & ページ埋め込み型ＲＳＳリーダー）

FEED（RSSやATOM）機能について強化しました。

● FeedBurner

最近、RSSリーダーで記事を読む事がとても多くなりました（サイトには訪れませんがいつもしっかりと読ませて頂いております）。でもRSSリーダーで読むとカウンタは回らないし、アクセス解析も難しい…。
という訳で、RSSリーダーで読む際に必要なデータ＝FEED（RSSやATOM）の購読はどれくらいあるのかな？というのが解析できたり、他にも便利な機能を色々と付加できるサービス： FeedBurner を使うことにしました。

このサービスを使う事で、上記のような事柄が解決できたり、XML形式で書かれているFEEDをこんな感じで整形表示してくれたりします。（これはこれで一長一短なのですケド）
追記：07.10.30
※当初FEEDを全文表示で始めましたが、RSSリーダーによって記事認識が不安定なものがあるようなので「続きを読む ≫」までの表示に戻しました。

…という事で既にRSSリーダでお読み頂いている方には大変申し訳ないのですが、RSS & ATOM のURL変更をお願いしなければならなくなってしまいました。。。今までのURLでも配信できるように設定済みではありますが、お手数でなければ下記の新しいURLでRSSリーダーに登録をお願い致します。。。m(__)m

RSSリーダーで購読する

設置には下記のサイト参考にさせて頂きました。多謝であります：
Ogawa::Memoranda
caramel*vanilla

● CANDY CGI - RSS reader Type1

追記：08.07.27
使用しているレンタルサーバがPHP5になり、下記「ページ埋め込み型ＲＳＳリーダー」(PHP4対応)が動作不可となった為、新たなモジュールに変更しました。
CANDY CGI さんの、RSS reader Type1 というCGIモジュールに変更しました。表示可能件数内に、１つのブログサイトで複数記事の投稿があると全て掲載されてしまうので、他の方の記事が排除されてしまいますが。。。現在の所致し方なし…という感じです。
ブログタイトルや、記事タイトル、記事要約の表示文字数が指定できるので便利です。

自立型のリーダーなので、このBlogが置いてあるレンタルサーバから各サイトへデータを拾いに行く事になります。現在は10分毎に更新していますが…その更新タイミングに当たると表示にちょっと時間が掛かりますネ。

でもこの待ち時間の間に、必死で新着を探し回ってくれてるのかと思うと暖かい目で見てられます。
…というか、どうぞ暖かい目で見守って我慢してやって下さいませ。。m(__)m

左サイドに設置してあるお友達新着記事のブログパーツを「ページ埋め込み型ＲＳＳリーダー」というものに変更しました。
今までPAIPOやドリコムRSSのサービスを使ってきましたが、更新に時間が掛かるうえ夜間帯などは表示も重くなるなど難儀な面がありました。またドリコムRSSがリストに広告配信を開始したりと動きが出てきたので代替案を模索。
色々と検索していたら機能的にも充分で掲載遅延も遙かに少ない「ページ埋め込み型ＲＳＳリーダー」を見つけて使ってみる事にしました。

追記：07.10.30
現在配布中の2007/6/16のバージョンではExciteのブログなどが上手く取り込めないようですが、対策がコチラにありました。この記述を追加する事で不具合は解消しました。

また以前のドリコムRSS時はリンク先がBlogのトップページとなっていましたが、今回からは記事への直接リンクを開くようになりました。

これからはコチラの新着リンクから記事を直接読ませて頂きます。。。（カウンタ回しますデス！）