livedoorBlogカスタマイズカテゴリ記事 - 表示中の記事（コメント数,トラックバック数）
●livedoorBlogのタグ機能でMETAキーワード(1,2) ●livedoorBlogブログスコアがわかってきた(2,3) ●ブログのユーザビリティ向上について(0,2) ●コメントプレビュー機能を追加(3,0) ●livedoorBlogのカテゴリ・月別記事ページの分割*(2,0) ●livedoorBlog読者登録ジェネレータ(0,1) ●livedoor.comのページ脇広告をパクる*(2,0) ●livedoorBlogランキングについて諸々(7,0) ●livedoorBlogコメント機能追加スクリプト(4,1) ●Blogデザイン切替スクリプト案*(8,0)livedoorBlogカスタマイズ
livedoorBlogのタグ表示用の特殊タグが公表
めでたくlivedoorBlogの新機能「タグ」を抽出できる特殊タグが公開されました。
んでも上記記事のようにタグ検索リンクを生成しても全然便利じゃないので勝手に応用。
METAキーワードとしてタグを活用しよう！
タグの性質および長さ共にMETAタグのkeywordにピッタリ。ってことで活用。
<meta name="keywords" content="<IfHasArticleTags><ArticleTagsLoop><$ArticleTag ESCAPE$>,</ArticleTagsLoop></IfHasArticleTags>" />
個別記事ページ
どんな効果があるの？
検索エンジンに対して効果があります。
ページ制作者が意図的に絞り込んだキーワードである「タグ」をメタデータとしてHTMLに埋め込むことで検索エンジンに最適化することが出来ます。
特にYahoo!検索に効果があると思います。
＃なんか変な改行および半角カンマが一つ余りますがたぶん大丈夫…じゃないかなあ？
関連記事
まか不思議な動きをする「livedoorBlogブログスコア」
livedoorBlogランキングの順位を決める「ブログスコア（ブログポイント）」だが、その算出方法は企業秘密ということで「変な動きをするスコアだなー」と見守るにとどめてきたが、最近やっとその特徴がつかめてきたのでまとめてみる。
ブログポイントは、訪問者数・投稿数・トラックバック数・コメント数・今まで投稿した記事数などを総合して集計しています。 基本的にこれらの数字が大きければ大きいほどブログポイントの値も大きくなります。
※この記事はあくまで考察であり、その内容を保証するものではありません。
算出法は「(1週間に投稿した記事数/7)*(1週間のユニークユーザ数/7)+α」だと思う
livedoorBlogでブログを運営してきた感覚では
- (1週間に投稿した記事数/7)*(1週間のユニークユーザ数（日を跨いでの重複可）/7) + α（コメント/トラックバック数）
このブログの1週間の記事数は「6」、一日平均訪問者数は「100」なので計算式に当てはめると
- (6/7) * 100 = 85
現在のブログスコアは「104」なので、この「85」に（IPの重複しない）コメント・トラックバック数を足すとちょうどそのぐらいになる。
＃ある程度以上の人気ブログになると計算が合わなくなるが…たぶん一定を超えるとフィルタがかかるとかそんなか（いい加減…）
効率よくブログスコア（ブログポイント）を稼ぐ方法は？
ランキングの上位に入っているブログの傾向を見れば分かるが「たくさん更新しないと上がらないポイント算出法」というのはほぼ間違いない。
ガンガン記事を投稿すれば上位に入るのはわかってるんだが、これ以上記事の質を落とすのは如何に、というわけでこのブログの更新は今まで通り。
関連記事
はてなリングが面白いのでいろいろ参加していたりするが、肝心のページ貼付がうまくない。複数のリングに同じidが振られるので動作が変。あと（最大）画像サイズの統一とかしてくれるといいなぁ。
＃ハウルの動く城の発売がもうすぐっぽい。
月別・カテゴリ別ページが見やすくなりました！（たぶん）
以前から「月別ページ」と「カテゴリ別ページ」が読みづらいと感じていたので、タイトル一覧とページナビゲーションをトップに追加してみた。ページスクロールが煩わしかったり前に読んだ記事を探すときなんかに有効なはず。
ブログのユーザビリティの問題点
そういえばここのブログはデザインをフルカスタマイズしていたりするが、ユーザビリティの向上について説明したことがなかったので、ライブドアBlogのデザインテンプレートの問題点を例に、改善法を挙げてみたい。
記事への固定リンクがわかりづらい
最近のテンプレートでは改善されているようだが、投稿時間や「permalink(固定リンク)」の文字列がリンクというのはわかりづらい。ゆえにタイトル自身にリンクを張るべきと思っている。
記事に「続き」があることがわかりづらい
記事に「続き」があることを表しリンクする「続き」の文字列が小さすぎる。記事内のリンクとの差別化ができていないため、ナビゲーションだということをアピールできていない。
どこからが「続き」なのかわからない
「続き」のリンクをクリックして記事の続きを読もうとすると、どこからが続きなのかわからない。明確な区切りおよび「続き」はページ内リンクである必要があると思う。
「前の記事へ」「次の記事へ」が目立っていない
せっかく有用なナビゲーションリンクである「前の記事へ」「次の記事へ」のリンクが目立っていない。できるだけ目立つようにデザインするべきだと思う。
コメント機能がイマイチ
これは個人的な意見だが、標準でついている「メールアドレス」と「情報を記憶」の選択肢はいらないと思ったのでバッサリ。
コメントの400文字制限があったり、改行等がわかりづらいのでコメントプレビュー機能を追加してみる。
他、自動URLリンクや引用行の色づけなど可読性を高められるものはlivedoorBlogコメント機能追加スクリプトでまとめて。
＃あ、あと最近コメントとトラックバックに固定リンクを設定してみた。
トラックバックの位置
これも個人的な意見だが、トラックバックよりもコメントの方が有用であると思ったので順番を逆転。トラックバックURLも滅多に必要でないはずなのでコメントフォームの下に配置。
最高のユーザビリティとは？
でもやっぱりこんな細かいユーザビリティも大事なんだが、最高のユーザビリティっては「面白い記事」「タメになる記事」だよなあ、というオチ。
関連記事
コメントプレビュー機能を追加
livedoorBlogではコメント機能に全角400字の文字数制限があり、投稿するまで文字数をカウントできないのが不便なのでコメントプレビュー機能を実装してみた。ついでにエラーとして弾かれるものもすべてチェックしている。
- 名前、本文の入力チェック
- 文字数オーバーのチェックと文字数のカウント
- プレビュー表示
※JavaScriptを有効にしないと表示されません。
＃カスタマイズしたHTML用に作ったのでソース解説は省略。要望があればlivedoorBlog汎用版を作ります。
東北にある郡山盆地はとても寒かとです...
livedoorBlogにページ分割機能が追加
やっとこさ、こののろまブログも記事エントリ数が100を超え、アーカイブも溜まってきた。そこで、以前からやらねばと思っていた「カテゴリ・月別記事ページの分割」をやってみた。
設定は管理画面の「ブログの設定/管理」から
ブログの設定画面には「アーカイブの表示件数」という項目があり、ここから「全て表示/10件ずつ/30件ずつ」から選択することが出来る。
カテゴリ／月別のテンプレートを弄る
あとはリニューアル以前のテンプレートにはないタグを追加するだけ。
<IfPrevPage><a href="<$CurrentURL$>?p=<$PrevPage$>">前のページ</a></IfPrevPage>
<IfNextPage><a href="<$CurrentURL$>?p=<$NextPage$>">次のページ</IfNextPage>
アクセシビリティも忘れずに
キチンと<HEAD>内に<LINK>タグも入れておくと、ちょいアクセシビリティなサイトに。
<IfPrevPage><link rel="prev" title="前のページ" href="<$CurrentURL$>?p=<$PrevPage$>" /></IfPrevPage>
<IfNextPage><link rel="next" title="次のページ" href="<$CurrentURL$>?p=<$NextPage$>" /></IfNextPage>
関連記事
- livedoorBlog読者登録ジェネレータ
- livedoor.comのページ脇広告をパクる
- Web実験の途中経過
- livedoorBlogコメント機能追加スクリプト
- Blogデザイン切替スクリプト案
- livedoorBlog新環境へ移行
ライブドアブログに読者機能とお気に入り機能が追加！
さっそく試してみたんだが、相手のブログにこのプラグインが表示されていないと「お気に入り」に登録することができない。そこでライブドアIDを入力するだけで読者登録できる簡単なスクリプトを作ってみた。
※JavaScriptが有効でないと使えません。
ついでにソース
<form onsubmit="location.href='http://cms.blog.livedoor.com/cms/favorite/subscribe?target='+livedoor_id_text.value;return false;">
<input id="livedoor_id_text" type="text" size="30" value="ライブドアIDを入力して下さい。" onfocus="this.value='';" /><input type="submit" value="読者登録" />
</form>
広告リンクが調子いいので増やしてみたりする。やっぱりGoogleのがピカイチなんだけど、載せている本人はクリックしたくてもできない。無駄に検索し直して飛んでみたり…
いつのまにかデザインがCSSベースになったlivedoor.com。「やりすぎ」とも思えるくらい広告を全面に押し出すが、中には興味深い広告の出し方もあるので検証してみたい。
ページ脇広告の概要
livedoor.comのページ脇広告の概要をざっと。
- SVGA(800x600)以下のウィンドウサイズでは非表示
- JavaScriptが有効でない限り表示されない
- 画面がスクロールされても表示位置を変えない
無駄なスペースの有効活用という意味では好感が持てる仕様。
まずはベースとなるHTML部分
HTML部分はとてもベーシック。
<div id="AdFixed" style="position:absolute;display:none"><a href=""><img src="" width="" height="" border="0" alt="" /></a></div>
埋め込む位置は最下部が適当だろう。
あとはJavaScriptから操作
すごくテキトーなコード。
<script type="text/javascript">
var ad = document.getElementById("AdFixed");
var window_width;
var window_height;
if(window.innerWidth) {
window_width = window.innerWidth;
window_height = window.innerHeight;
} else if(document.body.clientWidth) {
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
if(window_width >= 1000) {
ad.style.display = 'block';
adFixedScroll();
}
window.onscroll = adFixedScroll;
window.resize = adFixedScroll;
//setInterval("adFixedScroll()", 40);
function adFixedScroll() {
ad.style.top = window_height/2 + document.body.scrollTop - 100 + 'px';
ad.style.left = (window_width-800)/2 + 800 + 'px';
}
</script>
※「つづき」から実際に動作させてます。
関連記事
livedoorBlogのリニューアルやランキングイベント「ぶろぐの日」の方向転換などもあり、方向を見失ってしまった感のあるlivedoorBlogランキング。
今日は少し技術的見地からランキングの算出を検証してみたい。
livedoorBlogランキングの欠陥はどうなったか？
リニューアル前のlivedoorBlogランキングには重大な欠陥があった。それは<iframe>タグを複数埋め込むことでポイントを倍々に増やすことができるというものだ。
あの「２ちゃんねる」にまで波及させたこの問題は今、どうなっているのだろうか。
というわけで検証してみる
livedoorBlogの排出するHTMLソースを覗いてみると関連していそうなタグが自動で付与されている。
<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/c.js"></script>
<script language="JavaScript">blog_counter('disctop')</script>
<script type="text/javascript" src="http://blog09.analyzer.livedoor.jp/x.js?pid=9999"></script>
<noscript>
<img src="http://blog09.analyzer.livedoor.jp/img/a.gif?pid=9999">
</noscript>
さらっとJavaScriptファイルを読んでみると
- JavaScriptが有効なブラウザのみカウント
- 一番上のwindowオブジェクトのみをカウント対象に。つまりiframeのカウントは認めず
ということで一応対策はされているらしい。
「ブログスコア」はコメント・トラックバック数などを加味
次にランキングに直接影響する「ブログポイント」の算出法について。
ブログポイントは、訪問者数・投稿数・トラックバック数・コメント数・今まで投稿した記事数などを総合して集計しています。 基本的にこれらの数字が大きければ大きいほどブログポイントの値も大きくなります。
ブログポイントについて
という説明がされているとおり、従来の「1週間のユニークアクセス数の平均値」とは異なった方式で算出されているらしい…が、これ以上の詳細は不明。結構不思議な動きをしている。
ちなみにカウンタは表示できないの？
リニューアル後の管理画面や携帯版の画面では訪問者数が表示できるのだが、（PC版の）ブログ自体には表示する術が見あたらない。
たぶん簡単に用意できる機能だと思うので是非とも提供してもらいたいところ。
ついでにトラックバック
以前、人力検索サイト「はてな」に挙がっていた質問にlivedoorBlogランキングに関するものを見かけたのだが、明らかに従来の方式の回答が連なっているのでついでにトラックバックしておきたい。
自分も回答したのに閲覧さえされていない模様…
その他のトラックバックURL
車が壊れた。まー、いつものことではあるんだけど、なにも国道で止まらなくても…
仕方ないので代車が到着するまで自宅で作業。腹が減ったので歩いて焼き肉いき亭へ。ランチ750円がステキすぎる。夜はあまり行かないんだが…
livedoorBlog のコメント機能にワンポイント
お気づきとは思うが、コメントに色づけ処理などの機能強化を施してみた。概要は以下の通り。
- 引用符「>」「＞」の行の文字色変更
- 「http://」のURLに自動リンク付与
- 「>>コメント番号」で該当コメントへ自動リンク付与
- 管理者「とりココ」の発言の背景色を変更
汎用スクリプトを紹介
せっかく組んだスクリプトなので、(1), (2) の機能に絞った汎用スクリプトを紹介。
簡単な使い方
使い方はとても簡単。記事の「追記」項目に以下の一行を追加するだけ。
<script type="text/javascript" src="http://toricoco.livedoor.biz/ldblog_cmt.js"></script>
ちょっとカスタマイズ
文字色などを変更したい場合もカスタマイズ可能。上の一行に加えて以下のパラメータに変更を加えるだけ。
<script type="text/javascript">
// 引用行のスタイル。CSSで複数要素指定も可能
resColor1 = 'color:green'; // 「>」の行
resColor2 = 'color:blue'; // 「>>」の行
// 自動リンクのターゲットウィンドウ指定。「_blank」で別ウインドウで開く
urlTarget = '_self';
</script>
記事毎にコードを追加しないといけないが、従来のHTMLテンプレートを弄る必要がある手法に比べればだいぶ楽になったと思う。
そのうち機能追加も考えてみよう。
＃継続して使いたい方はスクリプトファイルを保存してお使い下さい。
参考にさせて頂いた記事
今回のスクリプトは以下のサイトを参考にさせて頂いた。現在では絵文字表示などにバグがあるが、少し手を加えるだけで使えるようになった。
＃地獄変00さんには、ささやかながらライブドアポイントを 100pt 贈呈してみた。
更新履歴
- 8月27日
- リニューアル後のブログに対応。ついでにリニューアル後の専用スクリプトも作ってみた。こっちだと処理速度が速い。
<script type="text/javascript" src="http://toricoco.livedoor.biz/ldblog_cmt2.js"></script>
走行距離1,700kmの旅から帰還。そして悟ったのだった。休日は「家でゴロ寝するのが一番」なのだということを。
帰りにイロイロ寄ってきたので「今日の一枚」コーナーで小出しにしていく予定。
好きなWebサイトの紹介も兼ねて
「ワケルネット」はアクセシビリティだ。CSSを無効にしても論理構造は崩れないし、資源ゴミとそうでないゴミの比率が3:7ということで七三分けなワケル君も理に適っている。
下位互換のデザインは重要だが
Webデザインにおいて「どんなブラウザでも読める」事は重要だということは間違いないが、「（ユーザーが選べる）複数のデザインを用意する」事はユーザビリティなのか、ということを最近考えている。
お気に入りのブログを好きなデザインで読みたいか？
例えばここlivedoorBlogをはじめとしたブログ・ポータルでは「デザインテンプレート」としてブログ作者がデザインを選べるようになっている。
この機能はデフォルトのHTML用のCSSを複数用意し、それを切り替えることで実現しているのだが、CSSを指定しなおせばユーザーサイドからもデザインを切り替えられることに気づいた。
つまり「お気に入りのブログを好きなデザインで読む」ことができそう。ちょっと作ってから考えてみよう。
関連記事
※コメント機能にエラーがありましたが修正しました。
メニューとコンテンツ
記事を読む
