【はてなブログカスタマイズ】「Brooklyn」を徹底カスタマイズして、トップページをカード型にする方法【レスポンシブデザイン対応】
この記事は
はてなブログの人気デザインテーマ「Brooklyn」。
こちらをベースにして、トップページを個性的に変えちゃおうというカスタマイズです。
出来るだけ、コピペだけで済むようにしています。
完成図はこんな感じになります。
トップページに移動して、色々試してみて下さい。
それでは目次です。
カード型に憧れてたけれど…
トップページがカード型のデザインテーマって実は既にあるんです。
このブログで使わせて頂いている「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>
これを同様にヘッダー若しくはフッターに追加して下さい。
作業は以上になります。
終わりに
トップページに表示する記事数を調整し、綺麗に並ぶ様な数にして下さい。
横3列なら6記事。
横2列なら4記事か6記事。
記事数を奇数に売ると不恰好になりますので、注意して下さいね。
あんまり多いのもスマホでの閲覧者の負担になりますので。
同様にサイドバーのメニュー数も工夫して、なるべく減らした方が良いと思います。