(cache) はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ

f:id:tsubasa123:20170602190005j:plain

こんにちは、つばさ（@tsubasa123）です。

若干出遅れましたが、タイトル通り、私もカスタマイズコードをご用意しました。まだちょっと課題があるんですけど、水物といいますか、旬を逃したくないので見切り発車でご紹介します。

詳細は公式ブログを

staff.hatenablog.com

どうぞ。特に説明は必要ないと思いますので割愛。/archiveに飛ばす必要がなくなりましたね、やったぜ。

現時点での出来栄え

キャプチャでドン。

f:id:tsubasa123:20170602184154j:plain

うん、カード。

www.foxism.jp

本日、先に記事を公開されたorefolderさんに若干引きずられましたが、まぁ同じカード型なんでしょうがないってことでご勘弁を。また時間があるときに、マウスインタラクションに対してズームのアニメーションとかつけてちょっとは工夫しようかと思っています。

ソースコードはこちら

今回はJavaScriptとCSSの追加が必要です。作業前はバックアップを取るようにしましょう。

JavaScript

if (! document.URL.match("/archive")) {
    $(function() {
        $(".entry-thumb").each(function() {
            let img = $(this).css('background-image');
            img = img.substring(5, img.length - 2);
            $(this).css('background-image', 'url(' + img.split('/').pop().replace('%3A', ':').replace(/%2F/g, '/') + ')');
        });
    });
}

実質3行のコードです。URLをごちゃごちゃして、縮小される前のアイキャッチ画像を取得しています。

nuruta2.hatenablog.com

ぬる太さんの記事では同様の処理をAjaxという技術でアイキャッチの取得を行っていますが、通信が多くなるとちょっと負荷の問題もあるかなーと思ってURLから取得する形で対応しました。まぁ、そんなに違いはないかもですし、私が非同期処理苦手ってのが本音です。

「デザイン > カスタマイズ > ヘッダ or フッタ」に追加してください。特に理由がなければ「フッタ」に入れることをおすすめします。

CSS

.page-index .archive-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page-index .archive-entry {
    flex: 0 0 48%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.page-index .archive-entry-header {
    order: 2;
}
.page-index .date {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.page-index .categories {
    order: 4;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}
.page-index .entry-thumb-link {
    order: 1;
    height: 200px;
}
.page-index .entry-thumb {
    width: 100%;
    height: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: none;
    position: absolute;
}
.page-index .archive-entry-body {
    order: 3
}
.page-index .entry-title {
    padding: 0.5em 0 0 0;
}

「デザイン > カスタマイズ > デザインCSS」に追加してください。あー、Chromeでしか確認してません。ごめんなさい。

design.syofuso.com

デザインはMinimal-Greenさんのものも素敵。というかこちらのほうが素敵。細かいところまで調整されておりますので合わせてチェックしてみてください。

把握している課題

JavaScriptで画像を取得して置き換えるまで、元の画像が引き伸ばされて表示されるのでちょっと荒さが目立ってしまいます。こればっかりはどうしようもないので、あえてフィルターを掛けてモザイクっぽくするとか、一思いに非表示にするとか技術的なアプローチが必要かなと思っています。プレースホルダーを出すのが昨今の流行っぽいんですが私の技術が追い付いていません、残念。

使ってくれる人が出てきたらこの辺は対応を考えようかと。