2カラムのテーマで、標準でサイドバーコンテンツのタイトル等にフラットデザインのアイコンを設置し、一貫性のあるブログデザインを意識しました。
トップページの表示形式を「一覧表示」(はてなブログProのみ)に設定した場合はカード型のレイアウトになります。
「全文表示」に設定した場合に記事の一番上にある画像がアイキャッチ画像としてトップページに表示され、横長のリスト型のレイアウトにするカスタマイズを以下のページで公開しています。
リスト型レイアウトにする方法
トップページではてなスターを非表示にさせる
トップページ(一覧表示)ではてなスターを表示できるようにしました。
トップページではてなスターを非表示にさせたい場合は以下のコードを『デザインCSS』に貼り付けてください。
.page-archive .archive-entry { height: 260px } .page-archive .social-buttons { display: none } @media (max-width: 1024px){ .page-archive .archive-entry{ height: 210px!important } } @media (max-width: 480px){ .page-archive .archive-entry{ height: 230px !important } }
テーマカラーの変更方法
テーマカラーは標準で「珊瑚色」になっていますが以下のコードの「#FF6F61」の部分をお好きな色に変更し、『デザインCSS』に貼り付けることにより、簡単にテーマカラーを変更することができます。
#blog-title, #footer, .archive-heading::before, .categories::before, .entry-content h3::before, .entry-content h4::before, .entry-content h5::before, .entry-footer .hatena-module-title::after, .hatena-module .hatena-module-title, .hatena-module-search-box .search-module-button, .leave-comment-title, .page-about .entry-content dt::before, .page-index .entry-see-more, .pager a, .search-result-form .search-result-button { background: #FF6F61; }
仕様
- レスポンシブに対応
- IE(11)、Chrome(72)、Firefox(65)、Edge(17)で正常に表示されます※2019年3月13日現在
更新履歴
- 2019/03/13 公開
- 2019/03/14 カスタマイズを公開しました
- 2019/03/18 設定による表示の崩れを修正しました
- 2019/03/30 トップページ(一覧表示)ではてなスターを表示させるように修正。