【はてなブログカスタマイズ】「Brooklyn」を徹底カスタマイズして、トップページをカード型にする方法【レスポンシブデザイン対応】

f:id:nuruta:20170312013233j:plain

この記事は

はてなブログの人気デザインテーマ「Brooklyn」。
こちらをベースにして、トップページを個性的に変えちゃおうというカスタマイズです。

出来るだけ、コピペだけで済むようにしています。
完成図はこんな感じになります。
f:id:nuruta:20170512222526j:plain
トップページに移動して、色々試してみて下さい。

それでは目次です。

この記事は
カード型に憧れてたけれど…
条件
仕組み
「Brooklyn」をインストール
CSS
script
終わりに

カード型に憧れてたけれど…

トップページがカード型のデザインテーマって実は既にあるんです。
このブログで使わせて頂いている「CARTA-YEL」もそうだし、「ZENO-TEAL」なんかもそうですね。
同じ作者さんです。

ただ、使用するには条件がありました。
「記事の最初に画像を貼りつけてあること」!!
これが絶対条件です。

何だか当たり前のように「みんな先頭に画像貼ってるでしょ」って説明されていて、もにょったんですが…。
僕はそういう構成で記事を書いていなかったので、全記事そうなるように再編集した位です。
ただ、記事数が多いとそうも言ってられません。

僕のメインブログでは800ほどの記事があって、全部を編集するには骨が折れる作業量でした。

なので、方針を転換して、自分でカスタマイズしちょおうと考えたのです。

記事の最初に画像を置いてなくて、編集する量も膨大だ!!
けれど、トップページを人とは違うオシャレなデザインにしたい。
そういうブロガーさんにちょっとでも役立てたら幸いです。

条件

ただ、それでも条件がいくつかありますので提示します。

・はてなブログproに加入してること
・続きを読むを取り入れていること
・アイキャッチ画像を設定していること

proに加入して、はてな側で挿入されている広告を消す必要があります。
もう1つ、続きを読むを取り入れていることが前提にあります。

この3つの条件を満たしていれば、可能です。

仕組み

「続きを読む」ボタンに背景画像として、記事毎のアイキャッチ画像を設定しています。
この「続きを読む」ボタンを上に配置して、記事タイトルを下に持ってきてます。
これがざっくりとした仕組みになります。

「Brooklyn」をインストール

先ずはデザインテーマストアで「Brooklyn」をインストールしてください。
shiromatakumi.hatenablog.com

そのまんまでも充分美しいのですが、敢えてここから手を加えていきます。

グローバルナビは、シロマティさんの記事で設置の方法が書かれていますので、そちらで導入して下さい。

CSS

デザイン設定⇒カスタマイズと進み、一番下にある「デザインCSS」内にコピペしていきます。

/*********************************************************/
/*   toppage部                                            */
/*********************************************************/
 /* 各ブログ記事 */
.page-index #wrapper,
.page-index #main,
.page-index #main-inner{
  width:100%;
}  
  
.page-index .entry {
    width: 33%;  /* 50%で2カラム、25%で4カラム */
    height:350px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border: none; /* お好みでborderを消す */
    margin-bottom:10px;
    cursor:pointer;
}

.page-index .entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 5px;
  width:95%;
  height:100%;
}

.page-index .entry-inner {
    display: table;
}

.page-index .entry:hover,
.page-index .entry:hover .entry-title {
background-color: #ecf9fb; /* マウスオーバー時の背景色。自由に変えて下さい。 */
}

 /* 日付、ブログタイトル、カテゴリの親要素 */
.page-index .entry-header {
    display: table-footer-group;
}

.page-index .entry-see-more {
  width: 300px;　/* 横幅です。自由に変更して下さい */
  height: 100px; /* 縦幅です。自由に変更して下さい */
  margin-top: 0;
  margin-bottom: 24px;
  position: relative;
  display: block;
  line-height: 120px;
  text-align: left;
  text-decoration: none;
  position: relative;
  border: 2px solid #4784bf;
  z-index:2;
  overflow: hidden;
  background-position:20% 30%; /* 取得した画像の表示部分の調整 */
  background-repeat: no-repeat;
  background-size:cover;
}

.page-index .categories {
	position:absolute;
	top:120px; /* カテゴリの表示位置です */ 
}

.page-index .entry-content img,
.page-index .entry-content p{
   display: none;
}

.page-index .entry-footer,
.page-index .comment-box {
   display: none;
}

/* ディスプレイサイズ1050px以下の時、横に2列表示 */
@media only screen and (max-width: 1050px) {
.page-index .entry {
    width: 49%;
}
}

/* ディスプレイサイズ700px以下の時、縦に1列表示 */
/* スマホ対応です */
@media only screen and (max-width: 700px) {
.page-index .entry {
    width: 100%;
}
}

/* 「続きを読む」の文字を消しておく */
.page-index .entry-see-more {
    color: transparent;
}

/* ブログ記事エリア */
.page-index #wrapper {
    float: none;
    display: inline-block;
    border: none; /* お好みでborderを消す */
    margin-right: 0;
    padding-right: 0;
}

/* サイドバーエリア */
.page-index #box2 {
	width:auto;
}

.page-index .hatena-module{
    width: 33%;  /* 50%で2カラム、25%で4カラム */
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    margin-bottom:10px;
}
@media only screen and (max-width: 1050px) {
.page-index .hatena-module {
    width: 49%;
}
}

@media only screen and (max-width: 700px) {
.page-index .hatena-module {
    width: 100%;
}
}

.page-index .pager a{
  display:inline-block;
  width :90% ;
  height :3em;
  text-align: center;
  line-height: 3em;
  border-radius: 6px;
}

script

スクリプトは2種類使用します。
1つは、id:a-kuma3さんが作って下さったもので、「続きを読む」ボタンにアイキャッチ画像を表示するためのものです。

以下をデザイン設定⇒カスタマイズと進み、ヘッダーもしくはフッターに追加して下さい。

<script>
$(function() {
    $(".entry-see-more").each(function() {
        var see_more = this;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', see_more.href, true);
        xhr.onload = function(e) {
            if (e.target.status <= 200) {
                var d_ = e.target.response;
                var eye_catch = $('meta[property="og:image"]', d_)[0].content;

                // サイズの調整とか何とかはあるだろうけれども...
                see_more.style.backgroundImage = 'url(' + eye_catch + ')';
            }
        };
        xhr.responseType = 'document';
        xhr.send(null);

    });
});
</script>

ここまででほぼほぼ完成です。
あとは、ボタン以外の部分もリンクにする作業ですね。

<script>
$(function(){
     $(".page-index .entry").click(function(){
         window.location=$(this).find(".entry-title-link").attr("href");
         return false;
    });
});
</script>