つばさのーと

つばさの日常を綴るのーと

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

f:id:tsubasa123:20170604181324j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

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

 

ごめん、バグってた

 

www.tsubasa-note.blog

 

ごめんなさい記事書きました。上記ページのコードをご利用いただけますようお願いします。

 

詳細は公式ブログを

 

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

 

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

 

さいごに

 

もうちょっと検証してから公開しようと思っていたんですが、皆さん、カスタマイズ公開するのはやくないですかね?私のコーディングスピードが遅いのかな?

 

今回はいつにもまして急いで作ったので結構粗があると思います。問題点やご要望がございましたらお気軽にお声がけください、レスポンスは遅いですが気が付いたらお返事させていただきます。

 

ではでは、最後までお付き合いいただきありがとうございました。