ロゴマークやサイトタイトルをクリックしたらホームに戻る＆マウスオーバー時のツールチップをカスタマイズする方法
2014/06/16 Mon カテゴリ: カスタム・検証
最近のRapidWeaverテーマはサイトタイトルやロゴマークへのリンク（このサイトで言うとhttp://rapidweaverfan.net）が設定されているものが多いですが、標準でインストールされているテーマにはその設定が無いようです。
今回はテーマを直接カスタマイズしてその機能を実装しようと思います。
テーマのindex.htmlを編集する
サンプルとしてテーマビューから標準テーマの「Baukraft」を右クリックで複製して名前を付けて保存し、同じく右クリックでFinderにテーマのContentsフォルダを表示します。その中に「index.html」というファイルがありますのでテキストエディタなどで開きます。
このテーマでロゴマークとサイトタイトルに該当するコードはこの部分です。
％logo％％site_title％
上記のソースコードで注目する所は、3行目の％logo％と5行目の％site_title％です。（＊都合により％は全て大文字で表記していますが実際は半角英数で記述してください）
％logo％の部分は設定したロゴマークの画像が、％site_title％には設定したサイトタイトルが挿入される仕組みになっています。
サイトタイトルとロゴマークにWEBサイトのURLを設定する
サイトタイトルやロゴマークに、WEBサイトのURLを設定するには以下の様にコードを編集します。見てわかると思いますが、ロゴマークやサイトタイトルに、WEBサイトのURLがアンカー（リンクタグ）として設定されています。
％base_url％の部分が、WEBサイトのURL（このサイトだとhttp://rapidweaverfan.net）に当たります。
これでロゴマークやサイトタイトルをクリックするとベースのURLに移動するようになります。
サイトタイトルとロゴマークにマウスオーバーした時のツールチップを設定する
標準テーマである「Baukraft」にはマウスオーバーした時のツールチップが設定されていませんが、サードパーティー製のテーマには「Home」と設定されているものがあるようです。違和感がある方もおられると思いますが、ツールチップ（吹き出し）としては正しいように思います。ただ、「ホームに戻る」など自由な言葉に変更することは標準の機能では出来ません。そこでこれまでと同じようにindex.htmlを編集します。アンカータグにtitleを指定する
サイトタイトルやロゴマークのアンカータグにタイトル属性を指定したい場合は、以下の様にコードを編集します。これで、マウスオーバー時のツールチップを制御することが出来ます。タイトル属性にサイトタイトルを設定したい場合は以下のようにします。
はじめからツールチップが設定されているテーマの場合
例えばBrandon Lee Theme DesignのAmbienceというテーマだとこの様な記述になっています。ソースコードの6行目を見ると、title="Home" という記述があります。これがツールチップの部分です。ここの「Home」の部分を書き換えればOKです。
以上でこのカスタマイズは終了です。
Comments
