つちのこ。

JSのことばかり書いてます。

NEW !
テーマ:

アメブロ自体にそんな階層がないので、本来の目的にはならないけど、アクセントには成ると思う。貼るだけで作成されるようには成ってるけども…。

パンくずリスト。

urlから作成するようにしてます。「ただ表示させたい」のように、簡易的なものであればもっと記述量を減らせますが、やっぱどこにいるかを示せるようにはしたかったので。

未圧縮

!function($){

    var location_path = location.pathname
        , ameba_id = location_path.split('/')[1]
        , blog_title = $('.skinArticleTitle').text()
        , breadcramb_wrapper = $('<div id="header__breadcramb"><div class="header__breadcramb__wrap"><div class="header__breadcramb__container"><ul></ul></div></div></div>')
        , list_elements = $('.themeMenu').find('li')
        , list_element, list_name, list_id
        , theme_list = {}, theme_id, theme_name
        , i = 0;

    $('.skinHeaderFrame').after(breadcramb_wrapper);

    for( ;(list_element = list_elements[i]) != null; i = i + 1 ){

        list_name = $(list_element).text().match(/.+[^( )0-9]/g),
        list_id = list_element.className.match(/[0-9]+/g),
        theme_list['e'+list_id] = list_name;
    };

    if(location_path){

        if( /entry-/.test(location_path) ){
            breadcramb_wrapper.find('ul').append(
                '<li class="header__breadcramb--item"><a href="/'+ameba_id+'/"><span>HOME</span></a><span class="arrow">\></span></li><li class="header__breadcramb--item"><span>'+blog_title+'</span></li>'
            );
        }else if( /theme-/.test(location_path) ){

            theme_id = location_path.match(/[0-9]+/g).pop(),
            theme_name = theme_list[ 'e'+theme_id ],
            breadcramb_wrapper.find('ul').append(
                '<li class="header__breadcramb--item"><a href="/'+ameba_id+'/"><span>HOME</span></a><span class="arrow">\></span></li><li class="header__breadcramb--item"><a href="/'+ameba_id+'themeentrylist-'+theme_id+'.html"><span>'+theme_name+'</span></a><span class="arrow">\></span></li><li class="header__breadcramb--item"><span>'+blog_title+'</span></li>'
            );
        }else{

            breadcramb_wrapper.find('ul').append(
                '<li class="header__breadcramb--item"><span>HOME</span></a></li>'
            );
        }
    };        
}(jQuery.noConflict(true));

CSSはこのブログのモノを基準に。

#header__breadcramb {
    margin-bottom: 2em;
    height: 55px;
    background: #f3f3e9;
    box-shadow: 0 0 1px #999;
    line-height: 55px;
}
.header__breadcramb__wrap {
    margin: 0 auto;
    width: 960px;
}
.header__breadcramb__container ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
    .header__breadcramb--item {
        float: left;
}
        .header__breadcramb--item span {
            font-weight: 100;
}
        .header__breadcramb--item .arrow {
            margin: 0 1em;
            color: #ddd;
            font-size: 10px;
}

圧縮後

!function(e){var b=location.pathname,l=b.split("/")[1],n=e(".skinArticleTitle").text(),f=e('<div id="h__bc"><div class="h__brc__wrap"><div class="h__bc__container"><ul></ul></div></div></div>'),j=e(".themeMenu").find("li"),m,k,d,a={},h,g,c=0;e(".skinHeaderFrame").after(f);for(;(m=j[c])!=null;c=c+1){k=e(m).text().match(/.+[^( )0-9]/g),d=m.className.match(/[0-9]+/g),a["e"+d]=k}if(b){if(/entry-/.test(b)){f.find("ul").append('<li class="h__bc--i"><a href="/'+l+'/"><span>HOME</span></a><span class="ar">></span></li><li class="h__bc--i"><span>'+n+"</span></li>")}else{if(/theme-/.test(b)){h=b.match(/[0-9]+/g).pop(),g=a["e"+h],f.find("ul").append('<li class="h__bc--i"><a href="/'+l+'/"><span>HOME</span></a><span class="ar">></span></li><li class="h__bc--i"><a href="/'+l+"themeentrylist-"+h+'.html"><span>'+g+'</span></a><span class="ar">></span></li><li class="h__bc--i"><span>'+n+"</span></li>")}else{f.find("ul").append('<li class="h__bc--i"><span>HOME</span></a></li>')}}}}(jQuery.noConflict(true));

CSSクエリ名省略型。

#h__bc {
    margin-bottom: 2em;
    height: 55px;
    background: #f3f3e9;
    box-shadow: 0 0 1px #999;
    line-height: 55px;
}
.h__bc__wrap {
    margin: 0 auto;
    width: 960px;
}
.h__bc__container ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
    .h__bc--i {
        float: left;
}
        .h__bc--i span {
            font-weight: 100;
}
        .h__bc--i .ar {
            margin: 0 1em;
            color: #ddd;
            font-size: 10px;
}

クエリ名を短縮したり、色々圧縮しても1000文字くらいあるので、やっぱ手軽に使えるモノとはいえないかもw

ブログのこととか。

色々あって毎日が暇MAX状態です。まさに自堕落な生活とはこのことか・・・!そんなんで、デザインとかも目一杯詰め込んでみようと思いましたけどなんかのらない。なんとも可愛げもない。でもって増税にあわせて、広告外すなら1008円(笑)。安いレンタルサーバ一個を利用できちゃうという…wアドセンスもガチンコでやる気もなく(アワヨクバ月ノアメブロ利用費ト…)、やっぱ安易な考えじゃそれまでということでした。まあトントンならいいんだけど…。

いいね!した人