カスタム・検証

ロゴマークやサイトタイトルをクリックしたらホームに戻る＆マウスオーバー時のツールチップをカスタマイズする方法

2014/06/16 Mon

このエントリの内容は RapidWeaver 5.x を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。

2ちゃんねる掲示板である質問を見かけたのでエントリを書きました。（そこでも回答したのですが詳しく説明するためにこちらでも書きます）

最近の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を設定するには以下の様にコードを編集します。


	
		％logo％
	

	％site_title％

見てわかると思いますが、ロゴマークやサイトタイトルに、WEBサイトのURLがアンカー（リンクタグ）として設定されています。
％base_url％の部分が、WEBサイトのURL（このサイトだとhttp://rapidweaverfan.net）に当たります。
これでロゴマークやサイトタイトルをクリックするとベースのURLに移動するようになります。

サイトタイトルとロゴマークにマウスオーバーした時のツールチップを設定する

標準テーマである「Baukraft」にはマウスオーバーした時のツールチップが設定されていませんが、サードパーティー製のテーマには「Home」と設定されているものがあるようです。違和感がある方もおられると思いますが、ツールチップ（吹き出し）としては正しいように思います。ただ、「ホームに戻る」など自由な言葉に変更することは標準の機能では出来ません。そこでこれまでと同じようにindex.htmlを編集します。

アンカータグにtitleを指定する

サイトタイトルやロゴマークのアンカータグにタイトル属性を指定したい場合は、以下の様にコードを編集します。


	
		％logo％
	

	％site_title％

これで、マウスオーバー時のツールチップを制御することが出来ます。タイトル属性にサイトタイトルを設定したい場合は以下のようにします。


	
		％logo％
	

	％site_title％

はじめからツールチップが設定されているテーマの場合

例えばBrandon Lee Theme DesignのAmbienceというテーマだとこの様な記述になっています。


	
		％site_title％
		％site_slogan％
		
			％logo％

ソースコードの6行目を見ると、title="Home" という記述があります。これがツールチップの部分です。ここの「Home」の部分を書き換えればOKです。

以上でこのカスタマイズは終了です。

テーマのindex.htmlを編集する

％site_title％

サイトタイトルとロゴマークにWEBサイトのURLを設定する

サイトタイトルとロゴマークにマウスオーバーした時のツールチップを設定する

アンカータグにtitleを指定する

はじめからツールチップが設定されているテーマの場合

％site_title％

％site_slogan％

用意する物

導入手順

Twitter で自分のID（Widget ID）を取得する

Googleスクリプトで Twitter RSS スクリプトを実行する

取得した Twitter RSS を DooBox の The RSS Factory Stack で表示してみた

サンプルページ

お勧めStack

RW5&6 日本語化ファイル

My Twitter Updates

人気記事ランキング

ABOUT

COMMERCIAL