無料会員でもカード型レイアウトのトップページを使いたい！
無料会員でもカード型レイアウトのトップページを使いたい！
無料会員でも使えるカード形式のトップページの作成方法をご紹介します．
こんにちは，シュンクマです．
珍しくブログのモチベーションが続き，連続3日目の更新です．
ここ最近，ブロガーなら一度は憧れるカード型レイアウトのトップページを作成するのに四苦八苦して夜，休日をなくしてしまいました．そして，ようやくそれっぽいトップページが完成しました．
四苦八苦した理由は，拝見したブログがみなはてなブログpro，すなわち有料会員を前提にカード型レイアウトの作成法を記載していたからです．
このページにたどり着いたということは皆さんも同じ状況にあったからだと思います．
ですので，本記事ではカード型レイアウトのトップページを無料会員でも作成できる方法をご紹介します．
目次を作成すること
カード型レイアウトとは
カード型レイアウトとは，四角いカードにサムネイルとタイトルが入ってるデザインで、2,3列のカードが並ぶグリッドデザインのことを指します．(引用リンク貼る)
以下，リンク先のブログのトップページは，はてなブログで最も人気なカード型レイアウトを使用して作成されています(というか作成者のモデルページ)．
テーマストアはこちら．
2列の記事とサイドバーで成り立ち，スッキリと見やすいカード型レイアウトと斑点模様の爽やかな背景で， 皆さんが使いたくなる理由が良く分かります...
カード型レイアウトを使用する際の注意事項
しかし，1つ重要な注意事項があります．
トップページはカード型ですが、広告が表示される場合は各記事の上に大きく表示されてしまいます。なのではてなブログProで広告非表示にしている方でないと、使うのはおすすめしません。 広告が出ている場合、Googleアドセンスのポリシー違反になる恐れがあるので、無料版では使わないでください。(引用貼り付けしたい)
とストアに説明書きがされています．
この問題はこのテーマだけでなく，この他のカード型テーマにも問題があり，記事の上に広告が貼られるかレイアウトが解かれてしまいます．
ですので無料会員はカード型レイアウトを使用するのがなかなか難しい状態にありました．
解決策
解決策の目次を作る
以下のテーマ「Creativity」を使用することでほとんど解決しました．
テーマストアはこちら．
お恥ずかしながらどうしてこのテーマだと広告を記事下に弾けるのか分からないです．
今後調査していきます．
(勘違いで他のテーマでもカードレイアウトに出来ていた？
としても手間なく解決したのはこのテーマくらいだった．)
完全に広告を取り除いた有料版のようなカードレイアウトにはできませんでしたが，無料会員で使用できるものとしては十分な見栄えだと思います．
本来，テーマを追加しただけだと本文が垂れ流れる全文形式のままなので，記事を好きな箇所から畳み込める「続きから読む」記法を組み込む必要があります．
↓以下参照．
それにより図.2にような見た目になります．
また，現状では記事へ飛ぶためには記事タイトルか続きを読むボタンをクリックするしかなく，クリックする範囲がとても限られています．
カード形式は大きな画像を利用したいのでサムネイルとなる画像にリンクを貼り付けます．
↓以下参照
（別記事を作ってリンクを貼る）
以上で無料会員版カードレイアウトのトップページの完成です．
追加するとよい機能
・グローバルナビゲーション(グローバルメニュー)
タイトル下にあるカテゴリーなどを貼り付けるメニューバーのことです．
Creativityは初期設定だとグローバルナビゲーションがありませんので追加すると便利です．
以下のブログにとても分かりやすく記載されています．
・ブログ内で有効な検索バー
専門性があり，記事数が多いブログでは検索バーがとても役に立ちます．
人気なブログは共通して検索バーを備えているらしいので下記のコードを
右上のダッシュボード > デザイン > カスタマイズ > ヘッダ > タイトル下にコピペして追加しましょう．
actionの〇〇〇は自分のブログのURLを入れてください．
/* 検索ボックス */
<div class="hatena-module-search-box">
<div class="hatena-module-body">
<form class="search-form" name="search" role="search"
action="https://〇〇〇/search" method="get">
<input type="text" name="q" class="search-module-input" value="" placeholder="ブログ内検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>
・サイドバーのカテゴリーを横並びに
Creativityはサイドのカテゴリー欄が縦書きになってしまい，カテゴリーを増やすとそれだけ見づらくなっていきます．
ですので，以下のコードをダッシュボード > デザイン > カスタマイズ > デザインcssにコピペしましょう．
/* サイドバーのカテゴリーを横並びに変更 */
div.hatena-module-category div.hatena-module-body ul li {
display: inline-block;
}
また追加したほうがいいものを発見した場合にはこのページに追記していきます．
まとめ
作成すること
以上となります．
私もまだにわかですが，わからないことがあればお互い勉強していきましょう．
ご指摘も頂けるならばどんどんお願いいたします．
読んでいただきありがとうございました！
P.S. 現在はこちらのテーマも気になっております笑
http://blog.hatena.ne.jp/-/store/thstronge/98012380861710503
カード形式ではありませんが，個性とシンプルさを兼ね備えておりとても美しいと思います．
公式かは分かりませんが，2019年「はてなブログ デザインテーマコンテスト」の最優秀賞受賞作品に選ばれたみたいです．納得．
個人的にはなぜか広告が貼られていないのが最大の魅力だと思います(ΦωΦ)ﾌﾌﾌ…
http://blog.hatenablog.com/entry/2019thstrongecontests_result_
