拡張機能(javascript)
拡張機能を使いたい場合は、以下のjavascript をデザインのフッタへ設定して下さい。
タイムスタンプ 2017/09/20 機能追加で更新しました。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> /*====== Flex PhotoGraph 拡張機能 設定値 =========*/ var bw = 220; /* カード幅の下限基準値(def.220px) */ var yw = 12; /* カード間の隙間補正(def.12px) */ var rmode = 0; /* ランダムモード = 1 */ var wv; /*=================================================*/ /*----- デバイスの判定、PCかどうか知りたい ----*/ var dev = (function(){ var ua = navigator.userAgent; if( (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0){ return 'smf'; }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){ return 'tbl'; }else{ return 'pc'; } })(); /* ナビ機能予約 */ $('#navflexphoto').append($('.hatena-module-links .hatena-urllist').html()); $('#cateflexphoto').append($('.hatena-module-category .hatena-urllist').html()); /*ヘッダ画像、ブログの写真と差し替え */ if($('#blog-title-inner').css("backgroundImage").length > 10) { var imgUrl = $('.entry-inner').find(".hatena-fotolife:first").prop("src"); if (imgUrl) { $('#blog-title-inner').css("backgroundImage", 'url(' + imgUrl + ')'); $('#blog-title-inner').css("background-size", 'cover'); $('#blog-title-inner').css("background-position", '50% 50%'); } } if( dev == "smf") { //$(window).on('load', function() { // /* ロード一発目補正をレディで */ // wv = $('#main').css('width'); // wv = wv.replace("px", ""); // MainWidthChg(wv); //}); } else { /* ロード一発目補正をレディで */ wv = $('#main').css('width'); wv = wv.replace("px", ""); MainWidthChg(wv); } /*---------- 画面の大きさ変わった ------------*/ $(window).on('resize', function(){ wv = $('#main').css('width'); wv = wv.replace("px", ""); MainWidthChg(wv); }); /*------------ 精密にカード列数と幅をレスポンシブさせる処理 -------------*/ function MainWidthChg(wv) { /* 下限基準値で何列配置できるか */ var cols = Math.floor(wv / (bw+yw)); if (cols <= 1) { /* 1列分の幅しかないよ */ $('.archive-entries .archive-entry').css("width", "100%"); $('.archive-entries .archive-entry').css("margin-bottom", yw); return; } /* 現物の個数でアンダースペックになった場合、演算側で幅増やす */ if( wv > ($('.archive-entries .archive-entry').length * (bw+yw)) ) { cols = $('.archive-entries .archive-entry').length; } /* 得た列数で配置した場合の余る余白の演算、若干の隙間補正 */ /* まだ使える余白をカード幅の下限基準値に足し込み%計算 */ var fw = bw + ((wv - ((bw+yw) * cols)) / cols); fw = fw * 100 / wv fw = fw + "%" if (rmode==1) { var wv2 = 0; $('.archive-entries .archive-entry').each(function() { /* ランダム幅 ベースサイズ / 2 以上からスタート growで連結して押し込む */ var rw = (bw / 2) + (Math.random()*bw); if($('.archive-entries').css("display")=='flex' || $('.archive-entries').css("display")=='-webkit-flex') { $(this).css("flex-grow", "2"); $(this).css("width", rw); } else { /* 古いブラウザ対応 */ wv2 = wv2 + rw; if( wv2 >= wv ) { rw = wv - (wv2 - rw + 20); wv2 = 0; } if( rw < (bw / 4) ) { rw = bw; wv2 = bw; } $(this).css("width", rw); } }); $('.archive-entries .archive-entry').css("margin-bottom", "0"); } else { if($('.archive-entries').css("display")=='flex' || $('.archive-entries').css("display")=='-webkit-flex') { /* レスポンシブさせる */ $('.archive-entries .archive-entry').css("width", fw); $('.archive-entries .archive-entry').css("margin-bottom", yw); } else { /* 古いブラウザ対応 */ $('.archive-entries .archive-entry').css("width", fw); $('.archive-entries .archive-entry').css("margin-bottom", yw / 2); $('.archive-entries .archive-entry').css("margin-left", yw / 2); } } } </script>