【はてなブログ】Flickr貼り付けをレスポンシブ対応させる方法

2018.02.25

| Web・ガジェット

はてなブログでFlickrを利用して写真を貼り付けると、大きくなったりレスポンシブしてくれない、というかiframe読み込みだから融通きかないし、縦写真と横写真のときもあるし、、、とかとか問題点がモリモリです。とはいえFlickrを利用した写真管理は楽だし、アップロードも楽だしということでやめられないです。

やりたいこと

  • Flickrで写真を貼りたい
  • HTMLはいちいちいじりたくない
  • PCの時、SPのときできちんとサイズ調整したい
  • 縦写真と横写真でclassを分けたい

やったこと

吐き出される前のFlickrのHTMLは、これ

<a data-flickr-embed="true" href="https://www.flickr.com/photos/tako3/25579868607/" title="DSC03629 by tako3ch_jp, on Flickr">
  <img src="https://farm5.staticflickr.com/4675/25579868607_29e84fe5c6_b.jpg" alt="DSC03629" width="683" />
</a>

せっかくdata要素(data-flickr-embed=”true”)を持っているので、これを本文以下のpタグ内から洗う。

横写真なのか縦写真なのかを判断したいので、img要素のwidthを取ってきて、縦の時はclass=”flickr-wrp-portrait”で横の時はclass=”flickr-wrp-landscape”をiframeを括るように実装。

// 縦写真
<div class="flickr-wrp-portrait">
<iframe ~~~~~~~></iframe>
</div>
// 縦写真
<div class="flickr-wrp-landscape">
<iframe ~~~~~~~></iframe>
</div>/* Your code... */

こんな感じになる。divで括れたらこっちのものなので、あとはCSSで調整。

CSSで調整する際には、
吐き出されるiframeのdata-natural-を見て、これをメモっておくか覚えておく。

<iframe ~~ data-natural-width="1024" data-natural-height="683" ~~></iframe>

というわけで次

ソースコード

JS

[https://code.jquery.com/:title=jQuety]を現在使ってないかたは、

管理画面 > 設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加

この欄にこれをコピペして保存しておいてください。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

jQueryのバージョンは3.3.1を使用しているけども、1.11とかそのへんでも問題ないです。

貼り付ける場所

管理画面 > デザイン > カスタマイズ > フッタ

貼り付けるもの

// flickrのサイズ調整するやつ
$(document).ready(function() {
  $('.entry-content [data-flickr-embed]').each(function() {
    var f_img_w = $(this).children('img').attr('width');
    if (f_img_w != 683) {
      $(this).parent().wrapInner( '<div class="flickr-wrp-landscape" />' );
    }else{
      $(this).parent().wrapInner( '<div class="flickr-wrp-portrait" />' );
    }
  });
});

683のところは、記事投稿画面のHTML編集のFlickrのタグにwidth=☓☓☓ってあると思うのでそれに合わせてください。
683じゃないときに、landscapeになり、683のときはportraitになります。

CSS

使用しているテーマ、自分で他に書いてるソースで多少変わるかも。

貼り付ける場所

管理画面 > デザイン > カスタマイズ > デザインCSS

padding-top: 66.6992188%;とかの数字は、上で覚えておいた、

<iframe ~~ data-natural-width="1024" data-natural-height="683" ~~></iframe>

この数字を使います。

計算式は
高さ / 幅 * 100(%)
つまり
683 / 1024 * 100
で出します。

縦の時は100%では大きすぎるので、70%ぐらいにしたいので、
1024 / 683 * 70
で出します。

貼り付けるもの

/*============================ #flickrrrrrr ============================*/
iframe.flickr-embed-frame {
  margin: 0 auto !important;
  display: block;
}

[class*='flickr-wrp-']{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/*横写真*/
.flickr-wrp-landscape {
  padding-top: 66.6992188%;
}

/*縦写真*/
.flickr-wrp-portrait {
  padding-top: 104.948755%;
  width: 70%;
  margin: auto;
}

[class*=flickr-wrp-] iframe.flickr-embed-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%!important;
  height: 100%!important;
}

これで完了です〜〜〜。
これでもろもろすっきり〜〜。

あー説明難しい……。
こういうのをうまく説明できるようになりたい……。

なんか質問があれば、コメント欄とかそのへんでも〜〜。他にいい方法があるとかも…あと、説明の仕方が下手とかいうツッコミも……

 

▶ [WordPress]ブログをリニューアルいたしました。
▶ はてなブログからWordPressに移行
サイトリニューアルってほどでもないけど少し改修しました

Comment

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。