« ブログにショートカットキーを入れる - 機能紹介 | Main | Thingamablog の Mac OS X 用配布ファイル »
このブログのショートカットキー解説二回目はその設置方法です。
この機能のための JavaScript はここで公開しているテンプレートセット「Mac_Stripe-XHTML_String-ja」をベースにしたテンプレートセットを使用しているブログ用に書かれています。Thingamablog のデフォルトのテンプレートセットでは「次のページ」「前のページ」「上のページ」が機能しません。
機能させるための情報はセクション「デフォルトテンプレート」に書きました。そんなに色々何かしなければならないわけではありません。
用意するものが二つあります。
有名な JavaScript ライブラリです。jQuery には同じバージョンでも三種類のファイルがあります。
jQuery-バージョン.js全くファイルサイズを切り詰めていないファイルです。これは jQuery のソースを参照する必要があるような開発者向きのファイルです。私も jQuery を利用して開発しますが、これが必要になることはまずありません。
jQuery-バージョン.pack.jsファイルサイズを極限にまで切り詰めたファイルです。その分ブラウザはこれをロードして実行するときにちょっと処理が必要になります。ネットワークの帯域がボトルネックになるようなサイト向きです。
jQuery-バージョン.min.jsファイルサイズを切り詰めなおかつブラウザには特別な処理が必要ないファイルです。通常はこのファイルがベストです。ここではこれを使用するものとして説明します。
shortcutkey.jsこの機能のために作成した JavaScript ファイルです。まだライセンス条件を決めていませんが、良識の範囲内で使用してください。著作権や著作人格権などの著作周辺権は放棄しません。機能はオブジェクト指向で実装しているので手を加えたい方は継承したオブジェクトで手を加えてください。
上で用意したファイルは Thingamablog の「Web ファイル」としてサイトに置きます。以下、ブログのフロントページと同じ場所に置くものとして説明します。
Web ファイルを追加するのは Thngamablog の機能を使うと便利です。直接 Finder や Explorer で置きに行くと、複数ブログが設置してあるとどれがどのフォルダだかわかり難いからです。Thingamablog のメイン画面の左サイドにあるツリービューでそのブログを開くと[Web ファイル]というフォルダがあるので、それを右クリックして[ファイルをインポート]をするとフロントページと同じ場所に置くことができます。
編集対象のテンプレートは
です。これも Finder や Explorer で開くのではなく Thingamablog で開くと便利です。ファイルで使用する文字セット(UTF-8 とか Shift_JIS とか)も間違えなくて済みます。先ほどの[Web ファイル]フォルダの上にある[テンプレート]フォルダを使います。
編集箇所はどのテンプレートも同じで head 要素内に 8 行ほど追加します。head 要素ならどこでもよいのですが、そのページの文字セットを規定している meta やデフォルトのスクリプト言語を指定する meta 要素より後に追加するのが適切でしょう。よくわからなければ </head> の直前に入れてください。入れる内容は以下のとおりです。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="shortcutkey.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
var TheShortcutKey = new ShortcutKey();
$(document).keypress(function(event) { TheShortcutKey.KeyEventHandler(event); });
});
// --></script><script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../shortcutkey.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
var TheShortcutKey = new ShortcutKey();
$(document).keypress(function(event) { TheShortcutKey.KeyEventHandler(event); });
});
// --></script><script type="text/javascript" src="../../../jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../../../shortcutkey.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
var TheShortcutKey = new ShortcutKey();
$(document).keypress(function(event) { TheShortcutKey.KeyEventHandler(event); });
});
// --></script>「次の記事」や「前の記事」でカレントになった記事のスタイルを指定します。必要なければこのセクションは飛ばしてください。
指定するのは styles-site.css ファイルの中です。どのように見せるかは人それぞれの好みやポリシーがあると思いますが、私は次のようにしました。参考にしてください。
#Content .blogbody.current {
border-left: thick solid #C0C0C0;
}これだけだとカレントになるとボーダーが入る分だけ記事のブロックが若干右にずれます。それがいやなときには次のようにするとよいでしょう。
#Content .blogbody {
border-left: thick solid バックグランドと同じ色;
}
#Content .blogbody.current {
border-left: thick solid #C0C0C0;
}ここまでで設置は終了しています。公開すればこのブログと同じようにショートカットキーが有効になります。しかし、これだけでは閲覧者は気付きません。各ページにインストラクションを入れておいた方がよいでしょう。例としてこのブログに入れているインストラクションについて説明します。
まずインストラクションを入れた箇所ですが、上で編集した各テンプレートの <div id="Content"> の直後です。サイドバーでもよいのですが、操作目的から考えてこの位置の方が自然だろうと考えました。
次にインストラクションは慣れてしまえば不要なものなので小さくコンパクトにするためにスタイルシートに手を入れました。styles-site.css に次の記述を加えました。
#Content dl.shortcutKeyHelp {
margin: 0;
padding: 0;
font-size: smaller;
}
#Content dl.shortcutKeyHelp dt {
display: inline;
}
#Content dl.shortcutKeyHelp dt:after {
content: ':';
}
#Content dl.shortcutKeyHelp dd {
display: inline;
margin: 0;
padding: 0;
margin-right: 1em;
}そしてテンプレート毎に次の内容を入れました。
<dl class="shortcutKeyHelp">
<dt><kbd>J</kbd></dt>
<dd>次の記事</dd>
<dt><kbd>K</kbd></dt>
<dd>前の記事</dd>
<dt><kbd>O</kbd></dt>
<dd>記事のページ</dd>
</dl><dl class="shortcutKeyHelp">
<dt><kbd>J</kbd></dt>
<dd>次の記事</dd>
<dt><kbd>K</kbd></dt>
<dd>前の記事</dd>
<dt><kbd>L</kbd></dt>
<dd>次のページ</dd>
<dt><kbd>H</kbd></dt>
<dd>前のページ</dd>
<dt><kbd>O</kbd></dt>
<dd>記事のページ</dd>
<dt><kbd>U</kbd></dt>
<dd>上のページ</dd>
</dl><dl class="shortcutKeyHelp">
<dt><kbd>L</kbd></dt>
<dd>次のページ</dd>
<dt><kbd>H</kbd></dt>
<dd>前のページ</dd>
<dt><kbd>U</kbd></dt>
<dd>上のページ</dd>
</dl>
最初に書いたとおり shortcutkey.js はテンプレートセット「Mac_Stripe-XHTML_String-ja」またはそれをベースにしたテンプレート用です。また上の説明でもそれを前提に書いた箇所が若干あります。このセクションでは Thingamablog のデフォルトテンプレートで Mac_Stripe-XHTML_String-ja のベースになったテンプレートセット mac_stripe を例に、Thingamablog のデフォルトのテンプレートセットを用いている場合にこれまでセクション内容と異なるところを説明します。
特に異なるところはありません。
特に異なるところはありません。
アーカイブページ、カテゴリページそしてエントリページのテンプレートに追加して編集すべき箇所があります。
それぞれのテンプレートには次の箇所があります。(20 行目あたり)
<!-- back and forward -->
<p align="center">ここを次のようにしてください。
<!-- back and forward -->
<p class="backAndForward" align="center">
デフォルトのテンプレートでは <div id="content"> となっているところ Mac_Stripe-XHTML_String-ja では <div id="Content"> としています。ですからスタイルシートの記述がそれに合わせてあります。#Content となっているところを #content に読み替えてください。
Mac_Stripe-XHTML_String-ja をベースしていても変更していたら shortcutkey.js が期待どおりに動作しない箇所について説明します。
デフォルトのテンプレートでも Mac_Stripe-XHTML_String-ja でも記事のブロックは <div class="blogbody"> というように blogbody クラスの div 要素です。これを前提にしています。
他のクラスを追加してもよいですが blogbody は外さないでください。また p 要素など他の要素に変更しないでください。
記事のブロックの中の記事のページへのリンク(固定リンク)のタイトルが permanent link であることを前提にしています。
固定リンクを記事のブロックの外に出したり、title 属性の値を permanent link 以外にしないでください。
アーカイブページ、カテゴリページ、エントリページにある前後ページとフロントページへのリンクがあるブロックが <p class="backAndForward"> というように backAndForward クラスの p 要素であることを前提としています。
他のクラスを追加してもよいですが backAndForward は外さないでください。また div 要素など他の要素に変更しないでください。
アーカイブページ、カテゴリページ、エントリページにある前後ページとフロントページへのリンクがあるブロックの中で、フロントページへのリンクのテキストが Main であることを前提としています。ちょっと不正確な言い方ですね。フロントページへのリンクになっている a 要素の子孫のテキストノードの nodeValue を連結したものが Main であることを前提としています。
nodeValue がない画像等を追加してもよいですが、リンクの文言は Main にしてください。
アーカイブページ、カテゴリページ、エントリページにある前後ページとフロントページへのリンクがあるブロックの中で、href 属性付きの a 要素は最高三つまであり、前のページ、フロントページ、次のページの順でリンクが書かれていることを前提としています。ここでの順序は HTML 的な順序です。表示の順序ではありません。
ul 要素などを使ってもよいですが、他のリンクを入れたり順序を変えたりしないでください。