ロゴマークやサイトタイトルをクリックしたらホームに戻る&マウスオーバー時のツールチップをカスタマイズする方法
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
リンクを追加した画像を選択する方法
2008/02/13 Wed カテゴリ: 使い方・Tips
ブログの投稿内容(編集画面)などに配置した画像にリンクを設定すると、画像をクリックした時にリンク設定画面?が現れます。リンクの再設定をする場合は便利ですが、メディアインスペクタを表示したい時は困ります。
>> 続きを読む...
>> 続きを読む...
サイトタイトルをクリックしてトップページに戻る
現在、このブログではBravoというThemeを使っていますが、ノーマルの状態だと一般的なブログサイトで見られるサイトタイトルをクリックしてトップ(ホーム)ページへ戻るということが出来ません。
>> 続きを読む...
>> 続きを読む...
Free Plugin リンク集
2008/04/05 Sat カテゴリ: Theme・Plugin 情報 | リンク集
Free Theme リンク集
2008/06/27 Fri カテゴリ: リンク集 | Theme・Plugin 情報
RapidWeaver リンク集
2008/06/09 Mon カテゴリ: リンク集 | Theme・Plugin 情報