惜しげもない

WEBであったり、写真であったり、カメラであったり、旅行とか、なんかそんな感じとかでどうでしょうか。

はてなブログでFlickr貼り付けをした際のレスポンシブ対応

f:id:tako3ch:20180224190315j:plain

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

とはいえFlickrを利用した写真管理は楽だし、アップロードも楽だしということでやめられないです。

この「たこさんちゃんねる」でも、だいたいの写真を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>

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

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

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

というわけで次

ソースコード

JS

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とかそのへんでも問題ないです。

貼り付ける場所

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

貼り付けるもの
<script>
// 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" />' );
		}
	  });
});
</script>

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

CSS

使用しているテーマ、自分で他に書いてるソースで多少変わるかも。
Coffee Breakを利用している方は下記のソースコードはすでに入ってますのでコピペの必要はないです。

貼り付ける場所

管理画面 > デザイン > カスタマイズ > デザイン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;
}
</script>


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

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

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