tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

はてなフォトライフ2HTMLの改良:拡大機能を停止

The weekend starts now
The weekend starts now by designwallah

※2016/04/12 はてなフォトライフの仕様変更に対応して一部サンプルコードとブックマークレットソースを修正しました。

はてなフォトライフの画像にカーソルを合わせてクリックすると大きな画像が表示される機能があるのはご存知でしょうか。

私の場合、ブログで使う画像は出来るだけサイズを小さくしているので、フォトライフに保存された画像が拡大できてもあまり意味が無かったりします。

そこで今回は以前作成した「はてなフォトライフの画像ページからHTMLを生成するブックマークレット」を少し改良して、はてなフォトライフの画像にカーソルを合わせてクリックすると大きな画像が表示される機能を無効にした状態で画像のHTMLを生成出来るようにしてみたいと思います。

スポンサーリンク

参考サイト

はてなフォトライフの画像を拡大表示する機能を無効化する方法は、こちらの はぴらき (id:hapilaki)さんのブログ記事がとても参考になりました。感謝!

はてなブログに挿入した画像のクリック拡大表示を簡単に解除する方法 - はぴらき合理化幻想

上の記事で紹介されているclass名の変更を、前回作成した「はてなフォトライフ2HTML」のブックマークレットソースへ適用すれば、簡単に修正出来ます。

こちらにソースも貼っておきますね。

(function() {
  var re1 = /http(s)?:\/\/f.hatena.ne.jp\//; // はてなフォトライフのURLチェック用
  //var re2 = /:\/\//; // cdn-akサブドメイン付加用
  if (location.href.search(re1) != -1) { // はてなフォトライフサイト内かチェック
    // 画像ページからimgタグを取得
    var imgElem = document.getElementById('foto-body').getElementsByTagName('img')[0];
    if (imgElem != null) { // 画像ページで実行されたときだけHTMLを生成する
      // 元々のimgタグから使わない属性を削除する
      imgElem.removeAttribute('width');
      imgElem.removeAttribute('height');
      imgElem.removeAttribute('style');
      // ブログ用の属性(class、microdata)を追加する
      imgElem.setAttribute('class', 'hatena-fotolife-disable'); // 拡大機能を停止
      imgElem.setAttribute('itemprop', 'image');
      // HTMLを結合して生成
      var imgHtml = new String();
      imgHtml += '<p><span itemscope itemtype=\'http://schema.org/Photograph\'>';
      //imgHtml += imgElem.outerHTML.replace(re2, '://cdn-ak.'); // cdn-akサブドメインを付加
      imgHtml += imgElem.outerHTML; // 160412 cdn-akサブドメインを付加しない変更
      imgHtml += '</span></p>';
      prompt('はてなフォトライフからHTML生成', imgHtml);
    }
  }
})();

ブックマークレット本体

拡大機能を無効にしたブックマークレットが、こちらになります。

まず、下のリンクをブラウザのブックマークバーにドラッグしておきます。

はてなフォトライフ2HTML(拡大無効)

使い方

  1. はてなフォトライフにブログで使いたい画像を保存する。
  2. はてなフォトライフサイトで使いたい画像のページをブラウザで開く。
  3. ブックマークレット「はてなフォトライフ2HTML(拡大無効)」を起動。プロンプトにHTMLが生成されるのでコピーする。
  4. ブログ記事に貼付ける。

あとがきに代えて

元々「はてなフォトライフ2HTML」のブックマークレットは、私が使うために作ったものでしたが、私の作ったブックマークレットを使ってくださったかたから「よかったよ」とのお言葉をいただきました。ホント、作者冥利に尽きます。

「はてなフォトライフ」にアップロードした画像のHTMLコードを簡単に取得できる!便利なブックマークレット「はてなフォトライフ2HTML」の紹介。 - Hike×Hack

こちらの記事には、今回のブックマークレットの使い方を詳しく解説してくださっています。

また、かけすけ (id:kakesuke) さんのブログでは、ライフハックについて詳しく語られています。ちょっとした工夫で様々な場面を便利にするコツ等を紹介してますので、ぜひご覧になってみてください。

それでは今回はこの辺で。

  • このエントリーをはてなブックマークに追加