はてなブログテーマ「Flex PhotoGraph2」

写真系ブログ向けテーマ(旧Flex PhotoGraphのバージョンアップ版)

拡張機能(javascript)

flexphotograph.hatenablog.com

拡張機能を使いたい場合は、以下の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>