RapidweaverにSnapShotsを入れてみた

RW3.6検証済み
このエントリの内容は RapidWeaver 3.6 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
タイトルがなんか可笑しいですね(笑)。リンク先のウェブサイトをサムネイル表示できたりする SnapShots というものがありますが、以前導入した時から色々進化したようなので入れ直してみました。

初めての方用に、最初からの手順を書いておきます。
まず、トップページの右側にある「Publishers / Bloggers」の「GET STARTED」をクリックして編集画面に移行します。

  • Choose a Color Theme
    テーマカラーの選択。まぁすぐわかりますよね。
  • Add Your Logo
    右側に表示されているサンプルの「Get Free Shots」という所にオリジナルロゴを表示できます。なければ飛ばして結構です。ファイルサイズは10kbiteまで。大きさは、100×20px。拡張子はjpgかgif。
  • Select Your Shots Language
    Japaneseを選択。
  • Configure Snap Shots Engage
    (多分)デフォルトでSnapShotsの機能をオンにするかオフにするかだと思います。(今回はオフにして特定のリンクのみサムネイルを表示するようにします)と思ったらなんか違うみたいです。誰か教えて〜。
  • Advanced Settings
    詳細設定です。
    • Show Snap Shots Link Icon
      サムネイルを表示するリンクにSnapShotsのアイコンを表示するかどうかの選択です。(今回はチェック)
    • Trigger Snap Shots on Link Icon Only
      マウスオーバーした時のサムネイル表示の設定です。リンクテキストとSnapShotsのアイコンの両方でサムネイルを表示したい場合はチェックを外します。(今回はチェック。)
    • Display Large Snap Shots by Default
      プレビューウィンドウの大きさの設定です。チェックを入れるとウィンドウが大きくなります。(今回はオフ)
    • Enable Snap Shots for External Links
      外部リンクでサムネイルを表示するかどうかの設定です。チェックを外すとサムネイル表示されません。(今回はチェック)
    • Enable Snap Shots for Internal Links
      内部リンクでもサムネイルを表示するかどうかの設定です。チェックを入れると内部リンクでもサムネイルを表示します。(今回はオフ)
    • Only Display Preview Shots
      リンク先のサイトのプレビューだけを表示するかRSSや動画なども含めるかの設定です。(今回はチェック)
設定が終わったら「CONTINUE」をクリックしてサイトのURL入力などを行います。
Eメールは捨てアドでも構いませんが、特に頻繁にメールが来る訳でもありません。(更新のお知らせとかが来ます。)
サイトURLは SnapShots を導入したいサイトのURLを入力します。「http://」は省略するようですね。(多分)
後はパスワードを設定するだけです。右側の項目は設定する必要はありませんが、SnapShots は検索エンジンのようなのでやっておいて損はないかもしれませんね。
規約に同意したら「I agree to Terms & Conditions above.」にチェックを入れて「CONTINUE」をクリック。
「Get Your Code」の「SELECT CODE」をクリックしてコードを選択、 + C でコピーします。

次に、このコードをRapidweaverに導入するのですが、以前の SnapShots は確か
<head></head> 内に記述していましたが、今回から? </body> タグの直前に記述する方法に変わったみたいです。(試しに <head></head> 内に貼ってみましたが機能しませんでした。ウチの環境だけかもしれませんが。)
しかし、Rapidweaver内で、</body> タグの直前にコードを記述する事は出来ませんので、テーマのパッケージを開いて「index.html」を直接編集する必要があります。(参考:
カスタマイズの基本/Repeating Motif Wonderland:RapidWeaverのテーマをカスタマイズする

「index.html」を開いたら、</body> タグの直前に SnapShots のコードを挿入します。こんな感じ↓


これで下準備は完了です。
しかし、このままではSnapShotsオフになっていますので、特定のリンクで機能するようにするには「class="snap_shots"」というクラスを使うのですが、方法が幾つかあります。

<div class="snap_shots"></div>
このタグで囲まれた範囲にSnapShotsを適用します。ページ全体に設定したい時に便利。

<a class="snap_shots" href="URL">テスト</a>
特定のリンクだけにSnapShotsを適用します。

<a class="他のclass snap_noshots" href="URL">テスト</a>
既にクラスを持っている場合。

逆に「Configure Snap Shots Engage」でデフォルトでSnapShotsの機能をオンにしている場合、特定のリンクでSnapShotsをオフにするには'snap-noshots'というクラスを使います。
<a class="snap_noshots" href="URL">テスト</a>
こんな感じ。使い方は上の3パターンのと同じです。

SnapShots の設定を変えたくなったら
SnapShotsにサインインすればオンラインで設定を反映する事が出来ます。(恐らく旧バージョンの記事だけど参考になるかも:Snap PreviewShot™のコードの各種設定パラメーター

これでいいはずなんですが、デフォルトで SnapShots をオフが機能してなかったので今回はパラメータを追加しました。
パラメータを追加するには、index.html に貼り付けたコードに書き足していきます。(本当はオンラインで設定できないパラメータを追加するための物だと思いますが…。)
開始タグの末尾に「?」を足して、デフォルトで SnapShots をオフにする「ap=0」を追加してみました。

さらに追加したい場合は「&amp;」を追加して下さい。例↓



これで完了ですが、テンプレートである「index.html」ファイルにコードを記述したので、すべてのリンクタグに SnapShots のクラスが挿入されているはずです。そのせいで若干表示が遅くなるかもしれません。まぁデフォルトでオフにしてあるのでそこまで影響は無いかな?
登録したアカウントで複数サイトを管理する事も出来るみたいです。

SnapShots を導入したページ
スノーモトFAN|リンク集

長すぎ&読み辛くてすみません…。


【おまけ】
「SNAP SHARES」というのは、SnapShots に自分のGoogleアドセンスを表示できる機能です。
使い方は簡単です。
「Ads from my Ad Network (ad type set by network)」を選択して、アドセンスのIDを入力。後はSAVEするだけです。
IDは、Googleアドセンスにログイン、「アカウント情報」の一番下のプロパティ情報にあります。"pub-"以下のコードを入力。
次に、「AdSense 設定」の「 許可サイト」で"
snap.com"を許可します。「自分のアカウントですべてのサイトの広告表示を許可する」にしていた場合は設定の必要がないかも知れませんが試していません。

blog comments powered by Disqus