【はてなブログ】Flickr貼り付けをレスポンシブ対応させる方法
2018.02.25
はてなブログで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
使用しているテーマ、自分で他に書いてるソースで多少変わるかも。
貼り付ける場所
管理画面 > デザイン > カスタマイズ > デザインCSSpadding-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