スポンサードリンク
カテゴリー:"カスタマイズ"

TypePad の「上級者テンプレート」に[最近の記事]を表示させよう

 TypePadの「上級者テンプレート」って、デザインを好きにカスタマイズできるのはいいんですが、デフォルトでは「最近の記事」のリストが表示されないんですよね。

 でもそれはちょっと寂しいので、なんとかできないかと頑張ってみました。最初にトライしたのは、TypePadの機能で実現する方法です。

 新規に「recent-posts」ってテンプレートモジュールを作って、以下のソースを張り付けて保存します。

<!-- recent comments module -->
<div class="module-recent-comments module">
<h2 class="module-header"><$MTTrans phrase="最近の記事"$></h2>
<div class="module-content">
  <ul class="module-list">
    <MTEntries lastn="10" sort_order="descend">
    <li class="module-list-item"><MTEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTEntry></li>
    </MTEntries>
  </ul>
</div><!-- .module-content -->
</div><!-- .module-recent-comments .module -->

 次にインデックステンプレートやアーカイブテンプレートに以下のソースと追加して、保存すればOK!

<$MTInclude module="recent-posts"$>

 ところが、トップページや個別エントリーのページではうまく表示されるものの、月間アーカイブやカテゴリーアーカイブのページでは期待通りの内容が表示されません。

 月間アーカイブではその月の中での新しいエントリーが、カテゴリーアーカイブではそのカテゴリー内での新しいエントリーが表示されてしまいます。これは困った。

 そこで「どこかに最新のエントリーのリストは無いかいなぁ?」と考えて思いついたのが、RSSを利用する方法です。RSSのパースには、jkl-parsexml.js というjavascriptライブラリを使います。

 「最近の記事」という名前でタイプリスト(メモ)を作成し、下記のソースを貼りつけて保存します。

<script type="text/javascript" src="/js/jkl-parsexml.js"></script>
<script type="text/javascript"><!--
  var url = "/index.rdf";
  var XmlParser = new JKL.ParseXML( url );
  var obj = XmlParser.parse();
  
  var list = "";
  for(var i=0; i<10; i++){
    list += '・<a href="'+obj['rdf:RDF'].item[i].link+'">'+obj['rdf:RDF'].item[i].title+'</a><br />';
  }
  document.write(list);
// --></script>

 これをテンプレートモジュールの時と同様に、各ページのテンプレートに以下のソースを追加して読み込んでやればOKです。

<$MTListInclude name="最近の記事"$>

 これでどのページでも最新の記事のリストが表示されるようになりました。

 ですが、RSSを読み込んで処理している間、画面の表示(描画)が止まってしまうのはちょっといただけません。ウチみたいに左のサイドバーにセットしてると、その分本文の表示が遅れてしまいます。

 そこで、非同期に動作するように変えてみました。ソースは以下のとおりです。

<div id="resent-entry"></div>
<script type="text/javascript" src="/js/jkl-parsexml.js"></script>
<script type="text/javascript"><!--
  var url = "/index.rdf";
  var XmlParser = new JKL.ParseXML( url );
  
  var writelist = function(obj){
    var list = "";
    for(var i=0; i<10; i++){
      list += '・<a href="'+obj['rdf:RDF'].item[i].link+'">'+obj['rdf:RDF'].item[i].title+'</a><br />';
    }
    document.getElementById('resent-entry').innerHTML = list;
  }
  
  XmlParser.async(writelist);
  XmlParser.parse();
// --></script>

 あとから にゅるん とリストが追加されるのが気になりますが、全体としての表示速度は早くなったので、これで良しとしましょう。

注意:
 jkl-parsexml.js のパスとRSSファイルのパスは、ご自身の環境に合わせて変えてください。また、jkl-parsexml.js を利用するための準備作業については割愛させていただきました。

参照リンク
 ・javascript で XML をパースしよう 「jkl-parsexml.js」

ソースコードのハイライトに google-code-prettify を導入してみる

 これまで当ブログのソースコードのハイライトには 「CodePress」を使ってたんですが、IE と Firefox でしかちゃんと動かないみたいなんですよね。

 まぁ、導入したのが2007年12月ですから、「もしかしてヴァージョンアップすれば良くね?」と思ったんですが・・・。なんと!ドメインが売りに出されていました。お~ぃ。

 念のためググってみたら、SourceForge にソースあったんだけど、最終リリースが「2007-09-26」だし・・・。

 とはいえ、IE と Firefox でしかまともに動かないのも困りものなので、google-code-prettify を導入してみることにしました。

 実は2007年12月の時点で「google-code-prettify」の導入を検討してたんですねぇ、私。すっかり忘れてましたけど。

 当時のエントリーによると「BODYタグ に細工をしないといけないので、導入を断念」したとか。いや~、知識がないってのはそういうもんなんですねぇ。今だと「イベントリスナーに追加する方法も書いてあるじゃん!」てことが解るわけですから、僕も多少は進歩してたようです。

 さて、導入の手順ですが

  1. ダウンロードしたZIPファイルを解凍します。
  2. srcフォルダ内のファイルをブログにアップします(例:/js/prettify/)。
  3. タイプリスト(メモ)に読み込むためのソース記述し、保存します。

保存するソースのサンプルは以下のとおりです。

<link href="/js/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/prettify/prettify.js"></script>
<script type="text/javascript">
addEventListener('load', prettyPrint, false);
</script>

 使い方は、ハイライトする部分をPREタグに入れて、prettify用のクラスを指定すればOK。ちなみにソース内の < は &lt; に変換しておいた方がよさげです。

例えば、こんなコードが

<pre class="prettyprint lang-perl">
#!/usr/bin/perl

use strict;
use warnings;

print "Hello World!";
</pre>

こう表示されます。

#!/usr/bin/perl

use strict;
use warnings;

print "Hello World!";

うん。いい感じ。

参照リンク
 ・google-code-prettify - Project Hosting on Google Code
 ・MOONGIFT: ≫ Google Codeで使われているソースコードハイライタ「Google Code Prettify」:オープンソースを毎日紹介

ブログのデザイン&レイアウトを変更してみたよ

 唐突に思い立って、ブログのデザインを変更してみました。これまでは「2列右側サイドバー」だったのを、「3列両側サイドバー」に変更です。

 個人的には「3列右側サードバー」という変則的なデザインにかな~り惹かれたんですが、実際にやってみると、ちょっと読みづらくて断念しました。

 ついでにブログの幅も 800×600 用だったのを、1024×768 に合わせてみました。BROWSIZE.ORG 様のツールで、ユーザーさんの画面の大きさが調べられるんですが、一番多いモニタの幅が 961~1024 なんですよね。ちなみにモニタの幅が 800 近辺の人の割合は 14% ほど。さて、この割合は多いのか?少ないのか?

 とは言っても、最近売られてるデスクトップPCのモニタは17インチ以上ばかりだし、ノートPCだって平気で表示幅が 1000 超えてるし・・・いいよね、いいよね(言い訳)。

 ちなみに、ジャストブログで3列のデザインを選択すると問答無用で 800×600 レイアウトになっちゃうんで CSS を弄らなきゃなりません。つうわけで、「カスタムCSSを編集」で変更したCSSを晒してみます。

・3列両側サイドバー用

・3列右側サイドバー用

グーグルガジェットを貼り付けてみよう

 グーグルガジェットが「一般のWebページにも貼り付けられる」って話は知ってたんですけど、どうやって良いか解らなかったんですよね。

 で、いろいろググッってたら、ネタフルさんで「Google Gadgets For Your Webpage」なるページがあると知りまして、早速行ってきました。

 実はサイドバーに貼るいい時計がないかなぁ~と思ってたんですよね。

 しかし、流石はグーグルと言いますか、既に41019個ものガジェットが登録されてましたよ。すごいですね。

 貼り付けは至って簡単。気に入ったガジェットの「ウェブページへ追加」ボタンをクリックして、個別の設定をした後「コードを取得」ボタンで得られるソースを1行、Webページに追加するだけです。

 あっ!そうそう。JavaScript の使えないブログには貼り付けれないので、ご注意ください。ブログサービスによっては、JavaScript はNGだけど、グーグルガジェットはOKなところもあるみたいですけど。

 でもね、最初っからブログ用に設計されている訳じゃないから、どうもぴったり来る時計のガジェットが見付からなくて・・・。せめて枠線を消せれば良さげなのもあったんですけどねぇ。残念。

 そうは言っても何も貼り付けないのも悔しいので、パックマンなんか貼り付けてみました。
 暇つぶしにどうぞ。

参照リンク
 ・Google Gadgets For Your Webpage

似たようなエントリーを紹介するサービスだそうです

 ITmedia で紹介されていた「シムエントリ」というサービスが面白そうなので、早速、登録してきました。

 ブログのURL(というかRSS)を登録して、自分のブログに表示用のソースコードを貼り付けておくと、内容の似たエントリーの情報を送ってくれるんだそうです。
 ただ、サーバの定期更新に時間がかかるようで、表示されるようになるまでに、最大で1日程度かかるようです。

 ところがこのソース、エントリーごとに貼らないといけないんですよ。
 HTMLテンプレートがさわれるブログなら、そこをいじれば解決なんですが、JUSTBLOG ってHTMLテンプレートが触れないんですよね・・・orz
 かといって、エントリーごとにソースを貼り付けるのも面倒だし・・・。

 というわけで毎度のごとく JaxaScript の力を借りてみることにします。方法は以下のコードをサイドバーに仕込むだけです。

 とりあえず乗っけることはできたけど、予定外の大苦戦。とほほ。

参照リンク
 ・シムエントリ
 ・こえむの編集後記
 ・ITmedia:ブログを類似記事で結ぶパーツ「シムエントリ」

ソースコードをハイライトしてみる

 最近、ブログに貼り付けてあるソースコードがハイライトされてるのをよく見かけるので、自分のブログにも仕込んでみました。

 とは言っても、先ずはモジュール探しです。「ブログ ソースコード ハイライト」でググって、「あなたのソースコードを彩る、Syntax Highlighterまとめ」というページと「ソースコードのハイライトを行うJavascriptプログラムの比較」というページを見つけました。

 ローカルでソースコードをハイライト済のHTMLに変換してから、ブログに貼り付けるのは嫌だったので、Javascript+CSS で動作するものを漁ります。

 どうやらメジャーなのは Google の「google-code-prettify」のようですが、こいつは BODYタグ に細工をしないといけないので、導入を断念(ジャストブログはHTMLテンプレートに触れないのです)。

 次にメジャーそうだったのが「Highlight.js」ですが、ハイライトが今ひとつ地味なのと、ソースを pre と code の2つのタグで囲まなきゃいけないのが面倒そうだったのでパス。

 「Chili」はハイライトもきれいで結構いい感じだったんですが、僕が普段使っている Perl に対応して無いので対象外となりました。

 最終的に「CodePress」を使う事にしました。本来はJavaScript製のエディターらしいんですが、ソースをきれいに表示してくれれば僕的に問題なしです。行番号も表示してくれるのはエディターならではの機能なんでしょうが、ブログ内でソースを解説する時にも重宝しそうです。

 では、セッティングです。
  1、ダウンロードしたZIPファイルを解凍します。
  2、「コントロールパネル ≫ ファイル」から、パスを間違えないように、ファイルをアップロードして、codepress.js のURLを取得します。
  3、下記のソースを適当なタイプリスト(メモ)に3のソースをコピー(貼り付け)し、保存します(codepress.js のURLは各人の環境に合わせて変えてください)。

以上で仕込みは完了です。
 今回、新たにタイプリストを作成した場合は、「ブログ ≫ デザイン ≫ 現在のデザインを編集 ≫ 表示項目を選択」から、該当のタイプリストを表示するように設定してください。

 後はブログのエントリー内に下記の要領でソースを埋め込めばOK。


 ちなみに Perl のソースだとこんな感じ。

参照リンク
 ・Blog.37to.net:あなたのソースコードを彩る、Syntax Highlighterまとめ
 ・ピクスログ:ソースコードのハイライトを行うJavascriptプログラムの比較

「はてなスター」を付けてみました

 ふと思い立って、このブログに「はてなスター」を付けてみました。エントリータイトル横の「HatenaStarAdd」をクリックすると、スターが付けれます。

 ではジャストブログに「はてなスター」を設置する手順ですが、その前に「はてな」のアカウントの無い人は、アカウントを取得してください。無料で取得できます。

 それでは、始めましょう。
  1、「はてなスターをブログに設置するには」の手順に従い、HTMLソースを取得します。
  2、生成されたHTMLソースをテキストエディタ(メモ帳など)にコピー(貼り付け)します。
  3、下のソースの3行目を2のソースに追加します。
  4、適当なタイプリスト(メモ)に3のソースをコピー(貼り付け)し、保存します。
以上で作業は終了です。

 今回、新たにタイプリストを作成した場合は、「ブログ ≫ デザイン ≫ 現在のデザインを編集 ≫ 表示項目を選択」から、該当のタイプリストを表示するように設定してください。

 今回の作業では別館さんの「はてなスターをココログに設置してみる」を参考にさせていただきました。
 ココログもジャストブログも同じ TypePad だし、似たようなもんでしょ。と思ってやってみたら、すんなり出来ちゃいましたよ。

 ジャストブログをカスタマイズする時は、「ココログ」や「TypePad」用に紹介されてるテクニックを流用するのが良さげな感じです。

参照リンク
 ・はてなスター日記:2007-07-07 はてなスターをブログに設置するには
 ・別館:はてなスターをココログに設置してみる

たくさん貼ればいいってものでもないでしょうが

 どこのブログにおじゃましても、たいてい1コや2コは貼り付けてあるのが、ランキングサイトやアクセス解析サイトのバナーなんですが、僕、このバナーが大好きなんですよ。

 特に 15px × 80px くらいのちょっと慎ましやかなサイズが良いですね。文字とか絵とかをデザインするにもちょうどいいと思います。

 そんなわけで、あちこちのブログにおじゃましては、気に入ったバナーを見つけると、即クリック!。そのままユーザー登録しては自分のブログに貼り付けてたら、その数が27コにもなっちゃいました。
 とは言うものの、ユーザー登録はしたけれど、やっぱりバナーが気に入らなくて、やめちゃったのもありますけどね。

 そもそもが、バナーを貼るのが目的なのでランキングなんてお構いなし。ランキングサイトを見に行くことすらしてません(オィオィ)。でも、アクセス解析は利用するようになりましたね。

 もちろん JustSystem Blog(つか TypePad ね)にも解析機能はあるんですが、いかにも貧弱なんですよね。
 今までは Google Analytics を併用してたんですけど、高機能なのは良いんですが、データの反映に時間が掛かるんですよ。昨日のデータが今日の夕方にならないと入らないみたいな。
 で、今は i2i.jpSite Meter もあわせて使ってます。

 i2i.jp はそこそこ高性能な上、アクセスデータが即反映されるのがいいですね。対して Site Meter はデータの反映に1時間くらいかかるうえ、英語のサイトなんですが、ログインせずに解析データが見られるのでお手軽です。逆に言うと、だれでもウチのブログのアクセスデータが見れちゃうわけですが、まぁ、見られて困るものじゃなし。

 こうやっていろいろ貼り付けていくと、弊害としてサイトが重くなっちゃうんですが、バナーを取りに行ったりするのは、メインの HTML を読み込んだ後なので、記事そのものは読めるだろう。ということで、お許しください。

 てなわけで、そういうのに興味のある方は、右のサイドバー中ほどの「OTHER」なあたりのバナーから是非どうぞ。
 今後も増えますよ(たぶん)。

スポンサードリンク

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク