はてなPROならトップページの表示形式を「一覧形式」にすることでカード型レイアウトになるよう設定しています。
美しいカード型レイアウト
トップページの記事数は偶数が良いです。12か14くらいがオススメ。
ブログのサムネイル画像はお好みのサイズで良いのですが、私は400×280pxで作成するようにしています。
これはPC版はてなブックマークのサムネイルの2倍サイズとなります。
はてなブログからは正方形に切られたサムネイル画像が来てしまうので
設定→詳細→headに要素を追加
の箇所にでjQueryを読み込むコードを追加して
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
デザイン→カスタマイズ→フッタのところに下記コードを追加するとフルサイズの画像が表示されるようになります。
<script>
$(".entry-thumb").each(function() {
let thumbimg = $(this).css('background-image');
thumbimg = thumbimg.substring(4, thumbimg.length - 1).replace(/"/g, ''); //"
$(this).css('background-image', 'url(' + thumbimg.split('/').pop().replace('%3A', ':').replace(/%2F/g, '/') + ')');
});
</script>
正方形に切られる前の画像をjQueryで無理くり取得する感じです。
上記カスタマイズ設置前
カスタマイズ設置後
アイキャッチ用イラストもできる限り見切れて欲しくないというのがイラストを描く側の心情です。
