ブログに「いま読込んでますよー」と「リンク先はどこなの？」を知らせる機能をつけてみた

少し分かりにくいけど、枠に囲まれたところがダウンロードボタンです。

• HubSpot/pace · GitHub

最低限必要なのは「pace.min.js」とCSSファイル。CSSファイルは好みのデザインのものを選んでください。

下記はデザインを「corner-indicator」にしたときの記述例です。ファイルパスは環境に合わせます。

<script src="/pace.min.js"></script>
<link href="/pace-theme-corner-indicator.css" rel="stylesheet">

これだけでOK。

素敵で親切なランディングページ。

• Tooltipster – The jQuery Tooltip Plugin

最低限必要なのは「tooltipster.css」と「jquery.tooltipster.min.js」です。

セレクタはあとで記述する、ツールチップを表示したい要素に合わせます。この例では「tooltip」。

 <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /><script type="text/javascript" src="/jquery.tooltipster.min.js"></script>
<script>
	jQuery(document).ready(function() {
		jQuery('tooltip').tooltipster();
        });
</script>

上には含んでないけれど、必要ならjQueryを読込むのを忘れないように注意。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>

画像にツールチップを表示したい場合。

<img src="画像のURL" class="tooltip" title="ツールチップに表示する内容" />

リンクにツールチップを表示したい場合。

<a href="リンク先のURL" class="tooltip" title="ツールチップに表示する内容">テキスト</a>

完了！