カード型デザインをカスタマイズしてみたよ
個人的にカスタマイズブームが来て楽しくなってきています。カード型デザインについてのカスタマイズをここにまとめて掲載していけたらと思ってます。
記事を見ようと思うか決まると言っても過言ではないですからね。あこがれのブログに近づけるように色々と試行錯誤してみたいと思います。
記事の説明文（概要）とはてなスターを非表示
「ダッシュボード > デザイン > カスタマイズ」からデザインcssに以下のコードを書き込みます。
gist84a120b72c6fbcfa70abbde3f86e8768
枠を丸く
「ダッシュボード > デザイン > カスタマイズ」からデザインcssに以下のコードを書き込みます。
gist308a8da31531993d5079e95751d5e546
分かりづらいですが、カードの枠を丸くし、アイキャッチの上部のみを丸くしています。5pxを大きくすれば大きな丸になるので、好みの大きさにしてください。
カテゴリーのデザイン
「ダッシュボード > デザイン > カスタマイズ」からデザインcssに以下のコードを書き込みます。
gist90524088c16e6993340e4881b7ee37aa
スッキリして見やすくなりましたね。
アイキャッチの下に線を引く
「ダッシュボード > デザイン > カスタマイズ」からデザインcssに以下のコードを書き込みます。
gistc40c1b123f4a3b98995a6597b64fb22c
分かりづらいですが、アイキャッチが背景と同じ色だと境界線がわからないので線を引いてみます。
カードに枠線を引く
「ダッシュボード > デザイン > カスタマイズ」からデザインcssに以下のコードを書き込みます。
gist67a04712dc6f406ea02c1011f6ecfcb7
枠線を引くことで見やすくなりますね。
日付の位置を変更する
「ダッシュボード > デザイン > カスタマイズ」からデザインcssに以下のコードを書き込みます。
gist72df959a8dbdeb7b0fe6ed87d5d28c88
これは好みによると思いますが、個人的には右側の方が好きです。
アイキャッチ画像が見切れないようにする
はてなブログの仕様で自動的にトリミングされるようです。私は、そのように感じたアイキャッチをまだ見ていませんが、とりあえずやれることはやっておきましょう。
「ダッシュボード > デザイン > カスタマイズ」からフッタに以下のコードを書き込みます。
gist521422a4adca4e4a6cc2970e1727e9c2
まとめ
デフォルトと比較するとかなり変わりましたね。TOPデザインもこれからカスタマイズしていきたいと思います。
もっといい方法あるよって方いましたら、コメントいただけると嬉しいです。
参考にさせて頂いたサイト様
